How Animations and Effects Work in Framer

Framer's animations run on Motion (formerly Framer Motion), its own open-source animation library, and you control it through a handful of distinct no-code tools - Appear effects, Scroll effects and Scroll Transforms, Hover and Press effects, and page transitions - each with its own trigger and settings rather than one universal animation panel. For anything those don't cover, Code Components and Code Overrides give developers direct access to the same library. Here's how each piece works, sourced from Framer's own Help Center and Academy (checked September 2026).

What powers animation in Framer?

Framer's help center is direct about the foundation: "Motion, formerly known as Framer Motion, is a high-performance, open-source animation library that leverages JavaScript and React. In Framer, it enables users to create beautiful animations without writing code" (Framer Help, "How animations and effects work in Framer", checked September 2026). Four features come from that foundation: hardware-accelerated animations "for smoother, browser-native performance," layout animations that "seamlessly animates transitions between different states," gesture support for "tap, drag, and hover," and optimized performance through "deferred keyframe resolution, and native browser API integration."

How do Appear effects work?

Appear effects handle the most common case: something animating into place as a visitor scrolls to it or the page loads. Per Framer's own Academy lesson: "Add the Appear Effect to a layer and choose how opacity, position, scale, or rotation changes as it enters the viewport. Set the trigger, delay, duration, and easing from the effect controls" (Framer Academy, "Use the Appear Effect in Framer", checked September 2026).

Framer's own lesson guidance narrows when to reach for the stagger option versus using it everywhere: "Use stagger only when several related items should reveal in order." It also states a real accessibility floor - "keep the final content visible even when the effect does not run" - so a broken or skipped animation shouldn't leave content invisible.

How do Scroll effects and Scroll Transforms work?

Framer splits scroll-driven motion into two distinct tools, and mixing them up is a common source of confusion:

• Scroll-triggered effects fire once, at a point you choose, the same way an Appear effect does but keyed to scroll position instead of viewport entry: "Select the layer, add a scroll-triggered effect, and choose the viewport point that starts the animation" (Framer Academy, "Trigger animations on scroll in Framer", checked September 2026).
• Scroll Transforms are continuous rather than triggered once: "Scroll Transforms let us translate scrolling into smooth, gradual changes to the position, scale, rotation, and opacity of an element," in contrast to "Scroll Animations," which "allowed us to trigger an animation that carried itself out with a pre-defined duration" (Framer Academy, "Animate scroll transforms in Framer", checked September 2026). You "add a Scroll Transform to the layer and map the page's scroll range to properties such as position, scale, rotation, or opacity," then "set the start and end trigger points around the section that should control the movement."

Framer's own testing guidance for Scroll Transforms specifically calls out checking "clipping, overlapping content, and the final resting state at each breakpoint before adding more transformed properties" - a parallax-style effect that looks fine on desktop can clip badly once elements stack differently on mobile.

How do Hover and Press effects work?

These cover pointer feedback on interactive elements: "Add Hover and Press Effects to show how an interactive element responds to pointer input. Change a small set of properties such as fill, scale, opacity, or shadow, then set a transition that returns cleanly to the default state" (Framer Academy, "Use Hover and Press Effects in Framer", checked September 2026). Framer's own guidance flags a real accessibility gap if you stop at hover alone: "pair hover feedback with a pressed or focus state so the Component communicates interaction on touch screens and keyboards as well as with a mouse" - a hover-only effect simply never fires for someone navigating by keyboard or on a touchscreen.

For interactions with more than one discrete state - an open-and-closed menu, a selected tab, an expanding card - Framer's animation overview points toward Component Variants instead of layer effects: designers "create Variants that represent each state and connect them with click, mouse enter, or mouse leave triggers" (Framer Academy, "Create and prompt animations in Framer", checked September 2026).

How do page transitions work?

Framer calls these Page Effects, and they're built on a specific browser standard: "Create page transitions in Framer with Page Effects built on the View Transitions API. Apply one effect across all pages or target a specific route, then use presets or customize the current page's exit and the next page's entrance" (Framer Academy, "Create page transitions with Page Effects in Framer", checked September 2026). You add a Page Effect from the Effects panel, choose whether it applies site-wide or to one specific page, and can start from a preset before adjusting the entrance and exit separately - Framer's own FAQ on the lesson confirms "Page Effects let you control how the current page leaves and how the destination page appears," and that they can be combined with effects already running on the destination page itself.

