Help with staggerTo

[Guest Nickzilla]

Can someone show me how they would stagger these animations? Run for the first instance of classes and then repeat. Thanks in advance.

See the Pen bgKMvP by nickmuth (@nickmuth) on CodePen

[PointC]

Hi Nickzilla 

 

I'm assuming you want each circle and checkmark animation to complete and then the next one plays? I'd recommend creating a timeline for each of your media divs and offset the start time based on the index of the element. You can then have each timeline play in sequence or overlap them slightly if you like.

 

Here's a basic example. 

 

See the Pen QdaVKp by PointC (@PointC) on CodePen

 

Hopefully that helps.

 

Happy tweening.

[Guest Nickzilla]

So once I'm inside of an element how I can I target a specific child class? 

    element['.circle']

[PointC]

You would just need to find() the target.

($(this).find(".circle"))

Here's another example I made for another forum question using that technique. These are buttons with hover and click states, but the timeline building process is the same.

 

http://codepen.io/PointC/details/WrjzOa/

 

Hopefully that helps.

 

Happy tweening.

[Guest Nickzilla]

Saving me time I don't have! Thanks for your help.