Chapter 3: Attributes (Core Plugin)

Core Idea

GSAP can tween any numeric HTML/SVG attribute (not just CSS) through the attr property, automatically included in core with no registerPlugin() call needed.

Key Concepts

• attr: {}: object of attribute names to tween (e.g. an SVG x, y, width, height).
• Suffix preservation: GSAP keeps a value's original unit (e.g. %) when tweening an attribute — but it cannot convert between units (px ↔ %).
• Attribute vs. CSS x: a plain x property tweens the CSS transform; x nested inside attr: {} tweens the element's underlying x coordinate attribute instead — the two are unrelated.

Code Examples

gsap.to("#rect", {
  duration: 1,
  attr: { x: 100, y: 50, width: 100, height: 100 },
  ease: "none",
  x: 200, // this animates the CSS translateX() transform, not the attribute
});

• What it demonstrates: tweening several SVG attributes at once while separately animating a CSS transform on the same call.

Anti-patterns

• Mixing CSS-related properties into attr: {}: GSAP handles CSS through its own internal system; putting CSS-affecting values inside attr bypasses that and produces incorrect results.

Key Takeaways

1. attr is for the DOM/SVG attribute itself, not the visual CSS transform — they can coexist on the same tween with the same property name.
2. No unit conversion happens inside attr tweens (e.g. can't go from px to %).

Connects To

• CSS (Core Plugin): the CSS-transform counterpart to attribute tweening.