Framer's testing checklist for page transitions is worth following literally before publishing one site-wide: "Test browser back and forward actions, direct loads, reduced motion, and pages with different heights before using the effect across the whole site" (Framer Academy, "Animate transitions between pages in Framer", checked September 2026) - a transition that looks right going forward through a click can look broken on a browser back-button press or a page with a very different scroll height.

How do I build custom motion with Code Overrides or Code Components?

For anything the panel-based effects above don't cover, Framer's help center describes two developer-facing paths, both built on the same underlying library: "Code Components: Build custom React components for use in Framer projects. Code Overrides: Modify or extend the behavior of existing Framer elements using JavaScript functions. Both methods provide full access to the Motion for React API, enabling sophisticated animations and interactions" (Framer Help, "How animations and effects work in Framer", checked September 2026). In practice, a Code Override wraps an existing canvas layer to add behavior it doesn't have natively, while a Code Component is a standalone React component you drop onto the canvas - useful once a design needs logic (a counter, a custom drag interaction, a synced animation across several elements) that no combination of Appear, Scroll, Hover, or Variant settings can express.

What performance and accessibility settings should I know about?

Two settings sit outside the effects themselves and change whether any of them run at all:

• Reduced Motion. Framer's help center: "Modern operating systems allow users to set a preference for reduced motion. Framer offers a setting to disable parallax, transform, and layout animations for those who prefer minimal motion." You control it under Site Settings → General, where "you'll find an option to adjust this setting, controlling motion effects like parallax, transform, and layout animations" (Framer Help, "Reduced motion settings", checked September 2026).
• The interaction between your Accessibility setting and a visitor's device. Framer's own troubleshooting page states the mechanism directly: "Effects will not function if the Accessibility option is enabled in your site settings and the user's device has reduced motion enabled. When the 'prefer-reduced-motion' setting is enabled in the user's browser or device, only the opacity will be animated" (Framer Help, "Why aren't the effects in my project functioning", checked September 2026). The same page adds that "when Low Power Mode is enabled on a user's device, certain animations may not work" - worth knowing before assuming a bug report is actually a broken effect.

Example (hypothetical): A designer builds a hero section with an Appear effect on the headline, a Scroll Transform that shrinks a hero image as visitors scroll past it, and a Hover effect on the CTA button. After publishing, a tester on an iPhone in Low Power Mode reports the scroll effect "isn't working" - checking Framer's own troubleshooting guidance above, the designer confirms it's the device setting, not a broken build, and documents the expected behavior instead of chasing a phantom bug. This is illustrative only, not a build Figment ran.

If a motion effect breaks a layout, what's the recovery path?

Because every effect above is a setting on a layer or page rather than injected code, removing or disabling it is non-destructive: reopen the layer's Appear, Scroll, or Hover effect controls and delete the effect, or turn on Reduced Motion in Site Settings to check how the page reads with transform and layout animations suppressed site-wide before you decide whether to keep, adjust, or cut a specific effect. For a Code Override or Code Component specifically, the safer route is disconnecting it from the layer first (rather than deleting the underlying code file) so you can reattach it once you've isolated the issue.

Where does Figment fit in?

Nowhere for this decision - Figment publishes a static website from a Figma design through its Figma plugin, and it doesn't have Framer's scroll-transform, hover-effect, or Code Override system to compare against. If a Framer template's built-in motion is the reason you're drawn to Framer in the first place, our guide to how Framer templates work covers what a remixed template actually includes and its licensing terms, and our Framer pricing guide covers which plan you'd need for the custom domain and CMS headroom a real project needs.

Bottom line: Framer's animation system separates cleanly into Appear (entrance), Scroll effects and Scroll Transforms (viewport- and scroll-position-driven), Hover/Press (pointer feedback), Component Variants (multi-state interactions), and Page Effects (transitions between routes) - with Code Overrides and Code Components as the developer escape hatch when none of those cover what you need. Check a visitor's device settings (Reduced Motion, Low Power Mode) before assuming a reported bug is actually broken.