Horizontal Movement on Scroll – Webflow interactions and animations tutorial

By | February 16, 2020


Text. Mountain. Text. Da Vinci called these the three components
of any great design. We’ll animate the text to move horizontally
based on our scroll position. Now we covered this example earlier in the
Interactions course when we covered triggers and animations. But we’ll build this interaction from scratch. Our goal (as we scroll) is to have the text
Let’s Go move to the left and fade out, while at the same time, the text Outside will
move to the right and fade out. So. Let’s set up a page scroll animation. (Keep in mind, we’re demoing this on a page
scroll, but we could set up the section to serve as the trigger instead.) Alright. When we’re scrolling through the page, we
want to play a scroll animation. What scroll animation? The one we’re creating and naming right
now. It’s going to have two steps — two sets
of actions. The first actions are going to be super boring. Because we’re simply creating keyframes
that say, “hey, we’re not moving at all.” Or, “we have full opacity.” And the reason we’re having to create these
(and we’re doing it on each element) is that we need a starting point. (We need to specify that our elements are
supposed to start at this position and that our elements are supposed to be fully opaque.) So our page scroll animation has begun. But only sort of. We’re halfway there. We need a second point. Let’s tell our Text Background (the Let’s
Go text) that at 100%, we’ll move left — the text will move left 900 pixels. And since we want this to sort of fade out,
we can add another action for opacity. (We can set the opacity to 0% so that when
the page is fully scrolled down, the text will be fully-transparent.) And if the top text is moving left 900 pixels,
then we can set another move (this time on the bottom text, which says “Outside”)
— we’ll set that one to move to the right 900 pixels. And to even things out, we’ll create one
last action for opacity. Just like the top text, let’s set the opacity
to 0%. If we enable Live Preview? This functions perfectly on scroll. Just as expected. Now we can always select multiple points (we’re
using COMMAND on the Mac or CONTROL on Windows to select multiple actions one-at-a-time). We can drag these together so the opacity
effect is more obvious on scroll. (Instead of getting to 0 when the page is
fully scrolled down, it’ll reach that point sooner.) We can also affect smoothing. We can add a damping effect from our trigger
controls, which will really smooth things out. As we know: the higher the percentage, the
longer the lag. Sometimes a gentle smoothing here is great
if we want this movement to be more obvious and less jumpy if we’re using a scroll wheel
or if we’re quickly moving around the page. Now scroll-based animations can work for other
properties, too. But in this case, we’ve horizontally moved
(and faded) these elements based on our page scroll position.

4 thoughts on “Horizontal Movement on Scroll – Webflow interactions and animations tutorial

  1. Lazy Artist Post author

    What is this program? Can you develop websites on it?

    Reply
  2. Carsten Rheidt Post author

    How did you do the effect that some parts of "Lets go" behind of the mountain? Thanks in advance 🙂

    Reply
  3. Sophia Prater Post author

    When I do this, it works great on desktop but on mobile the elements off screen create a huge white space that results in horizontal scrolling. Is there a fix for this?

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *