Richard Lindsay

Thanks for all your suggestions. I ended up just animating the stroke-dashoffset of an SVG instead. https://codepen.io/richard_lindsay/pen/LYyoQbJ

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

Brilliant again. Thank you so much

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.

Wow, thank you so much. Will take a look, thanks again.

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.