Scroll-based animations
Scroll-based animations are not available yet with Figma prototyping. However, figma.to.website has enabled a solution to achieve these beloved effects.Trigger animation when object appears on screen
To create an animation when a layer appears on screen, you must create a component with a special property called `@appear`.figma.to.website will automatically select the variant `@appear=false` as a starting point on the web and smart animate to the variant `@appear=true` when the layer is scrolled into view.
Customizing the animation
By default, the transition between `@appear=false` and `@appear=true` is a Smart Animate of 300ms.You can customize this transition effect by adding an interaction trigger “Mouse enter” or “While hovering” on the `@appear=false` variant.
This interaction will be automatically triggered by figma.to.website when the component scrolls into view and it doesn’t require any mouse interaction to happen.
Demo
🎉