Skip to content
Motif
All tracks

Track 4

Motion & micro-interactions

Motion principles translated to the web: timing, easing, choreography, and feedback.

  1. Lesson 1:
    Beginner9 min

    Motion principles

    Borrowed from classic animation: timing, anticipation, follow-through, and staging turn a mechanical move into one that reads as intentional.

  2. Lesson 2:
    Beginner8 min

    Anatomy of a micro-interaction

    Every small feedback moment has four parts — trigger, rules, feedback, and loops. Name them and you can design any of them on purpose.

  3. Lesson 3:
    Intermediate9 min

    Easing & spring

    Easing scripts a move over a fixed time; a spring simulates physics and settles on its own. Knowing which to reach for is half of good motion.

  4. Lesson 4:
    Beginner8 min

    Jelly button: squash & stretch on press

    Make a control feel physical: it squashes when pressed and springs back with a wobble.

  5. Lesson 5:
    Beginner8 min

    Tap & gesture feedback

    Touch interfaces lack physical clicks, so a tap needs visible feedback — a ripple and a small press — to confirm the surface felt you.

  6. Lesson 6:
    Beginner8 min

    Loading & skeleton states

    A skeleton that mirrors the real layout makes waiting feel shorter and prevents the layout jump a spinner can't.

  7. Lesson 7:
    Beginner8 min

    Toast / notification motion

    A toast should arrive with a spring and leave with a quiet ease — and announce itself to screen readers without stealing focus.

  8. Lesson 8:
    Intermediate9 min

    Scroll-driven reveals

    Let content fade and rise into place as it enters the viewport — an enhancement that must never hide content when JavaScript doesn't run.