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!

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);

Thanks, that worked perfectly! I had done everything except resetting the TweenLite and pausing the Timeline before clearing it. Really appreciate your help.

@OSUblake The problem with your demo is that when the window is resized the window.innerHeight and scrollHeight changes, but the timeline duration has already been set. I can do something like this on resize: timeline.clear(); addSteps(); update(); But, this only works it the page is first scrolled to the top, otherwise everything is messed up. How would you update the Timeline on window resize?