Features
I've set up this interaction so that I've made a component with 54 variants. Each variant is a segment of the image sequence that, when played, displays a laptop closing animation.
To switch the component's variants from "Variant 1" to "Variant 2", and then all the way up to "Variant 54" as you scroll through the page, you gotta use a code override. You can check it out below.
Step / 01
Remix the project.
Step / 02
See how it's built.
Step / 03
Try recreating it for practice, or copy and paste it to your project.
Code override for cycling through component's variants on scroll
The VARIANT_LENGTH is important - it should be equal to the total number of variants your component has. The code here uses 54 so remember to adjust that based on your own component's number of variants.
When you scroll down on the web page, the component progressively shows different variants as the component comes into view.
You can even change when the animation starts and ends by tweaking two values named "start 0.7" and "end 0.85".
Go ahead and copy the code, then start creating the override in your Framer project from ground zero.