Streaming live at 10am (PST)

Timed Interactions w/ scroll trigger

Hey there, I have quick Q, first some context

There is an animation in your promotional site for interactions (https://webflow.com/interactions-animations) titled “create rich, multi-step animations.”
When I click the tutorial in this section a video starts teaching me about load animations. This is a bit confusing, because it seems like the timed interaction on the promotional site is triggered by scrolling into the section.

I’d like to achieve this affect on a website I am currently creating, for a timed animation to start when a section is scrolled into, instead of a scroll interaction dealing w/ the 0%-100% timeline

Any help would be greatly appreciated


Here is my public share link: LINK
(how to access public share link)

Chose the Interaction type “While page is loading” then create an animation. You’ll see that the vertical scale is in %age of the height of the page, allowing you to craft animations triggered at certain vertical positions of the page.

Hi @Jordanpuga,

You can also take a look at this article, about creating a scrolling animation:

Hope this helps :slight_smile:

@Jordanpuga Did you ever solve how to trigger timed animations based on scroll position? I’m trying to solve the same thing. :+1:

@jmonson You just need to use the “Scrolled Into View” element interaction trigger:

You can then run an interaction when the element is scrolled into view, you can also delay the animation or set an offset (how far away from being in view) you want it to be when it runs.

Great got that working. Now when it scrolls into view it fires the animation. However, It only plays the first time it scrolls into view. How do I play the animation again (every time it scrolls into view) without reloading the page?

@jmonson reverse the animation on scroll out using the same interaction trigger. It has both scroll in and scroll out and you can reverse it there so it runs when scrolled into view again.

Awesome. Thanks!

Cheers,

Jordan Monson