Website animation with Motion, formerly Framer Motion
Good animation shows a visitor what just changed. Bad animation makes them wait. Motion makes the first kind easier to build. On some pages the right amount of animation is none.
Reviewed by: Rahul Jaiswar, founder
Skip Motion for
- A hover colour or a simple fade. CSS transitions do that with no JavaScript.
- Internal dashboards, where daily users want answers quickly.
- 3D scenes, which are Three.js work.
A long scroll story with dozens of elements on one timeline can also be easier to direct in a timeline-focused library such as GSAP.
Reach for it when you need
- A menu opening, a list reordering, a card expanding into a detail view.
- Dragging, swiping and spring-like movement.
- Restrained reveals as a visitor scrolls a marketing page.
Should your site have animation at all?
Often not, and that is a real answer rather than a modest one. If the movement would not tell a visitor that something changed, the page is better without it. Animation earns its place when a menu opens, a list reorders or a card expands into a detail view, because each of those is a change the eye needs help following. A dashboard people use all day is usually better still and quiet.
Motion in brief
Motion, previously called Framer Motion, is an animation library for React that now also works with plain JavaScript. You describe start and end states; it handles transitions, gestures, layout changes and scroll-linked effects.
Where we use it
We use it for website animation, including the animation on this site.
What we check
We check that the page respects the phone’s reduce-motion setting, so visitors who ask for less movement get a calmer version of each effect.
What makes animation slow or unwelcome
- Content that starts invisible. If the hero text begins at zero opacity and waits for JavaScript, slow connections show an empty space and the main content loads late. Render the first view visible and layer animation on after.
- Animating layout properties. Changing width, height or top forces layout work on each frame. Animate transform and opacity where possible.
Animation is built as part of our websites service.
Animation that helps visitors
Share a site whose animation you like and tell us what visitors should notice first.