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: Mac - Apple
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