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

[Sopstance]

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

[Carl]

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.

[Sopstance]

Awesome!! Thanks Carl for the great demo. 

[Sopstance]

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

[Carl]

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.

[Sopstance]

Hi, 

I have a button in the iframe where it will trigger the some animation at the parent window, but im not sure why its not responding to clicked. 

 

<div id="redSlideAuto" onclick="parent.autoIn(redSlide);"></div>

<div id="blueSlideAuto" onclick="parent.autoIn(blueSlide);"></div>

 

 

On 5/27/2016 at 11:29 PM, Carl said:

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: 

See the Pen yJLyxM?editors=0010 by GreenSock (@GreenSock) on CodePen

 

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.

 

[Cassie]

I don't know much about that but maybe this link will help?

https://stackoverflow.com/questions/12967616/trigger-custom-event-from-iframe-to-parent-document

[Sopstance]

1 hour ago, Cassie said:

I don't know much about that but maybe this link will help?

https://stackoverflow.com/questions/12967616/trigger-custom-event-from-iframe-to-parent-document

Hi Cassie, Thanks for sharing the post. Unfortunately am noob at understanding coding thus not sure how to implement on my current situation.

[Rodrigo]

Hi,

 

Unfortunately working with iframes in these ways can be a bit of a challenge and is beyond the help we can provide in these free forums. We aim to keep things around here focused on GSAP related stuff.

 

I'd recommend you to look for resources in Stackoverflow and Youtube (https://www.youtube.com/results?search_query=call+method+from+iframe) for more information about it.

 

Good luck with your project.

Happy Tweening!