search

jlmakes / scrollreveal

Animate elements as they scroll into view.
https://scrollrevealjs.org/
22.35k stars 2.26k forks source link

Sequenced elements outside of viewport being revealed? #370

Closed akroii closed 7 years ago

akroii commented 7 years ago

OSX Sierra Chrome 60.0.3112.101 (64-Bit) ScrollReveal 3.3.1

If DOM is ready, elements being revealed, but they are not in viewport and outside of visible area. Every elements should be revealed on scroll if in viewport!

Whats going wrong? (link deleted)

jlmakes commented 7 years ago

Hi @akroii

It sounds a lot like you’re missing height: 100% on your <body> element.

Without this, your <body> will stretch to the entire height of the content… and so elements will be considered visible immediately (even though the window can’t show it all).

akroii commented 7 years ago

Nothing changed... do you think generally such problems are initiated by css?

jlmakes commented 7 years ago

I see.

ScrollReveal 3 does not apply height: 100% to the <body> for you. That seems to be the most common hole in the system that developers run into, where elements reveal before being scrolled to.

I did notice quite a few errors in the console, perhaps it’s a conflict with a 3rd party library. For example, any UI libraries that make changes to the DOM, or how native scroll events are emitted, can easily break things.

I’ll take a second look at the site a bit later.

jlmakes commented 7 years ago

@akroii You are using the v3 sequencer.

// Your code:
sr.reveal('.timeline-item', config, 250)

That 250 is the reveal interval and creates a sequence. In version 3, all elements in a sequence are triggered when any of them are visible. This has come on quite a few times… #367 #358 #342 #339 #305 etc...

The short answer is upgrade to version 4 (currently in late-stage beta), which has a brand new (and completely kick ass) sequencer.

It’s also worth pointing out, those elements are so large, you can’t really see the sequence occur anyway—so you could just remove the sequence interval.

afalchi82 commented 6 years ago

Documentation for how to use v.4 sequencer?

jlmakes commented 6 years ago

@afalchi82 Some (breaking) changes hit the v4 beta recently:

The interval parameter has been removed, and replaced with options.interval.

// v3.x
var sr = new ScrollReveal();
sr.reveal('.item', { duration: 500 }, 200);
// v4.x
ScrollReveal().reveal('.item', { duration: 500, interval: 200 });

My hope is that this improves consistency, and helps beginners wrap their head around how to use the reveal method; this way there is only one method signature: reveal(target, options)