Timsig Posted June 10, 2020 Share Posted June 10, 2020 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 Link to comment Share on other sites More sharing options...
PointC Posted June 10, 2020 Share Posted June 10, 2020 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. 2 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 10, 2020 Share Posted June 10, 2020 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? 3 1 Link to comment Share on other sites More sharing options...
PointC Posted June 10, 2020 Share Posted June 10, 2020 Well sure... get all fancy with it. 1 2 Link to comment Share on other sites More sharing options...
Timsig Posted June 10, 2020 Author Share Posted June 10, 2020 That's great - thanks both for the swift replies. 1 Link to comment Share on other sites More sharing options...
GreenSock Posted June 10, 2020 Share Posted June 10, 2020 @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! 2 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now