Destroying and Reinitializing Timeline

[j.burleigh1]

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

[GreenSock]

Hm, I don't have time to rewrite all the code and troubleshoot at the moment, but I'll offer a few things:

1. There's no need for killAll(), especially in every scroll event.
2. It looks like you're re-creating your entire tween on every single scroll event (extremely inefficient). I'd add some conditional logic that only recreates the tween when absolutely necessary.
3. Is there a particular reason you don't want to just chain all 3 bezier animations together and then adjust the progress value of that one timeline? I didn't quite understand why you felt the need to be juggling between them, killing/recreating so often, etc. Seems cleaner to just create them all once, drop 'em into a TimelineLite and scrub the progress value accordingly. But maybe I'm missing something. 
4. If your goal is to drop all the animations from a timeline, you can use timeline.clear() instead of the brute-force, global TweenMax.killAll(). 

I hope that at least nudges you in the right direction

[PointC]

Hi @j.burleigh1

 

Welcome to the forum.

 

I was gonna suggest the same thing about one timeline and linking the progress() to scroll. Here's a quick fork of your demo with one timeline.

 

See the Pen ZRWbEX by PointC (@PointC) on CodePen

 

Hopefully that helps a bit. Happy tweening and thank you for being a Club GreenSock member.

 

[Carl]

Nice work, Craig!

[j.burleigh1]

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