Framer Animations: The Complete Guide for 2026

Framer animations let you add scroll-based effects, hover interactions, page transitions, and appear-on-scroll motion to your website — all without writing code. The visual animation tools use a variant-and-trigger system where you define start and end states, pick a trigger (scroll, hover, click, or viewport entry), and Framer handles the tweening with GPU-accelerated CSS transforms and Framer Motion under the hood.

Key Takeaways

Framer’s animation system is built on variants (states) and triggers (what causes the transition between states)
You can animate any property — opacity, scale, position, rotation, color, blur, and more — without touching code
Scroll-based animations and appear effects are the two most impactful animation types for conversion-focused websites
Framer Motion (the code library) and Framer’s visual animation tools share the same rendering engine, so visual animations perform just as well
Animations do not negatively impact SEO when implemented correctly — Framer handles this well by default
The best Framer animations are subtle, purposeful, and serve the user experience — not the designer’s ego

How Framer’s Animation System Works

Before diving into specific animation types, you need to understand the core mental model. Every animation in Framer follows the same pattern: variants + triggers + transitions.

Variants: Defining States

A variant is a snapshot of how a layer looks at a specific moment. Every element on your Framer canvas has a default variant — its resting state. You create additional variants to define what the element looks like when it’s hovered, clicked, scrolled to, or visible in the viewport.

For example, a card component might have two variants:

Default: opacity 100%, scale 1, shadow small
Hover: opacity 100%, scale 1.03, shadow large

You can modify virtually any property between variants — position (X, Y), size, opacity, rotation, border radius, background color, blur, shadows, and even font properties on text layers.

Triggers: What Starts the Animation

Triggers tell Framer when to transition between variants. The available triggers are:

Hover: Activates when the cursor enters the element’s bounds
Press / Tap: Activates on mouse down or touch
Viewport (Appear): Activates when the element scrolls into view
Scroll: Ties the animation progress directly to scroll position
Mouse position: Animates based on cursor coordinates (via code overrides)

Transitions: How It Moves

Transitions control the animation curve between variants. Framer gives you several options:

Spring: Physics-based motion with configurable stiffness, damping, and mass. This is the default and produces the most natural-feeling animations.
Tween: Duration-based with easing curves (ease-in, ease-out, ease-in-out, linear). Better when you need precise timing.
Inertia: Momentum-based, used for draggable elements.

Spring animations are almost always the right choice. They feel more natural because real objects don’t move with linear easing — they accelerate and decelerate based on physical forces. A spring with stiffness around 200 and damping around 20 is a solid starting point for most UI animations.

Types of Framer Animations

Let’s break down every animation type available in Framer, when to use each one, and how to set them up. If you’re building a site from scratch, our Framer website design guide covers the broader design decisions that inform your animation strategy.

1. Appear Animations (Viewport Trigger)

Appear animations fire when an element scrolls into the viewport. They’re the most common animation type on modern websites and the single biggest upgrade you can make to a static-feeling page.

How to set up appear animations:

Select the element you want to animate
In the right panel, click the + next to “Animate” (or press A)
Choose Appear as the trigger type
Set the initial state — typically opacity 0 and Y offset of 20-40px for a fade-up effect
Configure the transition (spring or tween) and delay if you want staggered reveals

Best practices for appear animations:

Keep Y offset between 15-40px. Anything more looks like the element is jumping.
Stagger sibling elements with 50-100ms delays for a cascading effect
Set the viewport threshold to around 0.2-0.3 so elements animate before they’re fully in view
Use once: true so the animation only plays the first time — repeated triggers feel glitchy

2. Scroll-Based Animations

Scroll animations tie animation progress directly to scroll position. As the user scrolls down, the animation advances. Scroll back up, and it reverses. This creates parallax effects, progress indicators, and cinematic storytelling sequences.

How to set up scroll animations:

Select your element and add an animation
Choose Scroll as the trigger
Define the scroll range — the start and end scroll positions that map to 0% and 100% of the animation
Set the property changes: parallax (Y offset), scale, opacity, rotation, or any combination
Use the “relative to page” or “relative to element” option depending on your layout

Common scroll animation patterns:

Parallax backgrounds: Move background images at a slower rate than foreground content. Set Y offset to move -100px to 100px across the scroll range.
Progress bars: Scale X from 0 to 1 as the user scrolls through a section
Sticky reveal: Combine a sticky-positioned container with scroll-linked opacity and transform changes on child elements
Text parallax: Move headline and body text at slightly different rates for depth

You can see scroll animations in action on many of the top Framer website examples — the best ones use scroll effects to guide attention without overwhelming the visitor.

3. Hover Animations

Hover effects provide immediate feedback and make interfaces feel responsive. In Framer, hover animations are created by adding a hover variant to any element.

How to set up hover animations:

Select the element (button, card, link, image)
In the right panel, add a Hover variant
Modify the properties you want to change: scale, shadow, color, border, position
Set the transition — spring with stiffness 400 and damping 30 for snappy feedback

Effective hover patterns:

Buttons: Subtle scale (1.02-1.05) + shadow increase. Never change the button’s position on hover — it makes clicking feel unreliable.
Cards: Lift effect with increased shadow and slight scale. Y offset of -4px works well.
Images: Slight zoom (scale 1.05) with overflow hidden on the container for a crop-zoom effect
Links: Underline width animation from 0 to 100%, or color shift

4. Page Transitions

Page transitions animate the shift between pages in your Framer site. They reduce the perceived loading time and make navigation feel seamless.

How to enable page transitions:

Go to your project settings
Navigate to the Transitions section
Choose a transition type: fade, slide, push, or custom
Set the duration (200-400ms is the sweet spot)
Optionally configure per-page overrides for specific navigation paths

Page transitions work best when they’re fast and unobtrusive. A simple 250ms fade is better than an elaborate slide that delays content. Users are navigating to read content, not watch transitions.

5. Text Animations

Framer supports animating text by character, word, or line. This is particularly effective for hero sections and key headlines.

Common text animation patterns:

Word-by-word reveal: Each word fades and slides up with a staggered delay
Character-by-character: Individual letters animate in sequence — use sparingly, as it’s slow to read
Line-by-line: Each line of a paragraph reveals with a slight delay
Typewriter effect: Characters appear one at a time, mimicking typing

For text animations, keep the total reveal time under 1.5 seconds. Longer than that and visitors start reading mid-animation, which is jarring. The animation should complete before the user’s eyes reach the text.

6. Component-Level Animations

Framer components can have multiple variants that represent different interaction states. This is where Framer’s animation system becomes truly powerful for interactive prototypes and production sites alike.

Examples:

Toggle switches: Two variants (on/off) with spring transitions
Accordion sections: Collapsed and expanded variants with height animation
Tab interfaces: Active and inactive tab variants with indicator animation
Navigation menus: Open and closed states with staggered item reveals

Framer Motion vs. Framer’s Visual Animation Tools

This is a common source of confusion. Let’s clarify.

Framer Motion is an open-source React animation library. It’s a code library that developers use in custom React projects — including Next.js, Remix, and other frameworks. You write animation logic in JSX using components like <motion.div>.

Framer’s visual animation tools are the no-code animation capabilities built into the Framer design and publishing platform. They let you create animations visually through the UI — no code required.

Here’s the key insight: Framer’s visual tools are built on top of Framer Motion. When you create an animation visually in Framer, it compiles down to Framer Motion code under the hood. This means visual animations get the same GPU-accelerated performance, the same spring physics, and the same rendering pipeline as hand-coded Framer Motion animations.

When to use which:

Use visual tools for 90% of website animations — appear effects, hover states, scroll animations, page transitions. No code needed, full performance.
Use Framer Motion (code overrides) for complex interactive sequences, gesture-driven animations, or animations that depend on dynamic data. This requires JavaScript knowledge.
Use code components when you need animation logic that visual tools can’t express — physics simulations, canvas-based effects, or WebGL integrations.

Animation Best Practices

Getting animations right is mostly about restraint. Here are the principles that separate polished Framer sites from ones that feel like tech demos.

Performance

Animate only composite properties: transform (translate, scale, rotate) and opacity are GPU-accelerated and don’t trigger layout reflow. Animating width, height, padding, or margin causes layout recalculation and janky performance.
Avoid animating too many elements simultaneously. If 30 elements animate at once on scroll, even GPU-accelerated transforms will stutter on lower-end devices. Batch animations with stagger delays.
Test on mobile. An animation that runs at 60fps on your MacBook Pro might drop to 20fps on a mid-range Android phone. Reduce complexity for mobile breakpoints.
Use will-change sparingly. Framer handles this automatically for most animations, but if you’re adding custom CSS, don’t blanket-apply will-change: transform to everything — it increases memory usage.

