fabiantjoeaon

Yes, exactly that! I should've mentioned that sooner, I guess my focus was too much on the tweening part, my bad. Now it's one smooth motion indeed. Wouldn't I get into much trouble if I want to add a custom easing because it's split over two tweens?

So the values 0.35, 0 and 2 are not degrees, nor are they radians, they are values that get multiplied by Math.PI, as shown in this example (see definition and usage): https://www.w3schools.com/Tags/canvas_arc.asp Also, this is still in two different tweens, I want it to happen in one single motion, one single tween, so from 0.35 to 0 to 1. But to stay in the same direction during this animation, 0 has to be set to 2, and then interpolated to 1.

To make things more clear: during my first question I didn't realise you could use `set` to set a value between tweens. That solves one of my problems. However, right now, there is another problem. First 0.35 is interpolated to 0, then set to 2, and then in a different tween, 2 is interpolated to 1. The stop between these tweens are visible. What I want is the exact same, but then in one tween. So I want to interpolate 0.35 to 0, and while my tween is still going, I want to set 0 to 2, and then interpolate to 1, so the stop isn't visible. I was wondering if this is possible, and if so, if I needed to use the modifiersPlugin. By the way, I appreciate the help!

Ahh okay, thanks, I needed `set()` to set my value to 2, however, now I get two different tweens, and the stop between these tweens is visible, I need it to be one motion, do I then neccesarily have to use one tween? How would I fix this?

Hi there, I am trying to animate an arc in Canvas, through the startAngle property, it requires me to pass a value form 0 * Math.PI till 2 * Math.PI. This works so far. Now here is my problem: My arc starts at 0.35. Then, I have to animate it to 0. When it is at 0 however, it should change immediatly to 2 (no animation required), and then animate from 2 to 1. How would I do this using TimelineMax using just one tween? I have tried the directionalRotationPlugin, but this works with degrees, and I am looking into the modifiersPlugin, but I do not really understand how you would achieve this. See my code below, this doesn't work of course because now it only tweens to 0, it still has to go from 2 to 1 // Currentangle is now 0.35 this.props.timeline.to(this, 8, { currentAngle: 0 modifiers: { currentAngle: (c: any) => { if(c === 0) return 2; } } }); // and then from 2 to 1

That is amazing! I think it will work, I just have to modify this function a bit because my Timeline already exists, so I don't have to return a new one. I will post the results here, if I have some further questions. Thank you for your help!!

Hi there! Let's say I have the following arrays with just numbers: [0, 0, 0, 0] and [40, 50, 75, 80] How do I interpolate from the first to the second, using staggering/cycling (with GSAP)? (And with staggering I mean, first do the first item, then after some delay, do the next). Note: I have already converted the single number values to objects so that GSAP can work with them (so [{y: 0}, {y: 0}] and so forth I am not working with DOM elements directly at the moment, I just want to interpolate the values, and to control this in my timeline