Jump to content

Search In
  • More options...
Find results that contain...
Find results in...

Cycle functions in GSAP3

Recommended Posts


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

Link to post
Share on other sites

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.



  • Like 2
  • Thanks 1
Link to post
Share on other sites

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?

  • Like 3
  • Thanks 1
Link to post
Share on other sites

Well sure... get all fancy with it. ;)

  • Like 1
  • Haha 2
Link to post
Share on other sites

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

  • Like 1
Link to post
Share on other sites

@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!

  • Like 2
Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.