Framer Motion React animation
Declarative animations for React components.
Framer Motion is the animation library we use within React components for page transitions, scroll-in fades, hover micro-interactions, and gesture-driven UI. It's declarative and component-aware, which means animations live alongside the components they animate rather than in separate animation scripts. This makes the codebase cleaner and changes safer.
Why we use Framer Motion
- Declarative API. Animations are described as props on components, not orchestrated separately.
- Built specifically for React. It works naturally with component state, mounting, and unmounting.
- Powerful gesture support for tap, drag, and hover interactions without extra libraries.
- AnimatePresence enables smooth enter/exit animations when components mount and unmount.
What this means for your business
A site without thoughtful micro-interactions feels static. A site with too much animation feels exhausting. Framer Motion is the tool that lets us place animation precisely where it serves the visitor, whether that is a card fading in as it scrolls into view, a button responding to hover, or a page transition that feels considered rather than abrupt. The animations you don't consciously notice are the ones doing the most work.