Purpose and Subtlety

Every animation should answer “why.” If an element animates just because it can, remove the animation. Motion should guide attention, provide feedback, or communicate spatial relationships.
Subtlety wins. A 20px fade-up is almost always better than a 100px slide. A 1.02 scale is better than a 1.1 scale. The best animations are ones users feel but don’t consciously notice.
Match duration to purpose. Hover feedback should be instant (100-200ms). Appear animations can be slightly longer (300-600ms). Page transitions should be swift (200-400ms). Loading sequences can be the longest (up to 1.5s).
Respect reduced motion preferences. Framer respects the prefers-reduced-motion media query. Users who’ve enabled this accessibility setting in their OS will see reduced or no animations. Don’t override this.

Visual Hierarchy

Animate what matters first. Headlines and CTAs should animate before supporting text and decorative elements. This guides the eye to the most important content.
Use stagger intentionally. Staggered reveals create a reading order. Make sure that order matches how you want visitors to process the information.
Don’t animate everything. If every element on the page fades in, nothing feels special. Reserve animation for key moments: hero sections, conversion points, and content reveals.

Common Animation Mistakes

After building hundreds of Framer websites, these are the mistakes we see most often — and how to avoid them.

1. Too Many Animations

The most common mistake by far. Every section fades in, every card scales on hover, every image parallaxes, every heading types itself out letter by letter. The result is a website that feels exhausting to scroll through. Pick 2-3 animation patterns for your entire site and use them consistently.

2. Animations That Block Content

If a user has to wait for an animation to finish before they can read the content they came for, the animation is a failure. This happens most often with text animations that take 3+ seconds to reveal and loading sequences that serve no functional purpose.

3. Inconsistent Timing

Mixing spring animations with linear tweens, using different durations for similar interactions, or having some elements animate on appear while identical elements don’t. Consistency is what makes a site feel polished. Define your animation tokens (duration, easing, offset) once and reuse them.

4. Ignoring Mobile Performance

Complex scroll animations that work beautifully on desktop can destroy mobile performance. Always test animations on real devices, not just the browser’s responsive mode. Consider simplifying or removing animations on mobile breakpoints.

5. Scroll Hijacking

Taking control of the user’s scroll to force them through an animation sequence. This is almost universally hated. Users expect scrolling to move the page. If your animation depends on scroll position, let scroll behave normally and animate elements relative to the scroll — don’t modify the scroll behavior itself.

Step-by-Step: Building a Fade-Up Section Reveal

Let’s walk through the most universally useful Framer animation — the section reveal. This pattern works for any content section and immediately makes a page feel more polished.

Step 1: Structure Your Section

Create a section with a container frame. Inside, place your content — heading, paragraph, image, buttons, whatever the section contains. Make sure the section has a frame wrapper, because you’ll animate the wrapper.

Step 2: Add the Appear Effect

Select the section’s content wrapper frame
Open the animation panel (press A or click + next to Animate)
Add an Appear animation
Set initial state: opacity: 0, Y: 30px

Step 3: Configure the Transition

Set transition type to Spring
Stiffness: 100
Damping: 20
Mass: 1

This gives a gentle, natural-feeling reveal with a slight overshoot that settles smoothly.

Step 4: Set Viewport Options

Viewport threshold: 0.2 (triggers when 20% of the element is visible)
Animate once: Yes (don’t replay on scroll back up)

Step 5: Add Stagger for Child Elements (Optional)

If you want child elements to reveal in sequence:

Remove the appear animation from the parent
Add individual appear animations to each child element
Use increasing delays: first child 0ms, second child 80ms, third child 160ms
Keep the same spring settings across all children for consistency

Step 6: Preview and Adjust

Click Preview to test. Watch for:

Does it feel too slow? Increase stiffness to 150-200.
Does it feel too bouncy? Increase damping to 25-30.
Does the offset feel too dramatic? Reduce Y to 15-20px.
Does it trigger too early or too late? Adjust the viewport threshold.

