Streaming live at 10am (PST)

Offset CSS animation


What would be the best way to have each of these “items” have the same CSS animation, but with a 100ms offset?

At the moment they obviously animate at the same time, but I would like them to animate in a cascade, creating a sort of domino effect.

How do I go about this?

Thank you!

To do that in webflow you would need to dupe your original transition / and pad the delay for each instance. If you have a substantially large array of images I may look at Sequencing and grouping tweens with TimelineLite (GASP) library as that is it’s specialty and it has a time offset value for any array of objects. Just remember that the time offset of 100ms x number of instances may feel pretty slow if you have a bunch of images. That is the main reason a sequencing library may be a better choice as the offset would require you to change a single number if you change your mind on timing, easing, motion or want to use separate timings for alpha and movement.


Thank you for the exhaustive answer vlogic!

1 Like