Sequential Animation not working

[ghost]

Hi there! I've tested many reveal plugins and this is by far the best one, nice work!

This is my setup:

ScrollReveal().reveal('.grid-item', {               
    delay: 600,
    interval: 300
});

The sequential animation of my grid-items is working here but I need a different reveal-animation so I've tried this:

var fadeInUp = {
    distance: '20%',
    origin: 'bottom',
    opacity: null
};

ScrollReveal().reveal('.grid-item', fadeInUp, {               
    delay: 600,
    interval: 300
});

Now my grid-items won't appear in a sequence, they are all shown at once. What did I wrong? Thanks in advance! :)

edit: The sequence is working for the grid-items which are revealed after scroll. But the grid-items, which are initially shown on page-load (4 items are visible at a desktop-resolution) are all revelead at once and not one by one.

[jlmakes]

@sirbene The reveal() method only accepts two arguments, but you've passed three in your example snippet:

var fadeInUp = {
    distance: '20%',
    origin: 'bottom',
    opacity: null
};

ScrollReveal().reveal('.grid-item', fadeInUp, {               
    delay: 600,
    interval: 300
});

So the 3rd argument (the { delay: 600, interval: 300 } object) is being ignored. I understand why you separated the options, but you'll need to combine them into one object, e.g. using Object.assign()

Example:

var fadeInUp = {
    distance: '20%',
    origin: 'bottom',
    opacity: null
};

var delayedSequence = {
    delay: 600,
    interval: 300
};

ScrollReveal().reveal('.grid-item', Object.assign({}, fadeInUp, delayedSequence));

Note: I'll leave it up to you to worry about browser compatibility (babel, polyfill, etc.)

[jlmakes]

Also just thought I'd mention...

A modern solution would use the Object spread operator (ES2018):

ScrollReveal().reveal('.grid-item', {
    ...fadeInUp,
    ...delayedSequence
});

This looks cleaner, but you'll need Babel (or some other transpilation step) to use it. Otherwise Object.assign() accomplishes the same thing.

[ghost]

I forgot to thank you, it's working nicely now!

I know this is a closed post, but I have a question: Is it possible to achieve a image-scrolling-effect like this with scrollreveal? If you scroll the page down, the image will receive a dynamic translate3d on the y-axis between 0% and max. +25% (based on the scroll location). If you scroll the page up, it will be reserved (up to -25%). Thanks in advance!

[jlmakes]

Good to hear @sirbene

For that effect, I believe you would need some sort of "scroll progress" value. ScrollReveal does not presently have such a feature, but will in the future.