Important TweenMax tips and tricks

GSAP without any doubt is the most powerful animation library around. In this lesson we will learn about several TweenMax tips and tricks.

TweenMax tips and tricks

Here I am discussing about several important TweenMax tips and tricks from GSAP.

Timers [ delayedCall versus setTimeout ]

Chrome and Firefox throttle setTimeout and setInterval in inactive tabs. That’s why it’s better to use delayedCall. When you use a setTimeout or a setIntervalto call a function that contains a tween your tweens will get out of sync.

For example, call myFunction after 4.5 seconds:

And here’s how to delete the delayedCall:

Set properties

This is extremely useful when you quickly want to set a property on an element without using CSS (bye bye vendor prefixes). TweenMax.set()immediately sets the property to the element, so essentially it’s a zero-duration tween.

The following code offsets an element to x:100 and y:50 and sets its opacity to 0:

Force 3D

Safari and Chrome blur SVG, text, image tags and background images while upscaling them. To fix this bug just add force3D:false to your tween object and your graphic will remain all crisp and clean during the animation.

Note: force3D defaults to auto in TweenMax which is better for browser rendering performance so only use when necessary.

Auto alpha

autoAlpha is identical to opacity except that when the value hits 0 thevisibility property will be set to hidden in order to improve browser rendering performance and prevent clicks or interactivity on the target. Awesome for disabling buttons when they have faded out!

The following example fades out an element and sets its visibility to hiddenonce the tween has completed:

 

Animating spritesheets

You can easily use TweenMax to animate a spritesheet, so no need to include extra libraries.

Let’s say we have a div of 200px by 200px with a background image (the sprite) that is 2000px by 200px:

All we have to do is apply a stepped ease on the background position of the box:

Note that I use 9 steps (and accordingly set the background position to -1800px) because if I would have used 10 steps the last frame in the animation would be empty. I put yoyo to true which results in a loop back an forth and set repeat to -1 to make the loop infinite. The repeatDelay will make the animation pause on the first and the last frame.

Transform origin

transformOrigin sets the origin around which all transforms take place in 2D and/or 3D. By default, it is in the center of the element but you can define the values using the keywords top, left, right, or bottom, or you can use percentages (bottom right corner would be 100% 100%) or pixels.

Spin around the element on the top right corner:

Spin around a point offset from the top left by 50px, 20px:

Rotate around a point that is 200px back on its z-axis:

For transforming SVG you can also use svgOrigin, it uses the SVG’s global coordinate space instead of the element’s local coordinates which is great when you have bunch of SVGs you want to move around the center of the stage for example:

Slow motion easing

Now here’s one of my favourite eases, sloooowmoooo:

The first parameter determines the proportion of the ease during which the rate of change will be linear. So if you would put 0.6 there then 60% of the animation would be linear (the middle part), the first 20% would be easing out and the last 20% would be easing in. The second parameter determines the strength of the ease at each end.

Global time scale

We probably all heard that once. With globalTimeScale you can speed up or slow down all animations at once, yay! This doesn’t actually set the timeScale of each individual tween, but it affects the rate at which the root timeline plays.

The following code plays all animations at half speed:

And this plays all animations at double speed, turbo!

 

Hope these TweenMax tips and tricks helped you.