Five Framer Motion Patterns I Use on Every Project
Scroll-triggered reveals, staggered lists, layout animations, shared element transitions, and the one hook that ties them all together.
Good motion design is invisible — users feel it rather than notice it. Here are five patterns that consistently improve the perceived quality of the interfaces I build.
1. Scroll-Triggered Reveal
The whileInView prop combined with viewport={{ once: true }} gives you a one-shot entrance animation that fires when the element enters the viewport. Pair it with a short initial={{ opacity: 0, y: 24 }} for a gentle fade-up.
2. Staggered Lists
Wrap list items in a parent motion.ul with variants that use staggerChildren. Each child inherits the parent's animation state automatically — no index math needed.
3. Layout Animations
Adding a layout prop to a motion.div tells Framer to automatically animate between layout changes. Filters, tabs, and sortable lists look polished with zero effort.
4. Shared Element Transitions
The layoutId prop lets two components in different parts of the tree appear to be the same element. Perfect for expanding cards or hero → detail transitions.
5. useReducedMotion
Always wrap your animation values with useReducedMotion() to respect the OS-level "Reduce Motion" preference. Accessibility isn't optional.