Jump to content
Search Community

Intercept animated value to start from somewhere else

fabiantjoeaon test
Moderator Tag

Warning: Please note

This thread was started before GSAP 3 was released. Some information, especially the syntax, may be out of date for GSAP 3. Please see the GSAP 3 migration guide and release notes for more information about how to update the code to GSAP 3's syntax. 

Recommended Posts

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

 

Link to comment
Share on other sites

5 minutes ago, fabiantjoeaon said:

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?

 

I'm still confused what you're asking. Like this?

 

See the Pen bxKpad by osublake (@osublake) on CodePen

 

  • Like 3
Link to comment
Share on other sites

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!

Link to comment
Share on other sites

Sorry, I'm still confused. The canvas arc method is pretty flexible.

https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/arc

 

So you may need to set and/or tween the start angle, and use the anticlockwise flag to control the direction. Fork my demo, and try to close to what you're going after. 

 

See the Pen NLzrpg by osublake (@osublake) on CodePen

 

 

  • Like 2
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

11 minutes ago, fabiantjoeaon said:

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

 

Okay. That confused me.

 

So like this then?

 

See the Pen mGKEZm by osublake (@osublake) on CodePen

 

 

  • Like 4
  • Thanks 1
Link to comment
Share on other sites

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 account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...