figma.to.website Docs Scroll animations

How to animate elements on scroll in a Figma website

Animate elements as they scroll into view: give a Figma component an @appear variant property, and figma.to.website smart-animates it on scroll.

Last updated

Figma prototypes don’t have scroll-based animations yet. figma.to.website adds them with a component convention.

Animate a layer when it appears on screen

  1. Create a component with a variant property named @appear, with the values true and false.

    A Confetti component with two variants, @appear=true showing the confetti icon and @appear=false showing it faded.

  2. Use the component in your design as usual, with the @appear=true variant.

On the web, figma.to.website starts each instance on the @appear=false variant and smart-animates it to @appear=true when it scrolls into view.

Customize the animation

By default, the transition from @appear=false to @appear=true is a 300 ms Smart Animate. To change it, add a Mouse enter or While hovering interaction to the @appear=false variant, with the transition you want.

A Mouse enter interaction on the @appear=false variant: Change to @appear=true, Smart animate, Ease out, 1000 ms.

figma.to.website triggers that interaction when the component scrolls into view: no mouse needed.

See it live: the Scroll animations demo in the Designer’s Guide, a site built with figma.to.website.