0

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.

S Biswas
  • 7
  • 5
  • could you show your code? which element `img` or `iframe` – prasanth Jan 19 '17 at 08:29
  • I am using my code on
    elements. I didn't insert the code because it's pretty long and most of it isn't related to my question. However, I have a section after my slider where I want the animation to happen. The animation works just fine but I want the animation to occur when a user scroll down to that area. //the editor says the code is too long to post in this box, sorry. I hope I was able to demonstrate the situation.
     – S Biswas Jan 19 '17 at 08:38
  • You should listen to the scroll event to get the position everytime user scroll the mouse. If the position is inside the range of your element, add the class you want to this element. Can check this https://michalsnik.github.io/aos/ – trungk18 Jan 19 '17 at 09:14
  • thought of that but the distance is not same in all devices, so have to find another way to target that specific div somehow. – S Biswas Jan 19 '17 at 09:23

4 Answers4

1

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>
user1967509
  • 43
  • 5
0

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'); });`
Nathan Meunier
  • 131
  • 1
  • 9
  • thanks but not very helpful. can you be more specific? – S Biswas Jan 19 '17 at 08:39
  • You don't show us some code, it's pretty hard to be more specific. But by example, if you want an animation when you click on a button, you can do $( "#target" ).click(function() { // then here you have your animation with $('#yourElement').animateCss('bounce'); }); – Nathan Meunier Jan 19 '17 at 08:45
  • `

    Web Development
    ` I am using on a few of my elements     – S Biswas Jan 19 '17 at 09:15
  • Ok but what you want ? – Nathan Meunier Jan 19 '17 at 09:50
  • I am using 9 more
    s like this and those elements are a bit down at the page. The animation happens when the page is loaded not when user scroll down to that place. I want the animation to happen exactly when that particular area is visible, thats the problem i dont know how to do that.
     – S Biswas Jan 19 '17 at 09:56
  • Ok so use this anwser: http://stackoverflow.com/questions/21561480/trigger-event-when-user-scroll-to-specific-element-with-jquery and adapt it with what I post. Then it's will be good :) – Nathan Meunier Jan 19 '17 at 09:58
0

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)

Gy L
  • 1
  • i think "Nathan Meunier" 's idea add animation class is better,you can add a attribute like am="jump" on target element , then use js to decide webpage scroll in place , remove class and add class jump , so it will animate when scroll in place – Gy L Jan 19 '17 at 08:38
-1

new WOW().init();

and call class class="wow bounceInUp"

Milan Nakrani
  • 34
  • 2