Scroll triggered animation

Question

Id like my thumbnails to animate in on scroll one by one fading in and sliding up as they do here

https://smugglersite.com/global/commercials/aoife-mcardle/absolut-equal-love

current page:

https://toddheymandirector.com/reel/

ideally using CSS only

osgood_ · Accepted Answer

Osgood.. thank you! i wouldnt have built that site without you--

works beautifully--so elegant

https://toddheymandirector.com/reel/index_scroll.html

the only thing is i see - there seems to be a second fade in (ie it fades in fades out fades in again -noticably on the 2nd row which is immediately visible

All I can suggest is remove the 'faded' class from the containers, it's not needed.

Looking at the rest of your css, it's a bit of a mess, so I'm not surprised there might be more than a few conflicts.

Liam Dilley · Answer

As Nancy pointed out WOW.js is great but you do have to have animate.css to couple it together.

Knowing when an element is in view etc is the key aspect of such functionality.
https://dev.to/emmaccen/how-to-know-if-an-element-is-visible-in-viewport-c45
As well as when they scoll

https://developer.mozilla.org/en-US/docs/Web/API/Document/scroll_event

That is the core guts and there are Javascript frameworks like this one:
https://camwiegert.github.io/in-view/
That just focus on giving you the knowledge when the element is in the view so you can do your own thing.

Wow.js and animate.css give you options (quite a lot) to choose a load of preset animations to do but if you want custom you can use the above information and then your own CSS animations to do that as well.

Just extra information really here for you 🙂

Sign up

To post, reply, or follow discussions, please sign in with your Adobe ID.

Sign in to Adobe Community

To post, reply, or follow discussions, please sign in with your Adobe ID.

Scanning file for viruses.

This file cannot be downloaded