staggerFrom not correctly selecting/firing

[samuelcouch]

Hello! This is my first go at SVG animation, so it's likely something stupid simple, or a mistake on my part. The issue that I'm having is multipart, though I anticipate they're related -- I have a group with ID `CONFEFFTI` within the group are individual objects, each with ID of `confetti_piece`

 

At the end of the animation I am calling 

full.staggerFrom("#confetti_piece", 2, {
	scale:0, 
	transformOrigin:'center', 
	ease: Elastic.easeOut.config(1, 0.35)
	}, "-=2.0")

The problem(s) I am having are:

1. Only one of the pieces is animating (top right, green triangle comes in) -- I'm trying to have all of them animate in
2. It fires way after the rest of the animation completes, and it seems changing the position parameter to something much more drastic ("-=4.0" for example), it still goes late

Would love some help on this, thanks so much!

See the Pen GWpGyr by samuelcouch (@samuelcouch) on CodePen

[PointC]

HI samuelcouch 

 

Welcome to the GreenSock forum.

 

Just a couple things to fix and this will work for you. The first is all elements with an ID must be a unique ID. All your polygons and circles in the #CONFETTI group have an ID of #confetti_piece. You have two options. You can change them all to a class of .confetti_piece and then use that class as the target of your stagger tween. The other option is to not assign any class or ID to them and simply target the child polygons and circles of the #CONFETTI group.

//option 1
full.staggerFrom(".confetti_piece", 0.1, {scale:0, transformOrigin:'center', ease: Elastic.easeOut.config(1, 0.35)}, .05)

//option 2
full.staggerFrom("#CONFETTI polygon, #CONFETTI circle", 0.1, {scale:0, transformOrigin:'center', ease: Elastic.easeOut.config(1, 0.35)}, .05)

The other problem with the stagger is that you haven't entered a number for the stagger so it defaults to 0 and they will all play at the same time.

// the .05 is the stagger amount
full.staggerFrom(".confetti_piece", 0.2, {scale:0, transformOrigin:'center', ease: Elastic.easeOut.config(1, 0.35)}, .05)

// if you want to add the position parameter, you'd put it after the stagger number like this
full.staggerFrom(".confetti_piece", 0.2, {scale:0, transformOrigin:'center', ease: Elastic.easeOut.config(1, 0.35)}, .05, "-=2.0")

Hopefully that makes sense and helps.

 

Happy tweening.

[samuelcouch]

That worked perfectly, thanks!