Framer Motion (Motion for React)
Ready-made code for animating web pages built with React, like transitions and moving sections.
What is Framer Motion, and what do animations actually do on a website?
Framer Motion is an animation library for React. Its current documentation presents it as Motion for React, "previously Framer Motion," and it now installs under the package name motion, though many projects still use the earlier name, framer-motion.
It is used to make elements animate in as you scroll, change state smoothly, or move as you go from one page to another, with fine control over how long each movement takes and its easing curve.
Why it matters to your business
Movement used well draws the eye to what matters and makes a site feel alive and cared for. Used poorly, it makes people dizzy or slows the page down on modest phones. The practical rule is that every animation needs a purpose, and it has to respect anyone who asked their device for less motion.
How we use this at Damorus
This site uses framer-motion 11, among other things, for the loading screen that opens like a blind being raised, and for the mobile navigation pill that shrinks as you scroll. In URG Technology we also use framer-motion 11, and there the more demanding animations pause once they scroll off-screen to ease the load on the phone's processor. In both cases the movement respects the device's reduced-motion setting.
Sources
Need this on your project?
I want my free mockup →