Handles the small movements: a menu opening, a card lifting slightly under the cursor, a switch between two views.
Everything snaps hard. You feel every switch, unpleasantly.
Transitions feel like a movement, not a switch.
- You describe the goal, not the path
You state how something should look — the way there is calculated.
- Leaving is animated too
Normally an element is simply gone. Here going away gets a movement as well.
- Springs instead of fixed durations
Motion following spring physics feels closer to real objects than a fixed run time.
- It ships to the browser
It's extra code that gets loaded. For a single fade-in a line of CSS is usually enough.
- State changes
- Framer Motion calculates
- Smooth transition
- New state
The jump between two states becomes movement. That isn't decoration: a card that unfolds instead of appearing is easier to follow.
A motion library for React. You describe the target state, not the path — the library works out the transition. Its speciality is movement where an element travels from one position to the next, even when the layout changes in between.
- Built for
- React
- Principle
- target state, not sequence
- Speciality
- position changes
- Feel
- springs, not fixed durations
Dropdown menus whose items appear one after another
Cards that lift slightly under the cursor
Step-by-step flows without a hard jump
It moves individual blocks well, but not long sequences across a whole page. GSAP is the right tool for that — using both side by side is normal.
The dropdown at the top and the cards under your cursor — both run on it.