Jump to content
Search Community

Concatenating animations?

derp test
Moderator Tag

Go to solution Solved by Diaco,

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

Hey!

 

I have an animation which executes a function that plays a tween on complete. 

onComplete: function(){ beatIt(); }

While playing the animation fires this function, reversing the animation doesn't. 

 

The whole point of the 'beatit' function is to start a sub animation.

 

I've also tried the below. It didnt work. I've put a timeout on it also, it didnt work.

function beatIt(){
 if ( Anim.progress() == '1' ) {
  heartbeat.stop();
  console.log( 'stop' );
 } else {
  heartbeat.play();
  console.log( 'start' );
 }
}

Is there a better way to programmatically start and stop animations? 

var Anim = new TimelineMax( { paused: true } ).add( beatIt )

The above also works forward, but it wont reverse the animation.

 

Any code samples or suggestions on what I should look for in the docs would be a great help.

 

Thanks!

 

 

Link to comment
Share on other sites

  • Solution

Hi derp :)

 

if i understood correctly , you can use onReverseComplete event callback , like this:

 

TweenMax.to(div,1,{x:200,
onComplete:function(){console.log('playComplete')},
onReverseComplete:function(){console.log('reverseComplete')},
});

pls check the .eventCallback() Doc. : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/

  • Like 1
Link to comment
Share on other sites

 

Hi derp  :)

 

if i understood correctly , you can use onReverseComplete event callback , like this:

 

TweenMax.to(div,1,{x:200,
onComplete:function(){console.log('playComplete')},
onReverseComplete:function(){console.log('reverseComplete')},
});

pls check the .eventCallback() Doc. : http://greensock.com/docs/#/HTML5/GSAP/TweenLite/eventCallback/

 

 

That is exactly what I need. I'm passing a parameter into the same function now for play/stop.

 

Thanks for the help, much appreciated!! 

Link to comment
Share on other sites

in addition to what Diaco said, if you want a function to be called regardless of whether your animation is playing forward or in reverse you can also add callbacks to a timeline like

var tl = new TimelineLite();

tl.to(div,1,{x:200})
 .call(beatIt)
 .to(div,1,{x:400})
 .call(beatIt)

function beatIt(){
 //do something
}
  • Like 3
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.
×
×
  • Create New...