How to Add Animations and Interactions in Framer (2026)

Motion is one of Framer's biggest strengths. Done well, it makes a site feel premium and alive.

This guide shows you the main types of animation in Framer and how to use each one. It also covers the restraint that separates polish from noise.

Types of animation in Framer

Framer gives you a few core animation types. Each has a clear job.

Type	Use it for
Appear	Fade or slide elements in on load or scroll
Hover and press	Feedback on buttons, cards, and links
Scroll	Parallax and effects tied to scroll position
Page transitions	Smooth movement between pages
Magic Motion	Animate an element between two states

Appear and scroll animations

Appear animations bring elements in as the page loads or as you scroll to them. They guide the eye down the page.

Select an element, open the animation options, and choose an appear effect like fade or slide. Keep the distance small and the timing quick. Subtle movement feels modern, while large jumps feel heavy.

Hover and press states

These are microinteractions, small responses to a user action. They make a product feel responsive.

Add a hover state to a button so it lifts or changes color. Add a press state for the moment of the click. These tiny touches build trust and make the interface feel cared for.

Page transitions

Page transitions animate the move from one page to the next. They make navigation feel smooth instead of abrupt.

Set a transition in your page settings, such as a fade or a slide. Keep it fast, because users want to reach the next page, not wait for a show.

Magic Motion and components

Magic Motion animates an element smoothly between two states or variants. It is great for toggles, tabs, and expanding cards.

Create two variants of a component, then let Framer animate between them. This creates rich interactions without any code.

Best practices for tasteful motion

Good motion is felt, not noticed. These rules keep it tasteful.

• Keep durations short, usually under half a second.
• Use motion to guide attention, not to decorate.
• Be consistent, so similar elements animate the same way.
• Respect users who prefer reduced motion.
• Test on a real phone, since heavy motion can feel slow there.

Common mistakes to avoid

Mistake	Do this instead
Animating everything	Animate only what guides the user
Slow, long animations	Keep timing quick and snappy
Inconsistent effects	Reuse the same motion patterns
Ignoring performance	Test on real devices and compress media

Want motion that feels premium?

Tasteful animation is a core part of how I build sites. See my Framer service, browse Framer website inspiration, or get a fixed quote.

Frequently asked questions

Can you add animations in Framer without code?

Yes. Appear, hover, scroll, page transitions, and Magic Motion are all built in and need no code.

Do animations slow down a Framer site?

Light, well built animations have little impact. Heavy media and too many effects are the usual cause of slowdowns, so keep motion subtle and compress assets.

What is Magic Motion in Framer?

It animates an element smoothly between two states or variants, ideal for toggles, tabs, and expanding cards.

How much animation is too much?

If motion distracts from the content or slows the experience, it is too much. Use it to guide attention, then stop.

Does Framer support reduced motion?

You can design with restraint and respect user motion preferences, which is good for accessibility and comfort.