Jump to content
Search Community

Synchronization animations with Draw SVG

Baret test
Moderator Tag

Go to solution Solved by Baret,

Recommended Posts

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

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?

  • Like 4
Link to comment
Share on other sites

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

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