Cycle functions in GSAP3

[Timsig]

Hi,

In the old syntax, you could pass a function to the cycle property of a stagger. Now that cycle has been replaced with gsap.utils.wrap, I am unclear as to how to achieve the same effect. The comments in the pen explain what i am trying to achieve.

Thanks in advance for any help

See the Pen BajjxQE by timsig (@timsig) on CodePen

[PointC]

Hi and welcome to the forum.

 

I'm not sure you'd need wrap here. Wouldn't you just use function based values like this?

tl.to(".dot", 0.5, {
  x: function(i, target) {
    return 200 * Math.cos((i+1) * 45)
  },
  y: function(i, target) {
    return 200 * Math.sin((i+1) * 45)
  },
  stagger: 0.1
});

Does that work or am I misunderstanding the desired behavior?

 

Happy tweening.

 

[GreenSock]

Yep, @PointC is exactly right (if I understood you correctly). 

 

Here's a fork that shows a dynamic version that plots however many dots you have around the center, and staggers their animation: 

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

 

I think you'll find that GSAP 3 lets you do a lot more with less code. 👍

 

Does that help?

[PointC]

Well sure... get all fancy with it. 

[Timsig]

That's great - thanks both for the swift replies.

[GreenSock]

@Timsig just a little note - you may be confused by why your elements aren't being dispersed at quite the angles you expected in your original demo. That's because you were using degrees instead of radians, but Math.cos() and Math.sin() expect radian-based values. You can convert degrees to radians like:

 

var DEG2RAD = Math.PI / 180; // just multiply your degrees by this...

var angleInDegrees = 45,
    angleInRadians = angle * DEG2RAD;

 

Oh, and the positioning of your circles were off because they all had different center points (cx and cy). I corrected that in my version.

 

Happy tweening!