Chapter 4: CSS (Core Plugin)

Core Idea

GSAP can animate essentially any CSS-related property of a DOM element — transforms, opacity, colors, and most values you'd try — through camelCase property names, without a separate plugin.

Key Concepts

• camelCase naming: hyphenated CSS names convert to camelCase (font-size → fontSize, background-color → backgroundColor).
• Non-animatable properties: values with no valid "in-between" state (e.g. position, borderStyle) are snapped instantly rather than tweened — applied at the start of the tween, except display: "none" which applies at the end.
• Transform aliases: shorthand props (x, y, xPercent, yPercent, scale, rotation, rotationX/Y, skew) replace writing out a transform string, and GSAP always applies them in a fixed, predictable order (translate → scale → rotationX → rotationY → skew → rotation).
• Layout properties: too complex for a normal tween (e.g. animating between two layouts) — handled instead by the FLIP plugin, not core CSS tweening.

Code Examples

gsap.to(element, {
  backgroundColor: "red",
  fontSize: 12,
  boxShadow: "0px 0px 20px 20px red",
  borderRadius: "50% 50%",
  height: "auto", // can tween to/from "auto"
});

gsap.to(element, {
  // equivalent to transform: translate(-50%, -50%), but faster and order-safe
  xPercent: -50,
  yPercent: -50,
});

• What it demonstrates: animating arbitrary CSS properties directly, and preferring GSAP's transform shorthands over a raw transform string.

Anti-patterns

• Writing out transform strings manually: forces GSAP to apply the string, then re-parse the resulting matrix — slower and order-of-operations-sensitive versus using the built-in shorthand aliases.
• Expecting background-image (or other binary properties) to tween smoothly: there's no valid intermediate value between two images, so GSAP can't interpolate them.

Key Takeaways

1. Prefer GSAP's transform shorthands (x, scale, rotation, etc.) over hand-written transform strings for both performance and predictable ordering.
2. Non-animatable properties still work in a tween — they just snap instead of interpolate.
3. Layout-changing animation (position/size across a DOM change) belongs to the Flip plugin, not plain CSS tweening.

Connects To

• Flip plugin: for animating layout changes that a normal CSS tween can't handle.
• Attributes (Core Plugin): the equivalent mechanism for non-CSS DOM/SVG attributes.