ScrollTrigger between multiple sections with animated SVG layers

[mado1]

Hi,

I am working on this idea of scrolling through sections with SVG's. Those SVG's have layers that I animate with ScrollTrigger.

There are 3 sections 'Hero scene', 'City scene' and 'New section' (in the future there might be more sections). At the moment I am a bit stuck on how to continue, specifically how to transtition from the 'City scene' to the 'New section'. Preferably I have the City pinned/snapped so that those layers will go down where then the layers from the 'New section' will animate from underneath. Basically how the hero transitions into the city. 

Also I am not sure if this is the right way of doing this. It could be that I need to change the way I have setup those sections and that there is a better way and more scalable way when adding more sections that flow into one another.

If there's someone who can help me get into the right direction it would be much appreciated!

PS
If needed, I can transfer my example codepen to stackblitz (https://stackblitz.com/@gsap-dev/collections). Because those SVG's are pretty large and I can imagine for readability it would be easier.

Greetings,
Mark

For a better view I recommend viewing the 'Full Page View' as it is not optimized for smaller screen sizes
----

 

See the Pen xbOOjQq by nrDEV (@nrDEV) on CodePen.

[GSAP Helper]

We love helping with GSAP-related questions, but unfortunately we just don't have the resources to provide free general consulting, logic troubleshooting, or "how do I recreate this cool effect I saw on another site?" tutorials. Of course anyone else is welcome to post an answer - we just want to manage expectations.  

 

If you're looking for ScrollTrigger effects, I'd recommend looking at the demos at https://codepen.io/collection/DkvGzg and https://codepen.io/collection/AEbkkJ - you may be able to use one of those as a jumping-off point. 

 

You are welcome to post in the "Jobs & Freelance" forum for paid consulting, or contact us directly. 

 

The advice I could give you is to use the position parameter so the animations happen at the same time or with little separation, that is start the next animation before the previous one is completed. Also is worth mentioning that this falls into the motion design category, that is design how to go from one scene to the other in a way that feels as seamless as possible. Again this falls beyond the help we provide in these free forums and is the job for a motion designer actually.

 

Finally you could try using the MorphSVG Plugin in order to perhaps animate some shapes of the background and foreground as well as the colors in order to approach this.

 

Otherwise, if you've got a GSAP-specific question just post that here along with a minimal demo and we'd be happy to take a look.