Jump to content
GreenSock

Sopstance

Buttons - onclick reverse set(A) animation, oncomplete load set(B) animation

Go to solution Solved by Carl,

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

Hi,

 

I am creating a single page website with different sections button. Each section will contain their own set of animation.

 

By default when user first visit the webpage it will load the set A animation.

Let say if I am on set A section and I click on set C button, it should reverse the set A animation (onCompleteReverse) and play set B animation. Can anyone guide me how to do it? 

 

Thanks!

 

 

 

See the Pen rLBXNM by Sopstance (@Sopstance) on CodePen

Link to comment
Share on other sites

  • Solution

Hi and welcome to the GreenSock forums,

 

Great question and thanks for the demo.

 

I had something similar sitting around so I edited it to hopefully match your needs.

 

the basic idea is that you keep track of a currentAnimation timeline. When you request a new "slide" reverse() the currentAnimation and also give it an onReverseComplete callback that will trigger the next animation. There are more object-oriented ways of setting this up, but I think this a more basic / straight-forward way to illustrate it.

 

var red = new TimelineLite({}); //plays automatically on load
red.staggerTo("#redSlide .box", 1, {x:300}, 0.3);

var blue = new TimelineLite({paused:true});
blue.staggerTo("#blueSlide .box", 1, {x:-300}, 0.3);

var currentAnimation = red;
var nextAnimation;

function animateIn(animation) {
    //only do stuff if requested animation is different than active slide
    if(animation != currentAnimation) {
      currentAnimation.reverse().timeScale(3);//faster speed
      currentAnimation.eventCallback("onReverseComplete", playNext)
      nextAnimation = animation;
    }
}

function playNext(){
  nextAnimation.play().timeScale(1);
  currentAnimation = nextAnimation; 
}


$("#redSlideIn").click(function() {
  animateIn(red);
  
})

$("#blueSlideIn").click(function() {
  animateIn(blue);
})

demo: http://codepen.io/GreenSock/pen/yJLyxM?editors=0010

 

its a little easier if you don't have to wait for one to reverse before playing the other, but I think this is what you wanted.

  • Like 2
Link to comment
Share on other sites

Awesome!! Thanks Carl for the great demo.  8-)

Link to comment
Share on other sites

Hey Carl..

 

Would you able to provide me an alternative method? Instead of playing the reverse() animation and play the next animation, I am thinking of create a different set of animation (exit) each for exiting before it play the target animation (starting). Thanks

Link to comment
Share on other sites

With that sort of flexibility the object-oriented method I alluded to earlier would probably help. 

Using the demo I provided i would suggest that instead of making animations for enter and exit in advance (when your app loads) you create the animations "on the fly" when they are requested. 

 

the reason for this is that if the blue animation is playing forward its really easy just to reverse it from where it is, but if you have a custom animateOut animation that is pre-made you really can't smoothly jump to a point in time where everything is going to smoothly line up.

 

it also gets more complicated if your animateOut animation moves things to different positions than where they are in the beginning of the animateIn timeline, so you may have to reset a bunch of properties each time you bring something in after it has been brought out.

 

Again, generating timelines "on the fly" solves these issues. 

 

So in the example I provided, instead of telling timelines to play and reverse you call functions that create the right timeline for you. 

 

If you want to jump into the object-oriented approach take a look here: http://greensock.com/forums/topic/11162-how-to-setup-control-of-tweens-and-timelines-together-and-separately/#entry44994  the video should be a big help.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×