Chapter 401: Common GSAP mistakes

Core Idea

With over 200,000 posts in the GSAP Forums, we've noticed some common mistakes that you'd be wise to avoid. We threw in a few tips as well.

Accuracy - The browser always reports computed values in pixels, thus it 's impossible for GSAP to discern when you use another unit like % or vw in your CSS rule. Also, computed values are in matrix() or matrix3d() which are inherently ambiguous when it comes to rotation and scale. The matrix for 0, 360, and 720 degrees are identical. A scaleX of -1 results in the same matrix as something with rotation of 180 degrees and scaleY of -1. There are infinite combinations that are identical, but when you set transform-related values with GSAP, everything is saved in a perfectly accurate way.
Performance - GSAP caches transform-related values to make things super fast. Parsing all of the components from a computed value is more expensive.
Performance - Instead of having to create them right as they're needed, you can do it ahead of time. Additionally, you need fewer instances of animations. Most of the time you'd never notice, but it's good practice.
Simplified logic - This is especially true when related to user interaction events.
Freedom - Want to pause an animation when an event happens? Do it. Want to reverse an animation when the user does something? No problem. This sort of thing is much more difficult to handle when you create animations inside of event callbacks.

const tl = gsap.timeline()
tl.to(".box", {x: 100});
tl.from(".box", {x: 100});

What it demonstrates: typical usage of Common GSAP mistakes in a GSAP animation.

Accuracy - The browser always reports computed values in pixels, thus it 's impossible for GSAP to discern when you use another unit…
Performance - GSAP caches transform-related values to make things super fast.
Performance - Instead of having to create them right as they're needed, you can do it ahead of time.
Simplified logic - This is especially true when related to user interaction events.
Freedom - Want to pause an animation when an event happens?