Skip to content
Motif
All tracks

Track 5

Web animation engines

CSS, View Transitions, Motion, GSAP, Lottie, and Rive — and how to choose between them.

  1. Lesson 1:
    Beginner15 min

    CSS transitions & keyframes

    The two native CSS animation primitives: transitions interpolate a state change, keyframes choreograph a named multi-step sequence. Learn when each one fits.

  2. Lesson 2:
    Intermediate16 min

    The View Transitions API

    The View Transitions API animates between two DOM states — including a shared element that morphs across a navigation — with the browser doing the work.

  3. Lesson 3:
    Intermediate14 min

    Choosing an animation tool

    CSS, View Transitions, Motion, GSAP, Lottie, Rive — six engines for different jobs. A guide to matching the tool to the animation, starting from boring.

  4. Lesson 4:
    Intermediate12 min

    The Web Animations API

    element.animate() runs keyframe animations from JavaScript on the compositor — with play, pause, reverse, and a finished promise CSS can't give you.