StaggerTo from a single origin

[OODNX]

Hi, before I start just wanted to say GSAP ROCKS! I use it pretty regularly but am always keen to learn new techniques and tricks.

 

I am using a staggerFrom tween to move 20 objects (svg's) across the viewbox, but I want them all to animate from a single point of origin, is there a quick way to do this.

 

I could animate them individually in a timeline, setting the From origin for each object, but I wanted to take advantage of the easing I could apply to a stagger tween.

 

I was wondering if there was a way of passing origin coordinates specifically relating to the viewbox? 

Alternatively can I pass an array to the staggerFrom for the individual points of origin for each object?

 

 

I have included a codepen.

I really want the objects to animate from a single point on/behind the coin. Also perhaps you'll be able shed some light on why my coin flip animation has stopped working when I migrated it to codepen, (I don't do much on Codepen)

 

Thank you in advance.

See the Pen gqaVeJ by AlexFarminer (@AlexFarminer) on CodePen

[Carl]

I think the demos and discussion here will help: 

 and for more "back-story" from @OSUblake see: https://greensock.com/forums/topic/13681-svg-gotchas/?page=2&tab=comments#comment-72060

[mikel]

Hi @OODNX,

 

"to animate from a single point of origin": using staggerTo  you can define an array of values to cycle through (like cycle:{x:[100,-100], rotation:[30,60,90]}).

 

Here used to set the persons (row 01) to an common point:

 

 

See the Pen daGpZK by mikeK (@mikeK) on CodePen

 

The SVG spec does not support 3D transforms. You can try wrapping your SVG in a containing div and rotating that.

 

See the Pen PVZNVW by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

 

 

 

[OODNX]

Excellent, you are, as your profiles suggest, superheros!

 

Thank you