The Framer animation library is a built-in motion system that lets designers add entrance effects, hover states, scroll-linked behavior, and page transitions without writing JavaScript. It bundles ready-to-use presets (fade, slide, scale, blur, rotate), custom easing curves, variant-based component states, and viewport triggers. Used well, it adds polish and clarity. Used poorly, it makes a site feel slow and chaotic.
What Is the Framer Animation Library?
Framer ships with a complete animation system baked into the canvas. Every element on the page (text, image, frame, button, or component) can be animated through the Effects panel. Under the hood, Framer compiles your settings into hardware-accelerated CSS transforms and JavaScript-driven scroll effects.
The library covers four categories of motion. Entrance and exit animations control how elements appear or leave. Interaction animations respond to hover, tap, and focus events. Scroll animations react to scroll position, either firing once when an element enters the viewport or scrubbing continuously. Component variants let you define multiple states for the same element and animate smoothly between them.
Because everything is controlled visually, the animation you preview in the canvas is the exact animation that ships to production.
Built-In Animation Presets
Framer includes a handful of preset effects that cover most real-world use cases. Each can be combined with the others and customized with duration, delay, and easing.
Fade is the safest default. Elements move from 0 to 100 percent opacity. Use it for body text and anything where you want presence without distraction. A 400ms fade with a slight upward translate is the unofficial standard for editorial sites.
Slide moves an element along the X or Y axis as it appears. Slide-up is excellent for hero copy. Slide-in from the side works for testimonial cards and feature lists when paired with a small stagger. Keep the distance short (under 40 pixels) so the motion feels intentional rather than dramatic.
Scale grows or shrinks elements from a center point. It works beautifully for logos, icons, and product imagery on hover. Avoid scaling text on entrance and stay between 0.95 and 1.05 for hover effects to avoid layout jumps.
Rotate spins elements around their center. Use it sparingly for icons that confirm an action (a checkmark spinning into place) and decorative shapes in playful brands. Avoid rotating text your visitor needs to read.
Blur shifts from a blurred state to crisp focus as the element appears. This works well for hero imagery on luxury brands. Blur is expensive to render on lower-end devices, so test on a real phone before shipping a blur-heavy hero.
Custom Easing and Curves
Easing controls how an animation accelerates and decelerates. Framer ships with standard presets (linear, ease-in, ease-out, ease-in-out) plus named curves like spring and gentle. For most cases, ease-out is the right choice because it mimics how physical objects come to rest.
When the presets feel wrong, build a custom cubic bezier curve. The easing editor lets you drag two control points to shape the acceleration profile. The shorthand bezier(0.16, 1, 0.3, 1) is a popular choice for snappy, modern UI transitions.
Springs are different. A spring animation is defined by stiffness and damping rather than duration. Higher stiffness means a faster snap, higher damping means less bounce. For product UI (modals, dropdowns, toggles), use stiffness around 300 and damping around 30. For playful brand moments, drop the damping to 15 for a noticeable wobble. Rule of thumb: time-based easing for content entering the page, springs for elements responding to user input.
Animation Triggers Explained
An animation does nothing until something tells it to play. Framer offers five built-in triggers.
On load fires the moment the page finishes loading. Right for hero copy, top-of-page imagery, and primary CTAs. Add small staggered delays (50 to 150ms between items) so elements arrive in sequence.
On hover plays when the cursor enters the element and reverses when it leaves. Use it for buttons, cards, links, and image tiles. Hover effects do not exist on touch devices, so always pair a hover animation with a tap state.
On click (or tap) fires once when the user activates the element. Useful for toggling state (a hamburger menu rotating into an X, a card flipping, an accordion opening). Pair every click animation with a reverse so the user gets feedback when closing.
On scroll plays as the user scrolls, either once when the element enters the viewport or continuously as scroll position changes. This is the foundation of the scroll-linked animations below.
In viewport is a one-shot variant. The animation plays the first time the element becomes visible and never repeats. It is the right default for revealing sections further down the page.
Scroll-Linked Animations
Scroll-linked animations are where Framer separates itself from most no-code tools. The Effects panel includes three scroll behaviors that cover the patterns designers ask for most.
Sticky scroll pins an element to a fixed position while the rest of the page scrolls past it. This is the pattern behind side-by-side scrollytelling layouts where a static image sits on the left while the text on the right advances through chapters. Set the pin to start and end at specific scroll percentages so the element releases at the right moment.
Parallax moves background and foreground elements at different speeds to create depth. The classic use case is a hero section where the background photo scrolls slower than the headline in front of it. Keep parallax subtle (offset speeds of 10 to 30 percent). Heavy parallax causes motion sickness and looks dated.
Scrub effects tie animation progress directly to scroll position. As the user scrolls, the animation plays forward; as they scroll back up, it reverses. Perfect for revealing a product 360 view or driving a complex sequence frame by frame. For deeper patterns, see our complete guide to Framer scroll animations.
Page Transitions
Page transitions control what happens when a visitor moves between pages. The default is an instant cut, which works for content-heavy sites where speed matters most. For brand sites where every detail counts, a custom transition adds polish.
Framer supports four transition styles out of the box. Fade cross-dissolves the outgoing page into the incoming one. Slide pushes the new page in from a chosen direction. Zoom scales the outgoing page out while the new one scales in. Wipe reveals the new page behind a moving colored panel.
Whichever you choose, keep transitions short. A 300 to 500ms transition feels intentional. Anything over 700ms feels like a delay. Test on a real device with throttled network. For implementation specifics, see our guide to Framer page transitions.
Component Animations and Variants
Variants are the most powerful idea in the Framer animation system. A variant is a saved state of a component. The same button can have Default, Hover, Pressed, and Disabled variants. Framer interpolates smoothly between them based on the trigger you assign.
The interpolation is automatic. If your Default variant has a white background and your Hover variant has a black background with a slight scale-up, Framer animates the color shift and the scale together in one fluid motion. You author the start state, the end state, and the easing.
Variants compound. A card component might have a Default state, a Hover state (lifts up and casts a deeper shadow), and an Open state (expands to reveal more content on click). Each transition is its own animation with its own duration. This is how complex UI motion gets built without writing a line of code. For deeper patterns, see our complete guide to Framer variants. Name your variants clearly (Default, Hover, Pressed, Loading, Success, Error) and keep them under six per component.
Performance: Keeping Animations Smooth
The point of animation is to feel effortless. The moment it drops below 60 frames per second, it stops feeling polished and starts feeling broken. Three rules keep your motion fast.
Animate only transform and opacity. These two CSS properties run on the GPU, so the browser can render them without recalculating layout. Width, height, top, left, margin, and padding all force layout recalculation. If you need a card to grow, use transform: scale, not width and height. If you need it to move, use transform: translate, not top and left.
Limit blur and shadow animations. Both are expensive to render. Animating a blur from 0 to 20 pixels on a hero image will stutter on any device older than three years. For shadows, animate the opacity of a pre-rendered shadow rather than the shadow’s blur and spread values.
Stagger heavy animations. If you have 12 cards entering the viewport at once, do not animate all 12 simultaneously. Stagger them with a 50 to 100ms delay. The eye reads the sequence as choreography rather than 12 simultaneous repaints, and the browser only has to render one or two at a time. Test on a real mid-tier Android device. If animations run at 60fps on a three-year-old Pixel, they will run anywhere.
Common Animation Mistakes
Most animation problems are taste problems, not technical problems. The same library that produces world-class motion can produce a nightmare site if used carelessly.
Animating everything. When every element fades in, slides up, and scales, nothing feels important. Pick the two or three elements per section that deserve emphasis (the headline, the primary CTA, the product image) and animate those. Let everything else just appear.
Slow easing on routine interactions. A 600ms hover animation on a button feels heavy and unresponsive. Hovers, clicks, and form focus states should be 150 to 250ms. Save longer durations for page entrances and big section reveals.
Motion that conflicts with accessibility. Some users have vestibular disorders that make parallax and large translations literally nauseating. Framer respects the prefers-reduced-motion setting at the browser level. Enable the reduced-motion variant in your project settings so users who asked for less motion get a calmer experience.
Auto-playing carousels. Rotating hero banners that advance on a timer have been studied for two decades, and the conclusion is consistent: they hurt conversion. If you have multiple things to say, build a static stack instead.
Real Examples Worth Stealing
Five patterns show up again and again in well-animated Framer sites. Each is small enough to ship in an afternoon and visible enough to elevate the entire site.
Staggered text reveal on the hero. Split the headline into words or lines and animate each with a 50ms delay. The headline reads as composed rather than dropped in. Pair with a fade-in subhead 200ms after the headline finishes.
Magnetic buttons. Primary call-to-action buttons subtly translate toward the cursor when it gets within 100 pixels. The effect is barely perceptible but telegraphs interactivity. Use a spring with low damping for the recoil when the cursor leaves.
Number counters on scroll. Big statistics (10,000 customers, 99.9 percent uptime) animate from 0 to their final value as the section enters the viewport. The motion gives the number weight. Limit to two or three counters per page.
Card lift on hover. Cards in a grid translate up 4 to 8 pixels and gain a slightly deeper shadow on hover. The depth cue tells the user the card is clickable. Keep the duration under 200ms and the lift subtle. For more patterns, see our guide to microinteractions.
Frequently Asked Questions
Does the Framer animation library work without writing any code?
Yes. Every animation in the library can be configured through the Effects panel and the Variants editor. You set the trigger, choose the effect, adjust the duration and easing, and Framer handles the rest. The only time you would write code is for highly custom logic, like syncing an animation to an external data source. For standard motion (entrances, hovers, scroll triggers, page transitions, variant interpolation), no code is required.
Will Framer animations slow down my site?
Not if you follow basic rules. Stick to transform and opacity, limit blur and shadow animations, and stagger heavy sequences. Framer outputs hardware-accelerated CSS for most effects, which means the GPU handles the work and the main thread stays free. A site with thoughtful animation can score 95 plus on PageSpeed Insights. A site with reckless animation will tank performance regardless of which tool built it.
How does the Framer animation library compare to GSAP or Lottie?
Framer covers 90 percent of what most sites need without leaving the visual editor. GSAP and Lottie are more powerful for complex timeline-based motion, but they require coding or working with imported JSON files. For typical brand and marketing sites, Framer’s built-in library is faster to ship. For interactive editorial pieces or product demos with frame-by-frame motion, GSAP or Lottie inside a Framer code component is the right call.
Where should I start if I am new to Framer animations?
Start with a single hero section. Add a fade-and-slide-up to the headline, a 200ms delayed fade to the subhead, and a scale-on-hover to the primary button. Ship that, watch how it feels, and then layer in more motion section by section. Most great animated sites started as one well-animated hero with the rest of the page added later. If you want help building a site with motion that matches your brand, get in touch with our team.