Jump to content
GreenSock

Search In
  • More options...
Find results that contain...
Find results in...
Baret

Synchronization animations with Draw SVG

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 post
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 post
Share on other sites
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

 

 

  • Like 4
Link to post
Share on other sites
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!

  • Like 2
Link to post
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 post
Share on other sites

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

  • Like 2
Link to post
Share on other sites

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

 

  • Like 2
Link to post
Share on other sites

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.

  • Like 1
Link to post
Share on other sites

 

Hey @Baret,

 

GreenSock should boost your business. Just tween it.

 

You are welcome.

Mikel

  • Like 1
Link to post
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.

×