CODEWITHSUNDEEP
jquerycssanimationanimate.css
S Biswas
S Biswas

Reputation: 7

How to activate animate.css after scroll

I am using animate.css [https://daneden.github.io/animate.css/] and I have added some animations to some of my elements in my webpage. But there's a problem. The animation is done instantly and already over before scrolling down to that portion. Is there any way to add the animated class after that particular element is loaded?

So that the animation will only be visible when a user scroll to that element.

Upvotes: 0

Views: 1748

Answers (4)

user1967509
user1967509

Reputation: 43

There is a small js library that can achieve that easily.

https://wowjs.uk/

After you add the JS file on your project, add this code on your page;

<script src="js/wow.min.js"></script>
<script>
new WOW().init();
</script>

Then just use the wow class, example.

 <div class="wow bounceInUp">
 Content to Reveal Here
 </div>

Upvotes: 1

Nathan Meunier
Nathan Meunier

Reputation: 131

Yup, you can use Jquery/javascript to add the animation class dynamically to your element after an event. If you put your code, I could maybe more help you. EDIT: by example, if you want an animation when you click on a button, you can do:

$( "#target" ).click(function() {  $('#yourElement').animateCss('bounce'); });`

Upvotes: 0

Milan Nakrani
Milan Nakrani

Reputation: 34

new WOW().init();

and call class class="wow bounceInUp"

Upvotes: -1

Gy L
Gy L

Reputation: 1

i have a idea, maybe can help you you can add animate element by javascript when the page scroll in place , js add this element into the webpage (so , it will start to animate)

Upvotes: 0

Related Questions