Skip to main content
This topic has been closed for replies.
Correct answer osgood_

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.

2 replies

Liam Dilley
Inspiring
June 21, 2022

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 🙂

REELHEROAuthor
Inspiring
June 21, 2022

thank you

Nancy OShea
Community Expert
Community Expert
June 20, 2022

I have previously used Wow.js library with Animate.css.  It has a light footprint and gets the job done with minimal fuss.

https://wowjs.uk/

 

 

Nancy O'Shea— Product User & Community Expert
REELHEROAuthor
Inspiring
June 20, 2022

Nancy hi!

 

thank you--

 

i just did a test page with wow and thought i did it correctly

 

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

 

installed wow.js and animate.css and added wow animate__animated animate__fadeInUp to the class 

Nancy OShea
Community Expert
Community Expert
June 21, 2022

This is an example of Wow.js on a <div> tag that contains one image.

 

<div class="col wow fadeIn" data-wow-delay=".51s" data-wow-duration="1.55s">

IMAGE HERE

</div>

 

Nancy O'Shea— Product User & Community Expert