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();
}

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!