How to: staggered scroll reveal with Webflow

This is a trick I’ve used a couple times, though I’d share here as it might be useful to other people. Let me know if you’d like more of these how-tos :slight_smile:

Here’s the result we’re going for:

For this effect, I’m going to be using:

  1. Webflow Interactions (for scroll detection)
  2. CSS transitions
  3. A little bit of custom code (for staggering the animation)

This will leave us with a class-based scroll reveal, that can be reused effortlessly anywhere in your site.

Step 1: add a dedicated class to the items that need to have the effect

I like to describe the effect, for example “fade in up”. Make sure the element doesn’t have any other classes (if it does, remove them for now and re-add them after we’ve finished):

image

Also make sure you don’t apply any styles to this class. It is purely meant to activate the transition — if an element needs styles, give it another class and create a combo class for the effect:

image

Again, make sure all the styles are applied to the first class (“Logo” in the above example).

Step 2: create a “When scrolled into view” interaction on the element

And link it to the class:

image

I like to add an offset, so it doesn’t trigger right at the bottom of the page.

Step 3: create the interaction

Here, we’re going for a fade in up effect, so we need a move and an opacity change. Set the initial state to:

  • Move: Y 20px (you can also experiment with percentages, but I find it starts to look weird for bigger elements)
  • Opacity: 0

And final state to move: Y 0px – opacity: 1. Make sure the duration of the transitions in 0s — you’ll find out why in the next step :slight_smile:

image

Step 4: add CSS transitions

We use CSS transitions instead of Interactions for the animation, so we can stagger them without duplicating the interaction. Go back to the styles panel and add transitions for transform and opacity:

image

Now, when testing you should already see the scroll reveal, but all elements appear at the exact same time. Let’s find out how to stagger it for ultimate bling bling :gem:

Step 5: stagger the transitions

Here, we need a bit of custom CSS. Don’t worry, it’s pretty straightforward. I like to add it in an Embed block, so you see the effects in the Designer as well. Paste this code:

<style>
  .fade-in-up:nth-child( 2 ) { transition-delay: .1s }
  .fade-in-up:nth-child( 3 ) { transition-delay: .15s }
  .fade-in-up:nth-child( 4 ) { transition-delay: .2s }
  .fade-in-up:nth-child( 5 ) { transition-delay: .25s }
  .fade-in-up:nth-child( 6 ) { transition-delay: .3s }
  .fade-in-up:nth-child( 7 ) { transition-delay: .35s }
  .fade-in-up:nth-child( 8 ) { transition-delay: .4s }
  .fade-in-up:nth-child( 9 ) { transition-delay: .45s }
  .fade-in-up:nth-child( 10 ) { transition-delay: .5s }
</style>

Feel free to adjust the delays to your liking, and simply add more rows if you have more elements.

Step 6: ???

Step 7: profit :money_mouth_face:

Enjoy your staggered animations! Simply add the class “Fade in up” to any element you want to scroll-reveal. If you add it as a combo class, you have to apply the interaction to that combo class as well (a benefit is you can tweak the offset if you want):

image

8 Likes

This is DOPE. Is there a way we could attain this without custom code?

Not until Webflow adds built in support for it. But if you copy the code above, it should work.

@rijk Thanks for your guide. It’s really helpful to me. Unfortunately, i think it does not work with collection items. I’ve tried to follow your guide to collection element, but it doesn’t work.

If you’re okay and have solution, could you let me know how to solve this issue?
Thanks.

It should work, but you’d probably need to modify the CSS a little bit because of the different DOM structure.

For example (modify to your classnames etc):

<style>
  .fade-in-up .collection-item:nth-child( 2 ) img { transition-delay: .1s }
</style>

Hey!

Thanks for this :slight_smile: I’ve tried it, and seems all the settings are according to the above steps but it doesn’t work! Any idea what could be wrong?

https://preview.webflow.com/preview/egenlokal?utm_medium=preview_link&utm_source=designer&utm_content=egenlokal&preview=24589ab4b2fa79517872f84ee28cc65f&mode=preview

Best,
Sonja

You didn’t really give much explanation, but I’m guessing it’s this you want to stagger?

You need to look at your DOM tree (on the left): it’s the list items that need to have the nth-child selector. .list-frontpage li:nth-child( 2 ) .link-block-4 {} etc.

Sorry about that, that’s correct! I’ve added the animations to the list-frontpage instead and changed the code but it still doesn’t work. What’s the logic of adding the code in terms of parents (the list/link/textbox)?

You can read up on the CSS nth-child selector here: :nth-child | CSS-Tricks - CSS-Tricks

Thank you! It looks like the code is right, but it doesn’t trigger the animation still :confused: No obvious mistake that I’ve made?

I was having some trouble with this but not sure what the problem is.

At first I thought it was because I was trying to use this in conjunction with a symbol.
But I unlinked the symbol instance so it was regular elements, and it still didn’t work.

Then I wondered if it was because I had a row of elements inside a grid. So I duplicated the Div and pasted 3-4 outside the grid as a test. It works.
So for some reason the face that the elements are inside a grid, stop this from working. The elements inside the grid all fade on in unison. The divs outside the grid, fade in as a cascade.

Anyone have any ideas why this would be?

Worked for me!
Thanks so much.

Remember to change the class name in the embed to whatever you are using :laughing: my mistake to begin with

Thank you! I use this beautiful solution!