Triggering animations on scroll in Framer
In this Framer tutorial, you will learn Triggering animations on scroll in Framer. We explain a practical workflow, highlight the key settings that affect the result, and show how to apply the technique on real pages for cleaner UX and better site performance.
How can I trigger animations in Framer based on scroll position?
In Framer, you can trigger animations based on scroll position using scroll animations. There are three main ways to trigger these: when the animated element itself reaches a certain position in the viewport (layer in view), when a section reaches a certain point in the viewport (section in view), or simply when scrolling occurs (either scrolling up or down). You can set these triggers in the effects panel by selecting the appropriate option and customizing when and how the animation should play.
What is the difference between ’layer in view’ and ’section in view’ triggers for scroll animations?
’Layer in view’ triggers the animation when the specific layer reaches a chosen position in the viewport, such as when its top, center, or bottom aligns with the bottom of the viewport. This timing is relative to the layer itself. ’Section in view’ allows you to trigger multiple animations at the same time based on when a defined section reaches a certain point in the viewport, like the top of the section hitting the top of the viewport. This is useful for choreographing animations across multiple elements simultaneously.
How do I make an animation replay as users scroll up and down the page?
To make an animation replay as users scroll up and down, enable the ’Replay’ option in the scroll animation settings. This feature allows the animation to trigger each time the element enters or leaves the viewport (or passes the defined trigger point). For example, you can have a navbar move out of view when scrolling down and return (revert to a previous variant) when scrolling up, with Replay turned on to allow the effect to play in both directions. This works seamlessly by animating between the element’s default state and its defined scroll variant state.
Lesson details
