search

jlmakes / scrollreveal

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

Element fadeout/reset on scroll down #446

Closed ghost closed 6 years ago

ghost commented 6 years ago

On https://scrollrevealjs.org/ the blocks fade out when being scrolled out of view regardless of the direction of scroll. I can't seem to replicate that with any of the settings. My element fades out on reset when scrolling back up but I'm trying to have it also reset when it reaches the top of the page (like the blocks on the official scrollreveal site). How can I achieve this?

jlmakes commented 6 years ago

It sounds like you're talking about option.reset, which hides elements as they leave the viewport. All of the JavaScript used is at the bottom of the page, so you can examine exactly how I configured the animations.

ghost commented 6 years ago

I have reset set to true, but the element only fades out when it leaves through the bottom of the page and not the top.

ghost commented 6 years ago

https://codepen.io/kierien/pen/LBVqmR

here is what I have

jlmakes commented 6 years ago

It's working fine.

Your .title-text elements are just really tall, which does not work well with a viewFactor: 0.3. That means 30% of those really tall elements must be visible (or invisible) to trigger reveal (or reset).