How to animate collection items in sequence

I need to animate my collection list items in sequence. So when the line of list items is scrolled into view the first item appears then the next then the next etc… I would ideally just be able to adjust the delay on the opacity for each item in the animation or better yet link the delay to the index of the item *0.5s or something. Or maybe I can somehow add a unique class to each collection item to point to in the animation. Any thoughts would be great! Thanks!

Here is my public share link: Webflow - Garretts Exploration Site

I have not tried this but it sounds like you’re talking about a basic scroll into view trigger, on a class that’s shared by all of your collection items.

The problem is that I want each collection item to appear in sequence. And if I create a scroll into view triggered animation that affects one collection item, then they all share that same animation. And with that they all share the smae delay. I need them to delay at intervals. So like the first item has no delay and the second has 0.1 s delay and the third has 0.2 and so on. which can not be achieved when the items are in a collection list.

I went ahead and created what I want manually. The black elements about half way down that say prisma are what I want to be able to do with the collection list above

I’m imagining it more as a scroll trigger than a time trigger, otherwise I’d imagine most of the animation would actually happen offscreen.

But when I want to do creative things with interactions and triggers what I typically do is setup button triggers in the CMS and then trigger them with script. For you that’s pretty easy, you script just loops through the collection list items and creates a timer for each with increasing lengths, which will click the button that triggers the interaction for each item successively.

If you want even more complex interactions I’d recommend GSAP.