60fps

Browse app motion examples by interaction pattern to study timing, feedback, and transitions before prototyping.

Visit 60fps official site

Overview

60fps collects motion examples from mobile and web interfaces. It lets you browse shots and apps, with filters for patterns such as loading, onboarding, buttons, and transitions.

Why it is here

Watch one interaction more than once: note what triggers it, which element changes first, and when the interface is ready for the next action. This turns a striking animation into a question about feedback and continuity. A clip shows behaviour, but it does not reveal the implementation, performance, or reduced-motion treatment behind it.

Good fit for

Product designers and frontend developers choosing how motion should clarify a flow. For static game screen references, start with Game UI Database or Interface In Game.

Try it when

  • Compare a few examples of the same pattern before deciding whether motion adds useful feedback.
  • Sketch a short storyboard with trigger, transition, and end state before building it.
  • Test the result for responsiveness and provide a reduced-motion path; a reference clip alone cannot validate either.

Animate.css

Animate.css is a collection of ready-to-apply CSS animation classes.

  • animation
  • ui

Motion

Anime.js

Anime.js provides a JavaScript animation API.

  • animation
  • ui

Motion

AutoAnimate

AutoAnimate adds transitions when interface elements change.

  • animation
  • ui

Motion