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

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.

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

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.

 

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

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

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

Awesome!! Thanks Carl for the great demo. 

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

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