Examples of Great Framer Animation Patterns

Here’s what the best Framer sites do with animation — and what makes them effective.

The Minimal Hero

A single headline fades up over 400ms with no other motion on the page until the user scrolls. This works because it creates focus. There’s nothing competing for attention, and the subtle animation signals that the page is alive and responsive.

The Staggered Grid

Portfolio or feature cards that reveal in a staggered grid pattern as you scroll. Each card fades up with a 60ms delay from the previous one. The stagger creates a wave effect that feels dynamic without being chaotic.

The Sticky Storytelling Section

A sticky container with content that animates based on scroll position. As you scroll, different elements fade in and out, creating a narrative sequence. This is common in product explainer sections and works well because the user controls the pace.

The Micro-Interaction Button

A CTA button with a subtle hover state (slight scale + shadow lift) and a click state (scale down to 0.97 for a pressed feel). The spring transition makes it feel tactile. These micro-interactions build trust by making the interface feel responsive.

Want to see more examples? Check our curated collection of Framer website examples — many showcase animation techniques you can replicate.

How Animations Affect SEO

A common concern: do animations hurt your search rankings? The short answer is no, as long as you follow two rules.

First, all animated content must be present in the DOM. Framer handles this correctly — animated elements exist in the HTML even before they’ve visually appeared. Search engines can read the content regardless of its animation state.

Second, animations shouldn’t significantly impact page load speed. Since Framer animations use CSS transforms and opacity (GPU-accelerated properties), they add negligible performance overhead. The animation JavaScript payload from Framer Motion is small and loaded efficiently.

For a deeper dive into Framer’s search engine performance, including Core Web Vitals and indexing, read our complete guide to Framer SEO.

When to Hire a Professional

Framer’s visual tools make basic animations accessible to everyone. But there’s a meaningful gap between “functional animation” and “polished, conversion-optimized motion design.”

Consider working with a Framer animation specialist when:

You need complex interactive sequences that go beyond appear and hover effects
Your site’s conversion rate matters and you want motion design that supports the sales funnel
You want custom scroll-based storytelling sections
You need code-level animation customization (Framer Motion overrides, custom components)
Your team doesn’t have the time to iterate on animation timing and feel

See our pricing page for Framer website packages that include professional animation design.

Frequently Asked Questions

Are Framer animations bad for website performance?

No. Framer animations use GPU-accelerated CSS transforms and opacity, which are the most performant properties you can animate. The Framer Motion runtime that powers these animations adds minimal JavaScript overhead. Performance issues only arise when you animate layout-triggering properties (width, height, padding) or animate dozens of elements simultaneously without staggering. Stick to transform and opacity, stagger your animations, and test on mobile — you won’t have performance problems.

Can I create animations in Framer without coding?

Yes. Framer’s visual animation tools let you create appear effects, hover states, scroll animations, page transitions, and component interactions entirely through the UI. You define variants (states), pick triggers, and configure transitions — all without writing a single line of code. Code overrides are only needed for advanced interactive sequences, data-driven animations, or gesture-based motion.

What is the difference between Framer Motion and Framer animations?

Framer Motion is an open-source React animation library used by developers in custom code projects. Framer’s visual animations are the no-code animation tools built into the Framer design platform. The key connection: Framer’s visual tools compile down to Framer Motion code under the hood, so both approaches use the same animation engine and deliver the same performance. Visual tools cover most website animation needs. Framer Motion is for developers who need programmatic control.

How do I make scroll-triggered animations in Framer?

Select the element, open the animation panel, and choose either “Appear” (triggers once when the element enters the viewport) or “Scroll” (ties animation progress to scroll position). For appear animations, set the initial state (e.g., opacity 0, Y offset 30px) and configure the transition. For scroll-linked animations, define the scroll range and the property changes. Set the viewport threshold to control when the animation triggers — 0.2 (20% visible) is a good default.

Do Framer animations work on mobile devices?

Yes. Framer animations work on all modern mobile browsers. Hover animations automatically convert to tap interactions on touch devices. However, performance varies by device. Complex scroll animations that run smoothly on desktop may stutter on older phones. Best practice: test on real mobile devices, reduce the number of simultaneously animating elements on mobile breakpoints, and consider disabling purely decorative animations on smaller screens to maintain smooth performance.