Animating between variants on scroll in Framer

Component variants are a powerful way to define different states for a single element.

Component variants are a powerful way to define different states for a single element.

With Scroll Variants, we can take that same power and tie it to the scroll position, triggering smooth transitions between component states as visitors move through the page. In this lesson, I’ll show you how to animate between variants based on scroll to create more immersive, story-driven experiences.