Stagger Animation: Loop Through Elements by Column

[foxacid]

Hi all,

 

first post here, so please bear with me.

 

I've adapted the Advanced Staggers demo from the docs to create a "Streamline" effect. Everything works as expected but what I want to do is modify this bit so that the initial line rotation is gradually increased by column instead of flow layout:

 

rotation: i => i * 0.5,

 

Any help on this is much appreciated.

Cheers!

 

 

See the Pen PoWMgOx by foxacid (@foxacid) on CodePen

[GreenSock]

Welcome to the forums, @foxacid!

 

Is this what you mean?

See the Pen qBrOedJ?editors=0010 by GreenSock (@GreenSock) on CodePen

 

You can use the gsap.utils.distribute() method to do some pretty cool stuff. 👍

[foxacid]

Amazing, that's it! I knew you guys had something up your sleeves for this task 😉

 

I see that an easing curve can be applied to the distribute function but I'm wondering if it be possible to reverse direction of the animated property (i.e. a sinusoidal motion with a zero crossing)?

 

Thank you!

[foxacid]

OK sorry, that can be achieved using the from parameter. Awesome stuff, I'll mark this as solved. Cheers!

[OSUblake]

21 minutes ago, foxacid said:

possible to reverse direction of the animated property (i.e. a sinusoidal motion with a zero crossing)?

 

Not sure what you mean, can explain that in more detail?

[foxacid]

13 minutes ago, OSUblake said:

 

Not sure what you mean, can explain that in more detail?

 

What I meant was that the rotation is zero in the center and goes clockwise towards one edge and anticlockwise to the other.

Actually from: center doesn't quite cut it since the direction is not reversed.

 

See here:

See the Pen NWpxyQE by foxacid (@foxacid) on CodePen

[OSUblake]

You can use base. That's the value to start from. amount gets added to that, so this will go from -20 to 20...

rotation: gsap.utils.distribute({
  base: -20
  amount: 40,
  axis: "x",
  grid: grid,
}),