How to make a greensock animation reverse but faster than original animation?

Question

I have an animation that i am using Greensock for. When this animation is complete and when the user clicks on a button the animation will play in reverse. The issue i have is that i want the animation to play in reverse 3 times faster than when it was originally played. I am stumped on how to do this.

The current code i have works fine, i just need it to animate in reverse faster. Any help is greatly appreciated, thank you. Current code:

var tl = new TimelineMax();
var page4 = function(){
    console.log('hello');
    tl.staggerFrom("input", 0.5, {
      marginLeft:"-300px", 
      opacity:0, 
      delay:0.5, 
      force3D:true
    }, 0.2);
    tl.staggerFrom("label", 0.5, {
      opacity:0
    }, 0.2);
    tl.staggerFrom("#submit", 0.5, {
      opacity:0
    }, 0.2);
  };

$('#submit').on('click', function(e){
   e.preventDefault();
   tl.reverse();
   setTimeout(function(){ 
     contact();
   }, 3000 );
 });

function contact(){
   var msg = '<p>Thank you for your submission! Please give us 1 business day to reply back.</p>';
  $('.title').append(msg).fadeIn();
}

Extortionate

Answer 1

It should be as simple as setting the timeScale() to 3 (meaning it'll play 3x faster than normal):

tl.timeScale(3);

And remember, you can chain things, so you could reverse() it at the same time:

tl.reverse().timeScale(3);

And then when you need to go forward again:

tl.play().timeScale(1);

It's all in the docs: http://greensock.com/docs/#/HTML5/GSAP/

I also noticed that you're using a setTimeout() to call contact() after 3 seconds. That's fine, but if you want to have it called as soon as the timeline finishes (in either direction), you can set onComplete:contact and onReverseComplete:contact. Or there's also a TweenLite.delayedCall() that'll act much like setTimeout() but always remain perfectly synchronized with the whole GSAP engine and likely be more performant.

Happy tweening!

Leucippus

You are awesome! That was exactly what i was looking for and i appreciate the extra tips:) – Extortionate

The reverse of the animation only happens on a click event from when you click on the submit button after the animation is done loading in. Once you click the submit button the form is removed using the reverse animation and then the contact() method is called. How would i attach a callback event on only the reverse animation call? – Extortionate

Apparently there is a onReverseComplete:function method. This is exactly what i was looking for. – Extortionate

Yep, you got it exactly right. onReverseComplete is what you need. Have fun! – Leucippus