CODEWITHSUNDEEP
jqueryhtmlcssanimationtransition
dev_dev
dev_dev

Reputation: 181

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

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:

TOOLS:

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

Thanks!

Upvotes: 3

Views: 4963

Answers (2)

MentholBonbon
MentholBonbon

Reputation: 755

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

Upvotes: 2

Karl-André Gagnon
Karl-André Gagnon

Reputation: 33870

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!

Upvotes: 1

Related Questions