Cascade animations, by hierarchy order

Many websites want to have animations to spice things up, but "reveal on scroll" is too limiting when there is a row or grid of items. They all come up at once. It's often a nice touch to have the first one come up, then the next, then the next etc, with a delay between each. A staggered animation series or cascade.

You can do this with some javascript, but it's a hassle. And as I've posted in another thread, the current hacks don't really work inside grids (which is strange because the things you'd want to cascade, like a grid of client logos to show whom you've worked with, would often be laid out in a grid).

Since Webflow offers easy interactions like "reveal on scroll" it shouldn't be too much harder to have them cascade with delay, based on their order in the DOM or otherwise.

I've seen many forum posts on this but search didn't show up a wishlist request.

Hack and my comments:
https://discourse.webflow.com/t/how-to-staggered-scroll-reveal-with-webflow/95452/12
Which is patchy at best. Not good with symbols or grids. We need something more integrated please.

Thanks

  • JG
  • Dec 13 2021