Splitting animation time between tweens

[Richard Lindsay 2 Likes (Newbie)]

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

[Cassie 3,676 Likes (Superhero)]

 

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?

[Carl 10,740 Likes (Superhero)]

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: 

 

[mikel 4,742 Likes (Superhero)]

Hey @Richard Lindsay,

 

It could also be made a little more complicated.

 

See the Pen zYwQpBq by mikeK (@mikeK) on CodePen

 

Happy tweening ...

Mikel

[Richard Lindsay 2 Likes (Newbie)]

Thanks for all your suggestions.

 

I ended up just animating the stroke-dashoffset of an SVG instead.

 

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

[mikel 4,742 Likes (Superhero)]

 

Just for fun ...

 

See the Pen 3a56b74b4e34ba1e2acc1ce55a9bcf87?editors=1010 by mikeK (@mikeK) on CodePen

 

Happy scrolling ...

Mikel