Reveal elements on scroll — Webflow interactions and animations tutorial

In this example, we'll cover how to create a trigger which fades and moves elements in as we scroll down the page. In addition to configuring the trigger and animation, we'll also cover how to apply the same animation to other elements.

Steps in the video:
00:00 - Introduction
00:37 - Trigger
01:00 - Animation
03:15 - Apply to other elements

Note: We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

----------

[Webflow]

We’re transitioning to a new UI, and are in the process of updating our Webflow University content.

[martyfinney]

I can't tell you how many times I've laughed (in a good way) while watching these videos. Very well done in actually making tutorials that aren't boring, know the people who are watching them and also get the information across beautifully. Good job :)

[jpbdizon]

I like how this is so helpful and straightforward

[EgorGordeev]

Great! Was trying to make same effect using page scroll animation, which took me so many time with adjustment... while that way is easy as 1 2 3! Thank you

This is so helpful.
thank you so much
can't believe it's 4 years already and it's so valuable.
Thank you so much

[samsonbrody]

Having done this sort of stuff the "under the hood" way with Javascript and Intersection Observers, I have to say this looks like a much easier way to get the same results.

[jenna___]

I wonder if this would still be possible on an element like a container or a wrapper that has scroll and where the target element inside of that wrapper rather than on the main page.

[MalikKlc]

Hello, two questions:

1- At 2:57 you a) choose the setting so that this only affects this class and then b) you choose the option below that to affect children only with this class. I don't quote get portion b), how does choosing that option avoids random stuff happening on other sides of the page? If we don't want other parent classes (link boxes) on the page to be affected to avoid randomness, we should as well not want other children classes (images) not affected as well.

2- At 3:23 we apply the animation to other elements with the same class. Since we are doing this, do we even need the actions I described in my question 1 above?

Thank you! Great videos by the way.

[dennishylau]

Hi @Webflow can you share the project link, or a way to make masonry grid that works with this tutorial?

[BillSneboldPlus]

I can't get this to work with a collection within a tab. I've tried using both grid and flex to lay it out. Not sure if that's part of the problem or it this just doesn't work with collections. What I get is the entire collection animating at once (maybe because it's all visible already). If I switch to the other tab that has more items, when I scroll, I see no animating at all.

[yoozer]

I do agree, the interaction panel is confusing and very unintuitive. Animators always using horizontal timelines with keyframes for a reason, not vertical ones. Would be way better…

[Alexander-cdzx]

Is there a clonable of this site? Or can anyone tell me how to get this kind of look for gallery pictures?

[kosticivan]

Hello I have a question and I would be grateful if you answered because it has been bothering me for like 2 hours :)... When I set the scroll animation for an element that isn't on top of the website, and if i do that slowly the animation is already finished as if it startet as soon as I started scrolling. For example, I have 2 100vh sections and every animation is working perfectly. But I added for the third section same animation as you did, and I can't reach it to see because as soon as i start scrooling it executes itself. Please tell me if I did something wrong. I am enjoying webflow very much and I love you guys so please answer so I can keep going :).

[iDATUS]

Did we find out what the verb noun parings were on that sentence in the end?

[private_krapfen]

the opacity animation is working fine but the moving is not working, is it not possible to make a move animation to a hole section with a grid in it?

[srivatsa]

Animation is working, but how can trigger only when page is scrolled 50% bottom, now animation is triggering when scrolled 50% of viewport not page

[briannaneeteson]

Is there a way I can offset each individual item's animation with the same class? Like I want these cards to reveal on scroll, but I want the first one on the left do to it a few milliseconds earlier than the 2nd, the 2nd a bit before the 3rd and so on.

[brobocops]

What about setting an offset for the top of the viewport? for instance animating a nav bar when the page is scrolled near the top? Just use 95%?

[polobreak]

why doesn't this work with a custom embed element?

[drizzel_lp]

Absolutely amazing tutorial. I am just wondering, how can I do this Layout on 0.18 sec? I really like this. I have tryed this a few times with the same end result: Fail