Streaming live at 10am (PST)

Scroll Controlled Animation


#1

Is there a way to control an animations sequence entirely through scrolling? As far as I can tell, animations only operate in a timed manner. I can begin a ‘timed’ animation once an element is scrolled into view or clicked, but I’d like a more ‘controlled’ animation, wherein the act of scrolling dictates the sequence of the animation. (e.g., scrolling down plays animation forward, scrolling up plays the animation backward). Ideally, this animation would override the scroll of the web page until it is completed. (i.e., user scrolls downward on homepage, only to trigger an animation ((fade in lettering, resizing of elements, etc.)), once animation is completed, user could actually scroll down on page).

Example: https://www.apple.com/imac-pro/
As you scroll down Apple’s page here, the image of the iMac rotates. Once the animation is complete, the page itself will once again scroll downward. Scrolling upward from the end of the animation simply reverses the animation. This is the exact effect I am trying to achieve with animations on my Webflow page. As a user begins to scroll down, the animation begins, and continues at the rate of the scroll. If a user begins scrolling up, the animation should reverse course and rewind itself at the rate the user is scrolling.

Essentially, I’d like elements to behave this way when they are “scrolled into view”. Only instead of beginning a timed animation that won’t stop until it’s finished, the animation plays at the rate the user is scrolling. These animations should end once a user has “scrolled through it”, at which point the page itself may continue scrolling.

This is similar to the idea of scratching a record. Scrolling back and forth should be able to play and rewind an animation, rather than simply begin a timed one.

Can we do it?


Here is my public share link: https://webflow.com/design/kieran-boess-first-project


#2

With the newly introduced Interaction 2.0 you can do it. It’s not going to be just triggers when elements go in or out the viewport, but a continuous control over animations, based on events, triggers and keyframes placed in %age of the scroll along a page height.


#3

Hi Vincent, I had the same request as Kieran. I think I have Interaction 2.0 but for some reason I don’t quite see the same UI as in the tutorials. For example I tried to replicate this animation but only had the option to create a Timed Action and not the Scroll Actions as seen in the tutorial – https://www.youtube.com/watch?v=Q9_hg7osQ9w
Have all the features yet to be rolled out, or am I missing something. Thanks


#4

You don’t have this option?


#5

Ah yes! I must have chosen ‘Page scrolled’ before. Thank you!