Animation in Framer is what separates a static layout from a site that feels alive. The good news is that you do not need to write code or import a motion library. Framer's effects panel lets you add scroll reveals, hover states, and page-load entrances directly on the canvas. This Framer animations tutorial covers the four techniques you will use most often, with a workflow that keeps your site fast.
We design and sell Framer templates, so we add these effects constantly. The same patterns show up in almost every project: a hero that fades in, cards that respond to the cursor, sections that appear as the visitor scrolls. Once you learn the controls, you can apply them in minutes. If you are still learning the editor itself, our beginner template walkthrough is a good place to start before you add motion.
What animations can you build in Framer?
Framer gives you four main animation categories: Appear, Hover, Press, and Scroll. Each one is triggered by a different visitor action, and they can be combined on the same element as long as you keep the triggers clear.
Appear effects run when the element first loads on the page. They are ideal for hero headlines, hero images, and anything above the fold that you want to greet the visitor.
Hover effects run when the cursor rests on an element. They work beautifully on buttons, cards, portfolio thumbnails, and navigation links.
Press effects run on click or tap. They add tactile feedback to buttons and interactive frames.
Scroll effects run as the visitor moves down the page. This is where framer scroll animations live: layer-in-view reveals, section-in-view choreography, and continuous scrolling reactions.
The mistake most beginners make is adding all four to everything. Restraint reads as polish. A site where every element jiggles feels broken, not impressive.
How to add scroll animations in Framer
Scroll animations are the most powerful effect in Framer because they guide the reader's eye through long pages. Framer gives you three trigger types: layer in view, section in view, and scroll direction.
Layer in view fires when a specific element crosses a chosen point in the viewport, such as when its top, center, or bottom aligns with the bottom of the viewport. This is perfect for one-off reveals: a headline, an image, or a stat card.
Section in view fires when a whole section reaches a chosen position. Use this when you want several elements to animate together. Set the section trigger once, then link multiple layers to it so they choreograph as a group.
Scroll direction fires simply when the visitor scrolls up or down. This is useful for persistent elements, such as a navbar that hides on scroll down and reappears on scroll up.
To set one up, select the layer, open the Effects panel, and add a Scroll effect. Pick the trigger type, set the start and end positions, and define the before and after states. Common choices are opacity from 0 to 1, y-position from 24px to 0, and scale from 0.95 to 1.
Enable Replay if you want the animation to run again when the element leaves and re-enters the viewport. This is useful for landing pages where visitors may scroll up and down before converting. Keep motion subtle, around 0.3 to 0.6 seconds, so it feels responsive rather than theatrical.
How to create hover and press effects
Hover and press effects are the fastest way to make a Framer site feel interactive. Select a layer, open Effects, and add a Hover effect. You can animate scale, rotation, offset, and opacity directly in the properties panel.
For buttons, we usually add a small scale increase, around 1.02 to 1.05, combined with a slight background color shift. For cards, a subtle lift, translateY of minus 4 to minus 8 pixels, with a soft shadow change, gives the impression of physical depth without looking like a gimmick.
Press effects follow the same idea but fire on click or tap. A quick scale-down to 0.97 on a button makes the interaction feel tactile. Keep the duration short, around 0.1 to 0.15 seconds, so it reads as feedback, not a delay.
Framer uses physics-based springs for transitions, and you can tune stiffness, damping, and mass to control the feel. A higher stiffness with medium damping gives a snappy, modern response. Lower stiffness with higher damping feels softer and more premium. Test both on the actual device your audience uses most.
How to use the Appear effect for page-load animations
The Appear effect is for motion that runs as soon as the element enters the page. It is the right choice for hero content and any section that loads above the fold.
To use it, select the element, add an Appear effect, and define the starting state. A common pattern is opacity 0 with a 24px upward offset, animating to opacity 1 and offset 0 over about 0.6 seconds. Apply this to the headline, subheadline, and call-to-action in sequence with small delays, and the hero loads in a calm, deliberate order.
Staggering matters. If everything appears at once, the effect is wasted. If the delays are too long, the page feels slow. We usually start the headline at 0ms, the subheadline at 100ms, and the button at 200ms. That is enough rhythm without making the visitor wait.
Do not apply Appear effects to content far below the fold. Those elements should use scroll triggers instead, so they only animate when the visitor actually reaches them. Otherwise you waste motion on unseen content.
How to combine animations without slowing your site
Animation is only impressive if the site still loads quickly. Heavy motion can tank perceived performance, especially on mobile. Here is how we keep things light.
Animate transform and opacity properties whenever possible. These are the most performant properties for the browser. Avoid animating width, height, margin, or blur at scale, because they force the browser to recalculate layout.
Limit simultaneous animations. If ten elements are all moving at once, the page feels chaotic and the device works harder. Group related elements into one section trigger so they animate together as a single choreography.
Use short durations. Most hover effects should be under 0.3 seconds. Scroll reveals should be under 0.6 seconds. Long animations look elegant in isolation but feel slow when repeated across a whole page.
Test on real hardware. What feels smooth on a desktop monitor can stutter on a mid-range phone. Preview your Framer site on the device you expect most visitors to use, and reduce the number of effects if the frame rate drops.
For a concrete example of animation used sparingly, our GrowiX template layers scroll reveals over a clean agency layout. The motion supports the portfolio, it does not replace it.
Common animation mistakes
These are the problems we fix most often when reviewing Framer projects. Most come from adding motion without a plan.
- Animating everything. When every element moves, nothing stands out. Pick one or two moments per section.
- Long durations. An entrance that takes a full second feels slow on repeat visits.
- Motion that hides content. If text is still fading in while the visitor tries to read it, the animation is working against you.
- Ignoring reduced motion. Some visitors prefer less animation. Keep essential information readable even before the effect finishes.
- Heavy properties. Animating blur, box-shadow spread, or layout properties can cause jank on mobile.
- No hierarchy. Animations should guide attention toward the most important element on the screen, not scatter it.
Keep that list nearby while you build and your Framer animations will feel intentional instead of accidental.
Frequently asked questions
Does Framer support scroll-triggered animations without code?
Yes. Framer has a dedicated Scroll effect in the Effects panel. You can choose layer in view, section in view, or scroll direction triggers, then set the before and after states visually. No custom code is required.
What properties should I animate for smooth performance?
Opacity and transform properties, such as translate, scale, and rotate, are the smoothest because they do not force the browser to recalculate layout. Avoid animating width, height, margin, padding, or heavy blur effects across many elements.
Can I combine hover and scroll effects on the same element?
Yes, but keep the interaction clear. A card can fade in on scroll and scale on hover. Just make sure the two effects do not fight each other. For example, do not use the same scale property for both triggers, because the states may conflict.
Motion that serves the message
Animation in Framer should never be the point. It should make the point clearer: this button is clickable, this section is next, this page has loaded. The best Framer sites use motion like punctuation, not like decoration.
Start with Appear effects on your hero, add scroll reveals to the sections below, and layer in hover feedback on your interactive elements. Test on mobile, trim anything that feels slow, and stop before the page starts to feel busy.
If you want a template that already balances motion with structure, browse our Framer templates. Many include the same scroll and hover patterns in this guide. Pair them with our Framer CMS tutorial for dynamic content, how to add a blog to Framer for content marketing, and our Framer forms guide for turning motion-driven visitors into leads. Design the movement, then let the message lead.
