CODEWITHSUNDEEP
javascriptcsseffectsanimate.css
yusuf
yusuf

Reputation: 3

How to apply Animate.css effect to the element ONLY when scrolled to it?

Am using animate.css library to apply animated effect on my website. But the problem is effect is applied as soon as page is loaded. And when I scroll to the element effect is already applied. How can I set effect to be applied only when the element appear while scrolling?

Upvotes: 0

Views: 551

Answers (2)

CodeRomeos
CodeRomeos

Reputation: 2448

You need to add wow.js and apply it. This will work when you scroll down to bottom. To use it, add wow.js in head and add the wow class in the animated element.

<div class="FadeIn wow">
  ------
</div>

Get it Here. and read full documentation.

Upvotes: 2

mustafa1993
mustafa1993

Reputation: 561

You can use Waypoints – A javascript library that allows you to execute a function when you scroll to an element.

The basic Waypoint function in jQuery looks like this:

$("#element-to-animate").waypoint(function() {
    // animation code
  }
}, { offset: '100%'});

The 'offset' value determines at what point the animation is triggered. Here is the guide to setting up and using waypoints.

Upvotes: 2

Related Questions