radial stagger

[ianben]

I haven't reached the codepen stage with this one but are there any suggestions for creating a stagger that displays the individual cells in the attached svg in a radial stagger mode? So, the animation starts at top centre and then works its way around the circle gradually building up the entire circle.

Radar_colour.svg

[mikel]

Hi ianben,

it could be done by staggerTo:

 

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

 

[ianben]

Ah, right - I will investigate. Still "learning on the job"!!

[mikel]

Hi experts,

 

using staggerFromTo the stagger value is irritating if the stagger value isn´t higher than the duration time.

 

Example:

 

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

 

 

Second: How can I position a staggerFromTo?

 

Best regards
Mikel

[Carl]

Hi Manfred,

I'm not sure what the desired outcome is but to use the position parameter with a stagger just put it after the stagger amount.

In the code below the staggerFromTo() will start at a time of 0

 

var clockwise = new TimelineMax()
  .staggerTo('#Radar03 .cls-1',1,{autoAlpha:1},-0.4)
  .staggerFromTo('#Radar03 .cls-1',0.5,{scale:'1'},{scale:'0.8', repeat:1, yoyo:true, transformOrigin:"50% 50%"},-0.7, 0)

 

If you need something else please try to clarify what effect you want. Happy to help.

[ianben]

Thanks to both for the help. The outcome of all of this will be (I hope) an animated info graphic of an air defence system - so extremely complex, having your help eases the process somewhat! I really need a team on this but at the moment it's just me and, as you have gathered, I'm a novice at this level of animation. Oh well - onwards and upwards!

[mikel]

Hi Carl,

 

Thanks.

 

That was my fault. I didn´t realized that the stagger value is combined with the start time.

 

And to position a staggerFromTo is now clear also.

 

Best regards