How to get an animate.css animation to activate when I scroll down to a specific element?

1

Does anyone know how to use animate.css? I’m having issues making the animation appear when the user scrolls to that element. <p class="m-b-30 animated bounceInUp delay-2s"><img src="assets/images/Responsive_web_design1.png" alt=""></p> I did the this code but thinking about it the delay 2s is not even what I want as what if the user takes longer than 2 seconds to scroll down to a specific element.

My whole site code is here https://github.com/liamdocherty/ZP_files_web

Can someone help me implement this into my code? https://scotch.io/tutorials/level-up-your-websites-with-animatecss#toc-scroll-animations

I done the following in my HTML and copy and pasted the JS into my javascript file but it still doesn’t work?

<div class="icon-box-title scroll-animations">
     <h6 class"animated">Mega Menus</h6>
</div>
2

You need to use JavaScript and calculate the scroll position, then add the animation class you want the element to have.

3

Ok thanks I’ll look into this now :slight_smile:

4

You are missing the = after class on the h6

<!--  you have -->
<h6 class"animated">Mega Menus</h6>
<!--  should be -->
<h6 class="animated">Mega Menus</h6>

Anyway, the Jquery code you posted a link to works for me.