Skip to content
Knsept
Free playbook

Front-end motion craft

Interfaces that feel alive without getting in the way. Principles first, then copy-paste components.

IntermediateLevel
4Sections
9Lessons
5Checks
~15 minTotal time
Start the module
By the end you’ll be able to
  • Know when motion helps and when it hurts
  • Build scroll-driven effects with plain CSS
  • Ship interactive widgets that work with mouse, touch and reduced motion
Curriculum
  1. 1PrinciplesDefaults, timing, and respecting user preferences.4 items
    ? Check your understanding
    Check 1Which properties are cheapest to animate?
    Check 2What should happen under prefers-reduced-motion?
  2. 2Scroll and revealTie animation to scroll position with no JavaScript.3 items
    ? Check your understanding
    Check 1Which CSS function maps an animation to the page’s scroll position?
  3. 3Cursor and touchPointer-reactive components that work on every device.4 items
    ? Check your understanding
    Check 1On a touch screen, how should a magnetic button respond?
  4. 4FeedbackSmall confirmations that make actions feel finished.3 items
    ? Check your understanding
    Check 1Why set toast text with textContent instead of innerHTML?