The Framer animation library is the built-in collection of motion primitives, transitions, and effects you can apply directly inside the canvas without writing code. It includes scroll effects, hover states, page transitions, layered timelines, and the new Magic Motion engine that interpolates between layouts. For complex motion, Framer also exposes the underlying Framer Motion library used by React developers worldwide.
What “Framer Animation Library” Actually Means
The phrase covers two related things that often get confused. First, the visual animation tools inside the Framer canvas: scroll effects, hover effects, transitions, and the Effects panel. These are click-and-tweak controls aimed at designers. Second, Framer Motion, the open-source React animation library that the Framer team builds and maintains. Framer Motion powers the canvas animations under the hood, and developers use it directly when building React apps outside Framer.
For most people building sites in 2026, “Framer animation library” means the canvas tools. You drag a component into a frame, open the Effects panel, and stack animations. No code. The result is the same kind of motion that used to require a Lottie file, a custom React component, or a GreenSock subscription. For more on motion patterns, see Framer animations: the complete guide.
The categories of motion in the canvas library
Inside Framer, motion is organized into a few buckets you will use over and over:
- Appear effects: how an element animates in when it loads or scrolls into view (fade, slide, scale, blur)
- Hover effects: how an element responds to a cursor (lift, glow, change color, scale)
- Press effects: how an element responds to a click or tap
- Page transitions: how the page itself transitions when navigating between routes
- Scroll effects: how elements behave during scroll (parallax, sticky, scroll-linked progress)
- Magic Motion: automatic interpolation between two states or layouts
- Variants: defined states with their own motion configurations (default, hover, active)
Each is configurable in the Effects panel: duration, easing curve, delay, stagger, and a handful of more advanced controls.
The Animation Categories You Will Actually Use
Framer’s animation library is deep, but most production sites use the same handful of moves. Here is what they are and when each one earns its weight.
1. Fade-in on scroll
The single most-used motion on Framer sites. As an element scrolls into view, it fades from 0 to 100% opacity, usually with a subtle vertical translate. Tasteful, accessible, and almost always appropriate. Set the duration to 600-800ms and the easing to a soft ease-out curve.
2. Stagger reveals
For lists, grids, and feature blocks. Each item animates in with a small offset (60-100ms) so the group reads as a wave rather than all-at-once. Use it sparingly: stagger on every section becomes nausea-inducing.
3. Parallax on hero images
The hero image moves at a slower rate than the foreground content, creating depth. In Framer, this is a scroll effect with a translate-Y multiplier under 1.0. Watch the performance budget on heavy hero images.
4. Sticky scroll sections
The section pins in place while content scrolls past it (think Apple product pages). Useful for product walkthroughs and feature deep-dives. In Framer, you set position to sticky and define the scroll range. Keep these sections short to avoid feeling like a slog.
5. Hover lift on cards
Card scales to 1.02 and gains a subtle shadow on hover. The mainstay of feature grids and pricing tables. Spring physics rather than ease-out feels more responsive.
6. Magic Motion between layouts
The Framer-specific superpower. Define two component variants with different layouts, and Magic Motion interpolates between them automatically. Used for tabs, accordions, image galleries, and animated icon transitions.
7. Scroll-linked progress indicators
A line, dot, or progress bar that fills as the user scrolls. Common on long-form articles. Framer ships a built-in component you can drop in.
8. Scroll-triggered counters
Numbers that animate from 0 to a target value as they enter view. Used heavily on stats sections (revenue, users, ratings). Look for components in the marketplace that handle this without code.
9. Marquee and infinite carousels
The horizontally scrolling logo bar or testimonial wall. Framer’s marquee component handles speed, direction, and pause-on-hover natively.
10. Page transitions
How the page transitions when you navigate. Subtle is almost always better. A 300ms cross-fade is enough to communicate continuity without making navigation feel slow. Reserve dramatic transitions for marketing sites where the transition itself is the point.
Framer Motion (The React Library)
If you are building a React app instead of a Framer site, Framer Motion is the same animation engine exposed as an npm package. Install it with `npm install framer-motion` and you get the same APIs the Framer canvas uses internally: motion components, animate prop, AnimatePresence for exit animations, layout animations, gestures, and scroll-linked values.
You do not need Framer Motion to use the Framer canvas. You only need it if you are coding a React app outside of Framer. For developers, Framer Motion is one of the strongest animation libraries available, with the trade-off of a slightly larger bundle than alternatives like CSS transitions or smaller libraries.
Common Framer Motion patterns
- Mount animations: components that animate in on first render
- Exit animations: components that animate out before unmount (via AnimatePresence)
- Layout animations: automatic FLIP-style animations when layout changes
- Gestures: drag, hover, and tap with built-in physics
- Scroll-linked values: useScroll hook with transforms tied to scroll position
Performance: When Animations Hurt Your Site
Animations are deceptively expensive. The animation library makes them easy to add, which makes them easy to overuse. Here is what to watch:
Watch your number of animated elements
Animating 50 elements simultaneously is not free. Browsers handle 10-15 concurrent animations smoothly; beyond that, frame rate drops on lower-end devices. If a section has more than 20 staggered items, consider animating in groups.
Stick to transform and opacity
The cheap-to-animate properties are transform (translate, scale, rotate) and opacity. Animating top, left, height, or width forces the browser to recalculate layout on every frame. Most of Framer’s built-in animations stick to the cheap properties; just verify if you build custom code.
Respect prefers-reduced-motion
Some users have motion sickness or vestibular disorders. The CSS media query prefers-reduced-motion lets the browser tell you to skip non-essential motion. Framer respects this automatically when you use built-in effects, but if you build custom code, you need to handle it yourself. For more on accessibility, see web design best practices.
Test on mid-range mobile
Your MacBook can render anything at 60fps. A three-year-old Android cannot. Test on a real mid-range phone or use Chrome DevTools’ CPU throttling at 4x to simulate. If a section drops below 30fps, simplify it.
How to Build Your Animation Workflow in Framer
Step 1: Plan motion at the wireframe stage
Decide which sections need motion before you start designing. Hero, feature reveals, hover states on interactive elements. Skip “decorate with motion later” because that is how sites end up overstuffed.
Step 2: Use one easing curve site-wide
Pick a single easing curve (a soft ease-out, or a custom cubic-bezier) and use it everywhere. Sites with three different easing curves feel disjointed.
Step 3: Apply motion via Effects panel
For most sites, the Effects panel is enough. Click an element, open Effects, choose Appear, Hover, or Scroll, configure duration and easing, ship it.
Step 4: Use Magic Motion for complex transitions
When you need to interpolate between two layouts (an image grid that becomes a slideshow, a list that becomes a card stack), reach for Magic Motion. Configure variants on a component, and Framer handles the rest.
Step 5: Drop into code only when necessary
If you need an animation that the Effects panel cannot create (custom physics, complex SVG animations, multi-step timelines), use a code component with Framer Motion. Reserve this for the 10% of cases where the canvas falls short.
Framer Animation Library vs Alternatives
Compared to Webflow’s Interactions panel, Framer’s animation library is more powerful out of the box (Magic Motion alone is a leap ahead) but Webflow’s panel offers more granular control over individual elements within a single animation. Compared to GSAP (the gold-standard JavaScript animation library), Framer is easier to use and tied to a specific tool, while GSAP is more flexible and works anywhere. For most marketing sites, Framer’s built-in tools are more than enough. For platform comparisons, see Framer vs Webflow.
Frequently Asked Questions
Is the Framer animation library free?
Yes. All animation features inside the Framer canvas are available on every plan, including the free tier. You only pay for hosting, custom domains, and CMS scale. For full pricing detail, see Framer pricing explained.
Do I need to know code to use Framer animations?
No. The Effects panel and Magic Motion handle 90% of common animations without code. Code components with Framer Motion are available if you want to push beyond what the panel supports.
What is the difference between Framer and Framer Motion?
Framer is the website builder (the canvas, CMS, hosting). Framer Motion is the React animation library that powers Framer’s canvas under the hood and is also available as a standalone npm package for developers building React apps.
Will animations slow down my site?
If used carelessly, yes. Animating too many elements at once or animating expensive properties (height, width) can drop frame rate. Stick to transform and opacity, limit concurrent animations, and test on mid-range mobile. For broader speed guidance, see Core Web Vitals.
Does Framer respect reduced motion preferences?
Yes. Built-in animations honor the prefers-reduced-motion CSS media query automatically. If you write custom code components, you need to handle the preference yourself.