Skip to main content
Question

Figma Motion - Scroll trigger

  • June 26, 2026
  • 3 replies
  • 216 views
Dom_Ugr

Hi, 

Thank you for Figma Motion it’s great !

There is one thing I can’t figure out : once I have set motion on the components, then add them to my website frame (desktop, mobile...) how can I set a trigger for the motion to begin ?

For now, it appears that they all run at the same time, when the page is loaded

In AE, we can work on different elements (as we do here on components) and then add them to a precomposition so we can choose when to start etc…

Can we add this on Figma Motion or on Prototype but the trigger won’t be a timing but a scroll ?

Like, you have your full page : Header, Hero, Editorial whatever, and I would like the animation on the Editorial section to start when the user scrolls 10% on it

Thank you for your help !

    3 replies

    Felipe Marcelino

    I found a workaround that worked for me. Basically, you animate a frame and turn it into a component with two variants. Remove the animation from the first variant and add a 'Mouse Enter' trigger. To start the motion on scroll, you just need to transform the entire section into a component and set it to trigger when the user scrolls to it.

    I think Figma could make easier to manage keyframes of each variant, but for now I think it’s really helpful. 

      Felipe Marcelino

      I found a workaround that worked for me. Basically, you animate a frame and turn it into a component with two variants. Remove the animation from the first variant and add a 'Mouse Enter' trigger. To start the motion on scroll, you just need to transform the entire section into a component and set it to trigger when the user scrolls to it.

      I think Figma could make easier to manage keyframes of each variant, but for now I think it’s really helpful. 

       

      I think there is a better solution. Just set two triggers, the first one you set After Delay - 1ms - Play/Pause Animation and the second one you set Mouse enter - Play/Pause Animation.

      Be sure the trigger animation selected is the child itself. 

      The only problems is when you scroll up the animation restart.

      Felipe Marcelino

      I found a workaround that worked for me. Basically, you animate a frame and turn it into a component with two variants. Remove the animation from the first variant and add a 'Mouse Enter' trigger. To start the motion on scroll, you just need to transform the entire section into a component and set it to trigger when the user scrolls to it.

      I think Figma could make easier to manage keyframes of each variant, but for now I think it’s really helpful. 

       

      I think there is a better solution. Just set two triggers, the first one you set After Delay - 1ms - Play/Pause Animation and the second one you set Mouse enter - Play/Pause Animation.

      Be sure the trigger animation selected is the child itself. 

      The only problems is when you scroll up the animation restart.


      The first one you set Pause and the second one you set Play

      Terms & ConditionsAccessibility statement