Streaming live at 10am (PST)

How to add a staggered animation to multiple list items without adding an animation to each list element

I want to add an animation to multiple list items, but if I choose “affect different elements” they will “animate” (pop up) in block istead of appearing in order.

any advice?

1 Like

<li> elements are siblings, so it’s hard, if not impossible, to target only one of them if they share the same class name. There may or may not be a solution depending on your project structure.

Can you please share your project’s public link so it’s easier to understand your issue?

Learn how to do it here:

1 Like

@xellos, likely you will need to use some javascript and loop through the dom elements in the list and apply some custom jquery animation in order to achieve this. We do not yet support interactions for separate elements having the same class name, you would need to create an interaction for each class.

Perhaps one of the coding gurus can help out, or you can play with this yourself to see what you can create that is custom.

Cheers, Dave

Hi @xellos, in addition to the answers already provided, these links may be able to help:

(1) This is our interactions page:

(2) This is the same page but in read only mode so you can see how the interactions are added: This can be super useful for testing things out

(3) This is some documentation on interactions in general:

1 Like

thank you, I already used the webflow resources, but I was looking for a way to set the animation, for example to just one class for list item, and make the animation start for each list element independently.

The best way to achieve this result is to use the web flow resources as I have also been using them.

I’m also looking for the same feature.

The Staggered Load demo shows exactly the desired effect. But:

  • Each element has a different interaction added to it. The delay is cause by setting a different delay to each different interaction.

A staggered loading of a list would be awesome and is almost possible:

  • Add an interaction to a parent.
  • Set the interaction to affect it’s nested (child) elements only

This way each element with the same class contained within a parent will have the load animation applied.

For it to be staggered it would need a delay though.
Adding the delay to the interaction itself does not work, because:

  • Each nested (child) element will have the interaction run at the same time.

Each delay within an interaction will be contained WITHIN the interaction. Not BETWEEN them.

If it would be possible to add that BETWEEN delay field there it would be very easy to automate staggered load without apploying an interaction on each individual element.

Or is there an easier way to achieve this?


I’ve encountered the same issue.

The only fixed I’ve found so far is to use jquery.

Problem is… you will need to create (in jquery) all the interactions for that particular object.