Streaming live at 10am (PST)

Offset CSS animation


#1

Hello!

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!


#2

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.

http://greensock.com/get-started-js#sequencing


#3

Thank you for the exhaustive answer vlogic!


#4