Website animation example
Building a website? Try filtering an animated list and switching to less movement.
Try a small interaction.
A place to start
Draft review
A little preparation
Interview practice
Before you send it
Offer reply
Movement is reduced. Feedback still works.
A demonstration only; this does not change your library. Your device’s reduced-motion setting always applies.
How to try this example
Watch what changes
Filter the list, save an item in this local demonstration, and try a second action before the first movement finishes. The effect explains cards changing position; the result and controls remain visible without movement. The demonstration does not change your download library.
Compare less movement
The reduced-motion control can request less movement. It does not force movement on when your operating system requests reduction. Try keyboard navigation and the same rapid filtering sequence in both modes.
Use it as a reference, not a certification
This is an original browser-animation example. It is not Motion+ content, a performance benchmark, or an accessibility certification. Your own implementation needs testing with its actual state, layout, and input paths.
Free to use. No account needed.