Jump to content
Search Community

Splitting animation time between tweens

Richard Lindsay test
Moderator Tag

Recommended Posts

Hi everyone,

 

I am trying to create a circular progress bar and have everything working except the timing.

 

As you can see, the first semi circle finishes its transform and then the second begins but I need them to be fluid so that there is no pause.

 

The second one might never complete an entire 180 so I need to calculate and split the time proportionally between both tweens.

 

Any help would be great. Thank you for your time.

 

Richard

See the Pen xxdNbqd by richard_lindsay (@richard_lindsay) on CodePen

Link to comment
Share on other sites

 

Hey there Richard ,


I may very well be proved wrong here, but I don't think there's a way to make this fluid with two tweens - even with no easing applied. I assume there will always be a little jump as the second tween renders.

Maybe there's a way we can solved this using one tween though - what exactly are you trying to accomplish?

Link to comment
Share on other sites

my advice would be to

  • create 1 timeline that does the full circle animation.
  • tween the progress of that timeline to any value you want

below the progressTl shows the syntax for tweening the progress of the circle's timeline (tl).

you can create tweens any way you want and pass them the progress from the data attributes or whatever.

 

See the Pen mdmYVEL?editors=1010 by snorkltv (@snorkltv) on CodePen

 

hopefully this points you in a direction that works for you. 

 

also, if you just need to animate the stroke of a circle, it would be much easier using DrawSVG: 

 

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