Help converting staggerTo with cycle to v3

[multimark]

Does anyone know how I would convert this to the new GSAP v3 syntax using gsap.utils.wrap?

 

This code animates concentric circles.

 

let durationStart = 400;
let durationIncrement = 200;
let to = {
    repeat: -1,
    cycle: {
        rotation: index => index % 2 ? -360 : 360,
        duration: index => durationStart + (index * durationIncrement),
    },
};
timeline.staggerTo(this.rings, 2, to, position);

 

I'm guessing it would be something like this, does this look correct?

 

let duration = [];
let durationIncrement = 200;
let durationStart = 400;
let rotation = [];

for (let i = 0; i < this.rings.length; i++) {
    rotation.push(i % 2 ? -360 : 360);
    duration.push(durationStart + (i * durationIncrement));
}

let to = {
    duration: gsap.utils.wrap(duration),
    repeat: -1,
    rotation: gsap.utils.wrap(rotation),
    stagger: 2,
};
timeline.to(this.rings, to, position);

Edited March 10, 2020 by multimark

[ZachSaucier]

Hey multimark.

 

38 minutes ago, multimark said:

does this look correct?

Kinda. First off, you have a couple of : instead of = in your variables which is no good  

 

It's definitely not clear what your end goal is. Maybe if you included a larger chunk of code that would explain why you're using a separate to object, why the v2 version has two different durations (one inside of the to object and one in the duration parameter), and why the position variable is in the place of the stagger amount of the staggerTo?

 

Most likely you don't need to use the wrap function at all - you can just use a function as the value:

const timeline = gsap.timeline();
const durationStart = 400;
const durationIncrement = 200;
const to = {
    repeat: -1,
    rotation: index => index % 2 ? -360 : 360,
    duration: index => durationStart + (index * durationIncrement),
};
timeline.to(this.rings, to, position);

Perhaps using timeline's defaults would be better than a separate to object? Hard to say without seeing it in context.

[multimark]

Thanks Zach

 

The way it was supposed to work was an infinite animation of 4 or more concentric rings, with every other ring rotating the opposite way, and a speed increase for each outer ring.

 

Some of the variables were originally part of a config object, I guess I overlooked the : when simplifying.

 

I think the original code was faulty to start with, I'm guessing it worked because the position variable (intended to be the optional position in the timeline) passed to the method was empty, effectively providing 0 as the stagger amount. The duration in the cycle object defined the rotation duration for each ring, while the staggerTo duration was the duration of the entire animation; I think that changing that one was supposed to relatively modify the individual rotation speed of each of the rings.

 

Thanks for the pointers!

[ZachSaucier]

If you need more help with any parts let us know. A demo would probably be good though