Jump to content
Search Community

ScrollTrigger: animating SVG element between sections

Pageking test
Moderator Tag

Go to solution Solved by PointC,

Recommended Posts

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

Link to comment
Share on other sites

  • Pageking changed the title to ScrollTrigger: animating SVG element between sections

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.

:)

  • Like 1
Link to comment
Share on other sites

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.

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...