ScrollTrigger: animating SVG element between sections

[Pageking 3 Likes (Newbie)]

Hi all, first time posting here so sorry if I forget to include something, but here we go...

 

I'm trying to animate this SVG between different sections (wrappers) but I can't figure out why my animation keeps restarting from the original position (the top of the body). I'd like to animate the SVG from the previous position.

So if you scroll from wrapper 3 to wrapper 2, the SVG animates from wrapper 3 to wrapper 2.

 

I'm feeling like I'm overseeing the obvious solution here, but I can't from the life of me come up with a solution. Any help is appreciated!

See the Pen KKQyqNq by wouter_pageking (@wouter_pageking) on CodePen

[PointC 14,183 Likes (Superhero)]

Hi @Pageking 

 

Welcome to the forum and thanks for being a Club member. 🎉

 

All those triggers set up their initial values from the top of the page, so in this case, I think setting immediateRender:false should give you the desired results.

See the Pen 2d44efb53ab184a0692ccc1f4c19ff29 by PointC (@PointC) on CodePen

 

Happy tweening and welcome aboard.

[Pageking 3 Likes (Newbie)]

Hi PointC, thanks for the reply!

 

Unfortunately this is still not exactly what I hope to accomplish. When I scroll back from Wrapper 3 to Wrapper 2, the SVG slides in from the top and not from the position it had on Wrapper 3. The same goes for scrolling back from Wrapper 2 to Wrapper 1.

[PointC 14,183 Likes (Superhero)]

So you want the blue target to just follow the sections up and down. Like this maybe?

See the Pen 5fc0b34c5556a20c14682af588926e38 by PointC (@PointC) on CodePen

 

Does that help?

[Pageking 3 Likes (Newbie)]

You're a lifesaver! I haven't used a ScrollTrigger like that before but now that I see it I understand completely.

 

I implemented it in the site I'm building and it works like a charm. Thank you!