Learn motion terms through interactive animation

A replayable GSAP lab for the concepts in the animations.dev vocabulary. Pick a term, watch the stage change, then adjust speed to feel how motion changes perception.

Original source animations.dev vocabulary Open the reference page behind this glossary.

Each term gets a small GSAP scene. The point is not to memorize definitions, but to see how motion moves, pauses, transforms, and responds.

Fade in / Fade out

An element appears or disappears through opacity, useful for quiet entrances and exits.

Watch for

Notice whether opacity makes the element arrive gently instead of popping in abruptly.

GSAP tip

Use autoAlpha to handle both opacity and visibility.

Use cases

Modals, hints, list item entrances, and progressive page reveals.

Terms are adapted from the animations.dev Animation Vocabulary page. Original reference. This is a standalone local HTML demo that can be opened directly or viewed through the project dev server.