[Splitting animation time between tweens]

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

[Splitting animation time between tweens]

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

[Animate in place with ScrollMagic pin]

Brilliant again.

 

Thank you so much

[Animate in place with ScrollMagic pin]

Hi again,

 

I'm actually trying to have two SVGs animate within the one pin. Is that possible? I've updated my original pen and the 2nd instance of the animation makes the page jump.

 

Thanks again for your time.

[Animate in place with ScrollMagic pin]

Wow, thank you so much.

 

Will take a look, thanks again.

[Animate in place with ScrollMagic pin]

Hi folks,

 

I'm trying to use ScrollMagic's pin feature to animate the fills of an SVG.

 

I want the section in the pen to be the height of the SVG and when the middle of the section reaches the middle of the viewport, the animation should start happening. However, I don't want the space below the SVG. I want to be able to see the wheat header and footer tight to the section and for the page to animate without scrolling. When the animation is finished scrolling should resume.

 

Adding pin creates the space for the animation to happen but pushes the footer down the page. Adding pushFollowers: false doesn't work either as the animation moves past the footer.

 

I hope I've explained myself.

 

Thanks for your time.

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