[Intercept animated value to start from somewhere else]

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?

[Intercept animated value to start from somewhere else]

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.

[Intercept animated value to start from somewhere else]

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!

[Intercept animated value to start from somewhere else]

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?

[Intercept animated value to start from somewhere else]

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

 

[Interpolating using staggerTo: from one array w/ values to the next]

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

[Interpolating using staggerTo: from one array w/ values to the next]

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