[Destroying and Reinitializing Timeline]

Hey Guys,

 

@PointC thanks so much for your help, you definitely saved me a few hours of work today! I owe you a beer!

 

I'm going to continue fleshing this out, I'll share the finished product with you once I'm done

 

Jamie

[Destroying and Reinitializing Timeline]

Hey Guys, 

 

I'm a bit of a GreenSock noob and I'm hacking away at something which I think I have almost working. I have a series of SVGs running down the page, used to create one responsive, interlinked path which follows the content down. 

 

I have an 'orb' which is supposed to follow the user down the path as the user scrolls. As I'm using multiple SVGs combined to create what looks like a single path, I am having to detach the orb from one SVG and append it into the next one as it reaches the end of each path.

 

It's mostly working, but I'm struggling with the killing / reinitialization of the orb as it transitions from one SVG to the next. Using killAll seems to almost work, but the animation 'jitters', I presume as I'm calling KillAll on scroll it is constantly being killed / reinitialized. 

 

Hopefully the codepen example will help, would really appreciate someone more experienced to take a look and shed some light on where I'm going wrong!

 

Thanks,

See the Pen JvQaoV by team (@team) on CodePen