Baret Posted February 16, 2021 Share Posted February 16, 2021 Hello, With a cursor, I try to animate with Drawsvg the drawing of a circle (in yellow), t2 animation, which is synchronized with the arrow (in red), line 22, which appears shortly after the start of the cursor movement. I want the yellow circle animation to appear after the arrow, as if it were drawing the circle. I have not found a solution. Thank you for your help. See the Pen oNYWvqQ?editors=1111 by jmbaret (@jmbaret) on CodePen Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 16, 2021 Share Posted February 16, 2021 Hey Baret. First, some notes: How you're setting the properties in the onUpdate is very inefficient as it sets the properties every tick. I recommend using .set()s as a part of your timeline instead. Setting the same properties of the same objects to the same value in all of your tweens is inefficient. I'd use a single timeline for all of this. You could make use of GSAP's keyframes functionality but since you want to toggle the visibility of other elements at certain points maybe that's not the best option in this case. Why not set the values of your input using HTML instead of JS? Just adjusting for those things, you should get something like this: See the Pen oNYWgWW?editors=0010 by GreenSock (@GreenSock) on CodePen Much cleaner! But it's still not doing what you want it to do. There are still a couple of few things that make what you're trying to do difficult: Getting the correct easing for your arrow is difficult. This is difficult because your first segment is smaller than the rest of your segments. Two that come to mind immediately are: Adjust the duration of the first segment animation based on the proportion of its size compared to the others. Ditch the use of different animations for each segment and instead use a single animation for the entire path. If you do this you'd have to use a different method of showing the text (more on this later). Getting the DrawSVG animation synced with your arrow animation. Since it's a single path animation (instead of cut up into segments like the other) you would need to give it a duration equal to all of your segment animations. Another difficulty is the easing because unless the smaller segments all have a linear easing you'd have to either use a custom ease that matches whatever eases you use for each of the smaller sections or separate the animation into smaller segments. All in all, I'd probably use a different approach instead. For the animation after your morph, I'd probably use a single animation to move the arrow around the circle (like what you have for the DrawSVG part). Then inside of the onUpdate for that animation, I would check the progress. If it's over the progress threshold of when a text should show and that text is not already showing, then you should change its visibility to show it. Does that make sense? 4 Link to comment Share on other sites More sharing options...
mikel Posted February 16, 2021 Share Posted February 16, 2021 10 minutes ago, ZachSaucier said: All in all, I'd probably use a different approach instead. For the animation after your morph ... is this an option See the Pen YzpVPVr by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 4 Link to comment Share on other sites More sharing options...
ZachSaucier Posted February 16, 2021 Share Posted February 16, 2021 5 minutes ago, mikel said: ... is this an option That's exactly the type of approach that I was suggesting Thanks for making a demo! 2 Link to comment Share on other sites More sharing options...
Baret Posted February 16, 2021 Author Share Posted February 16, 2021 Thanks ZachSaucier for showing me how to simplify the code and for your suggestions. Thanks mikel for your codepen. As I'm new to Greensock, it helps me progress. I will work on my problem considering your help. I will keep you informed or ask for your help if needed Link to comment Share on other sites More sharing options...
Solution Baret Posted February 17, 2021 Author Solution Share Posted February 17, 2021 Hello, Here, I got to do what I wanted. I have made a summary of your answers. To synchronize the movement of the arrow and the drawing of the circle, I acted on the line offset 48, and the duration of each movement of the arrow. Thanks again See the Pen GRNmJoz by jmbaret (@jmbaret) on CodePen 2 Link to comment Share on other sites More sharing options...
mikel Posted February 17, 2021 Share Posted February 17, 2021 Hey @Baret, Looks great. Here as a motivation a hand coded SVG and some coding tricks. See the Pen JjbNrjr by mikeK (@mikeK) on CodePen Happy tweening ... Mikel 2 Link to comment Share on other sites More sharing options...
Baret Posted February 17, 2021 Author Share Posted February 17, 2021 Hey @mikel, Thanks for the codepen. I looked at the code. This is enough to give me ideas on what is possible to do with Greensock. I am really happy to use it. 1 Link to comment Share on other sites More sharing options...
mikel Posted February 17, 2021 Share Posted February 17, 2021 Hey @Baret, GreenSock should boost your business. Just tween it. You are welcome. Mikel 1 Link to comment Share on other sites More sharing options...
Recommended Posts
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 accountSign in
Already have an account? Sign in here.
Sign In Now