Search code examples
javascriptgsap

Changing TweenMax Speed on effects


I am pretty new to GSAP. The following works great and changes between background images, but not sure how to speed it up so it's a little faster.

JavaScript:

var avatarAni = new TimelineMax({ paused: true, repeat: -1 });

    avatarAni.to(avatars, animDuration, {
        scaleX: 1.1,
        scaleY: 1.1,
        ease: Power3.easeIn,
        onComplete: onCompleteScaleIn
    });

    avatarAni.to(avatars, animDuration, {
        scaleX: 1.0,
        scaleY: 1.0,
        ease: Power3.easeOut
    });

    avatarAni.play();

Solution

  • animDuration is the variable you can play with. Decrease its value a little bit and both of your .to() tweens will go faster.

    Otherwise, if you do not want to change individual tween values, you can use the .timeScale() property of a TimelineMax instance and it would speed up the avatarAni timeline itself. So you could do this:

    ...
    avatarAni.timeScale(2);
    avatarAni.play();
    

    The documentation says:

    Factor that's used to scale time in the animation where 1 = normal speed (the default), 0.5 = half speed, 2 = double speed, etc.