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 
Here’s the result we’re going for:
For this effect, I’m going to be using:
- Webflow Interactions (for scroll detection)
- CSS transitions
- 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):
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:
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:
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
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:
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 
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 
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):
No obvious mistake that I’ve made?
my mistake to begin with