Closed ghost closed 5 years ago
@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.)
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.
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!
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.
Hi there! I've tested many reveal plugins and this is by far the best one, nice work!
This is my setup:
The sequential animation of my grid-items is working here but I need a different reveal-animation so I've tried this:
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.