Having trouble with staggerTo

[timLevesque]

I'm pretty new to SVG animation and am trying to get a staggerTo method. Can some one check this out and see what my problem is? much appreciated. You may notice that I set the position to y:520, this is not the problem. The To method works but only one item fires. There are 8 items (i think) with the class=" xS"

-Thanks

See the Pen pRwreX by timlevesque (@timlevesque) on CodePen

[Carl]

Thanks for the demo. I removed everything that wasn't animating xS and saw

 

tl.set(xS,{scale:4, y:520})

.staggerTo(xS, 0.5,{scale:1, y:520}, 0.25)

 

 

notice that you first set the x:520 and then later you try to stagger the x to 520. Since x is already 520, there is no where to stagger to. See what i mean?

Not sure what is happening with the scale but I really don't know what xS is so its hard to find it in the SVG.

 

If you need more help, please reduce your demo to just the svg elements and code that you need to replicate the stagger not working.

Its very hard to look at a big svg with an element somewhere with a class of xS and know what it is supposed to look like. The more you can reduce it the better we can help. Thanks!

[Jonathan]

I did notice one thing ..

 

You are using @charset in your css. The @charset should be on the first line in your CSS stylesheet, in this case in the CSS panel of codepen. You have other css rules being declared before this @charset. It might not be causing your other issue of scale, but it will cause some intermittent wrong parsing of your CSS in various modern browsers

 

https://developer.mozilla.org/en-US/docs/Web/CSS/@charset

 

[PointC]

Hi timLevesque 

 

Welcome to the GreenSock forum.

 

You've got a selector problem.  Please make the following changes:

//switch line 18 to this
 xS=selectAll('.xS polygon')

// and as Carl mentioned, you don't need the y:520 so change line 23 to this
tl.set(xS, {scale:0})

After you make those changes, it will all work correctly.

 

Here's a fork of your pen:

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

 

The way you were making the selection before was returning a group instead of the individual polygons in that group..

 

Happy tweening.