TweenMax tips and tricks

In addition to Florian’s excellent GSAP cheatlist here are some other GSAP tips and tricks that will boost your workflow. I’ve been using TweenMax for over a decade and as an online motion designer I find GSAP without doubt the most powerful animation library around.

Force 3D

Webkit blurs

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.

TweenMax.to("#element", 8, {scale:3, force3D:false});

Left: force3D set to false — Right: force3D set to auto (note the aliased edges on the circle)

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 setInterval to call a function that contains a tween your tweens will get out of sync.

For example, call myFunction after 4.5 seconds:

TweenMax.delayedCall(4.5, myFunction);

And here’s how to delete the delayedCall:

TweenMax.killTweensOf(myFunction);

Left: the right circle tween is called in a delayedCall and keeping sync in an inactive browser tab— Right: the right circle tween is called in a setTimeout and getting out of sync in an inactive browser tab

Moving elements

x / y versus left / top

For ultra smooth animations I use x/y instead of left/top in TweenMax. X and y are the equivalents of translateX and translateY in CSS which is much more performant than animating left/top .

If you want to read more on this matter check out Paul Irish’s post Why Moving Elements With Translate() Is Better Than Pos:abs Top/left

Example of an element animating to x:80 and y:50 in 2 seconds:

TweenMax.to("#element", 2, {x:80, y:50, ease:Sine.easeInOut});

Left: element moving on the x property — Right: element moving on the left property

Set properties

Bye bye vendor prefixes

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:

TweenMax.set(#element, {x:100, y:50, opacity:0});

Animating spritesheets

Stepped easing

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:

#box {
  width: 200px;
  height: 200px;
  background: url(sprite.png);
  background-repeat: no-repeat;
  position: absolute;
}

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

TweenMax.to("#box", .5, {backgroundPosition:"-1800px 0px", ease:SteppedEase.config(9), yoyo:true, repeat:-1, repeatDelay:1})

The result:

A spritesheet animated with TweenMax.

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:

TweenMax.to(#element, 2, {rotation:360, transformOrigin: "right top"});

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

TweenMax.to(#element, 2, {rotation:270, transformOrigin:"50px 20px"});

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

TweenMax.to(#element, 2, {rotationY:360, transformOrigin:"50% 50% -200px"});

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:

TweenMax.to(#svgElement, 1, {rotation:270, svgOrigin:"250 100"});

Slow motion easing

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

TweenMax.to("#element", 2, {x:220, ease:new SlowMo(0.5, 0.8), yoyo:true, repeat:-1});

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.

A slow motion ease.

Global time scale

I really like the animation but can you just speed it up a little?

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:

TweenMax.globalTimeScale(0.5); 

And this plays all animations at double speed, turbo!

TweenMax.globalTimeScale(2);

Auto alpha

autoAlpha is identical to opacity except that when the value hits 0 the visibility 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 hidden once the tween has completed:

TweenMax.to(#element, 2, {autoAlpha:0});

I hope you enjoyed this read, and in the meantime keep on tweening!