Animate layers into view with the Appear Effect

The Appear effect in Framer animates a layer from a starting state into its final design when it first becomes visible, so it can fade in, slide into place, grow into view, or combine these. To add an appear animation, select a layer and click Effect next to Appear in the Effects section of the Properties panel. Each effect has three main options: Trigger decides what starts it, Preset applies a pre-built animation, and Enter sets how the layer starts.

On Appear starts the animation when the layer first becomes visible in the viewport, which suits simple entrances. On Scroll runs it based on scroll direction, as visitors scroll down or up the page. Layer in View waits until the top, center, or bottom of the layer reaches the trigger point. Section in View uses a section’s position instead, which helps when several effects should respond to the same part of the page. To animate elements on scroll, choose one of these scroll-based triggers, turn on Replay if it should run again, and set separate Enter and Exit states where the trigger offers them.

Presets such as Fade, Scale, Flip, and Slide In are combinations of the properties inside Enter, where you set the starting Opacity, Scale, Rotation, Skew, and Offset. Transition controls the timing into the final design. Spring is the default and gives a natural, slightly bouncy motion: Time controls duration, bounce, and delay, while Physics uses stiffness, damping, mass, and delay. Easing offers preset eases or a custom Bezier curve with time and delay.

For a staggered appear animation, give each element its own effect rather than animating the parent Stack, so their timing can be offset. Select the section with the context tool and ask the Agent to add a subtle, staggered Appear effect to each element. The Agent uses Framer’s native effects, so every setting stays editable. Once one layer looks right, ask the Agent to use it as a reference and apply the same treatment to the other sections on the page.