How to use Framer animations well — effects, interactions, scroll reveals and the performance rules that keep real client sites fast.
Written by
Pavlo Zhydkykh
Framer animations can make a site feel premium — or make it feel like a toy. After eight years of building client sites, I've learned the difference is restraint and a handful of repeatable patterns. This guide covers the effects, interactions and scroll behaviours that work on real projects, and the performance rules that keep them fast.
Key takeaways
Framer gives you three animation primitives — effects, interactions and transitions — and they cover almost every real-world need without code.
Animate transform and opacity only; anything that moves layout hurts Core Web Vitals.
Micro-interactions should sit around 150–250 ms; entrances around 400–600 ms. Longer feels sluggish.
Gentle springs read as premium; linear easing reads as cheap.
Every animation needs a job: guiding attention, giving feedback or explaining hierarchy. Pure decoration is noise.
What Framer animations actually are
Framer animations aren’t one feature — they’re three systems that work together, all visual, no code required:
Effects — appear, scroll and parallax behaviours you attach directly to a layer, like fading a section in as it enters the viewport.
Interactions — state changes on components triggered by hover, press, focus or viewport entry, such as a button swapping variants.
Transitions — the timing engine underneath both: the springs and easing curves that define how a change feels.
Most “how did they build that?” moments on award-winning Framer sites are these three primitives combined with restraint. On client projects I reach for custom code components maybe once in twenty builds — usually for canvas or WebGL work, never for standard UI motion.
The animations that actually improve real sites
Three patterns deliver almost all of the value on production sites.
Micro-interactions on buttons and cards
Hover and press states are the highest-return animation on any site because they give instant feedback exactly where attention already is. My default on cards is a 200 ms scale to 1.03 with a gentle spring and a slight shadow lift — subtle enough that visitors don’t consciously notice it, they just feel the site respond.
Section reveals on scroll
A soft fade-and-rise (opacity 0 to 1 with a 20–40 px offset) as sections enter the viewport gives a long page rhythm without demanding attention. Set the trigger so the animation finishes before the reader’s eye lands on the section, never after.
One hero entrance
A staggered entrance on the hero — headline, then subtext, then CTA, offset by roughly 100 ms each — sets the tone in the first second. One entrance per page is plenty; if every section makes an entrance, none of them does.
An animation that doesn’t guide, explain or reassure is decoration — and decoration has a performance bill.
How I add animations to a client build
The order matters more than most people think. My process on every project:
Ship the page fully static first — layout, typography and content complete, zero motion.
Add feedback micro-interactions: button and card hover and press states.
Add one hero entrance with a short stagger.
Add scroll reveals to key sections only — case studies, testimonials, pricing. Skip the rest.
Test on a mid-range phone, then re-run PageSpeed to confirm nothing regressed.
Built in this order, motion stays a layer on top of a working page rather than something the page depends on. When a client asks for “more animation”, I can point to a concrete step instead of sprinkling effects reactively.
Prefer to watch the fundamentals? Framer University’s 19-minute crash course on Framer interactions is the best short video introduction I’ve found, and it maps almost one-to-one onto the workflow above.
Animations and performance: the rules that keep you fast
Animation is the most common reason a Framer site drops out of the green on Core Web Vitals — and the fix is one rule: animate transform and opacity, nothing else. Those two properties run on the GPU compositor, so they stay smooth even on mid-range phones. Animating height, width or position shifts layout, which lands directly in your CLS score.
In practice on Framer:
Prefer scale and move (transform) effects over anything that resizes a layer.
Keep entrance effects off your LCP element — the hero headline or image should render immediately, not fade in late.
Avoid looping animations in the hero; they burn main-thread time and battery for no message.
Check the page with the system “reduce motion” setting enabled — accessibility reviews increasingly flag sites that ignore it.
If your scores still dip after that, my guide on hitting 90+ Core Web Vitals on Framer walks through diagnosing exactly which layer is responsible.
Common mistakes I still see in 2026
Animating everything — when twelve sections all move, the page feels busier and slower than it actually is.
Scroll-jacking — hijacking native scrolling for a “story” section. Readers tolerate it on award showcases and hate it everywhere else.
Durations over 600 ms on interface elements, which make a fast site feel slow.
Bouncy springs on serious brands — spring intensity is a tone-of-voice decision, not a default.
Treating animation as an SEO feature. Motion doesn’t rank; content and speed do — the fundamentals in my Framer SEO guide for 2026 move the needle far more than any effect.
Want animations that feel premium, not gimmicky?
Pavlo Zhydkykh builds custom Framer websites where motion supports the message — micro-interactions, scroll reveals and hero entrances tuned to keep Core Web Vitals in the green. Get in touch if you want a site that moves well and loads fast.
Related posts
Do Framer animations slow down a website?
Not if they animate transform and opacity, which run on the GPU. Sites with tasteful motion regularly score 90+ on PageSpeed. Problems appear when animations shift layout, loop continuously, or delay the LCP element in the hero.
Can I create Framer animations without code?
Yes. Effects, interactions and transitions are all visual tools built into Framer, and they cover almost every pattern you see on production sites. Code components are only needed for edge cases like WebGL or canvas work.
What is the difference between effects and interactions in Framer?
Effects are behaviours attached to a single layer, like appear-on-scroll or parallax. Interactions are state changes on components triggered by hover, press, focus or viewport entry. Transitions control the timing and feel of both.
How long should website animations be?
Around 150–250 ms for micro-interactions like hovers and presses, and 400–600 ms for section entrances. Much longer than that and the interface starts to feel sluggish rather than smooth.
Does Framer support scroll animations?
Yes — scroll-triggered appear effects, scroll speed (parallax) and sticky positioning are built in. Use them for rhythm, not spectacle: soft reveals on key sections outperform scroll-jacked storytelling on pages that need to convert.
