How to trigger animation after user scroll to N points - jQuery waypoints with multiple animation .animate()

Question

I need your help!

Basic idea: I want when user scroll to one point (in the middle of the pages - let say it's 500px from top) then we have some animation, of course I won't ask how to do all the animation stuff, but I will need you to give me the basic idea about the callback

Callbacks that I mean: after 1st animation, we get 2nd animation, then 3rd animation. How I approach this?

SCENARIO:

Let say we have 4 boxes, and they have color red, blue, orange and pink.
After user scrolled to 500px from top - I want first red box fadein
2 seconds from that, I want the red box fadeOut, and blue box will fadein.
in my original idea, I will need them to rotate or some other animation - if you could do this too it will be great :) , please ignore this point if you think I'm asking too much

TOOLS:

jQuery waypoints http://imakewebthings.com/jquery-waypoints/

maybe jQuery transit ? http://ricostacruz.com/jquery.transit/

 <!DOCTYPE html>
 <html>
 <head>
  <title></title>
  <meta charset="utf-8">
 </head>
 <body>


  <div id="container">
    <div class="red box"></div>
    <div class="blue box"></div>
    <div class="orange box"></div>
    <div class="pink box"></div>
  </div>
 </body>
 </html>

+1 for the right solutions, as I always appreciate all solutions, I will vote it up if it's works :)

Thanks!

MentholBonbon · Accepted Answer · 2013-05-02T18:33:29.173

I am using jQuery waypoints.

This will be triggered when the element in question is completely visible, meaning that it's bottom is above the bottom of the viewport:

$('.red_box').waypoint(function(direction){
  $('.red_box').fadeIn();
  window.setTimeout(animateBlue, 2000);
},{offset: 'bottom-in-view'});

The animation begins and during the animation the timer kicks off that will call the specified function after two seconds.

function animateBlue(){
  $('.red_box').fadeOut(function(){
    $('.blue_box').fadeIn();
  });
  window.setTimeout(animatePink, 2000);      
}

function animatePink(){
  $('.blue_box').fadeOut(function(){
    $('.pink_box').fadeIn();
  });
}

The red box fades out and when the animation is complete the blue box fades in.

For further animations you can either use more waypoints or use another call after a certain time. For help on the api of the fade-functions see
http://api.jquery.com/category/effects/fading/
(you probably know that)

Of course you can tweak with the timings and when the animations kick off.
I was not sure whether you wanted the two seconds to start after the animation completed or not. And I also was not sure if red and blue should fade out and in simultaneously.

For Rotation :
http://javascriptisawesome.blogspot.de/2011/09/jquery-css-rotate-and-animate-rotation.html

No, the red should fade out first, then blue fadein. So your code for animateBlue() seems right, could you help me give some example, how if there is another function, let say it's function animatePink(). I still don't understand where to place it :) — Budi Tanrim, May 02 '13 at 15:27
If you just want the pink one to appear after 2 seconds again: I have added some code that will do that. For another waypoint just use the code above. — MentholBonbon, May 02 '13 at 15:34

score 1 · Answer 2 · answered May 02 '13 at 14:56

1

Basicly, what you want to do is that :

$('#el1').fadeIn(500,function(){
    $('#el1').delay(2000).fadeOut(500,function(){
        $('#el2').fadeIn(500)
    })
})

When 1 animation is done, it call another one!

answered May 02 '13 at 14:56

Karl-André Gagnon

33,662
5
50
75

how to call another one? so far I always find article or example to make a callback once. Could I simply add some ,function(){} again inside it? IS it okay for the best practices? Thanks – Budi Tanrim May 02 '13 at 15:00
2

You can try using jquery promises - its basically set up for chaining functions and avoids function inception inside a callback. [The first answer here is a good example](http://stackoverflow.com/questions/10370298/how-do-i-animate-in-jquery-without-stacking-callbacks) – andymacd May 02 '13 at 15:03
Yes, that's right. andymacd comment would make it cleaner and optimal. – Karl-André Gagnon May 02 '13 at 15:09
Okay great! I'm totally newbie on jQuery, Should I copy paste this before doing it? $.chain = function() { var promise = $.Deferred().resolve().promise(); jQuery.each( arguments, function() { promise = promise.pipe( this ); }); return promise; }; – Budi Tanrim May 02 '13 at 15:19
It is hard to understand your code since its not formated, but here a working fiddle of promise : http://jsfiddle.net/J9ESe/ – Karl-André Gagnon May 02 '13 at 15:36
ok will try to implement it first, will let all you know after I finished :) Thanks! – Budi Tanrim May 02 '13 at 16:59

How to trigger animation after user scroll to N points - jQuery waypoints with multiple animation .animate()

2 Answers2