Need help building this animation

[Aaron Christian]

Brand new to GSAP here, trying to grasp how I could build this.

 

The images/content will be coming from a CMS, so not sure how these should be layered on top of the animation. I can probably do it with some CSS and positioning... but still not 100% sure how to work that yet, wondering what the best approach is from the community.

 

The animation needs to pause in places when the image/content slide in.

 

Pretty sure I need to split these up into multiple timelines with some pauses/pins in it, but some help would be greatly appreciated!

 

Thank you all in advance!

 

 

 

 

See the Pen RwymxeB by aaronchristian (@aaronchristian) on CodePen

[Rodrigo]

Hi @Aaron Christian and welcome to the GreenSock forums!

 

First, thanks for being a Club GreenSock member and supporting GreenSock! 🥳

 

You're right about splitting things into different sections. Each section, except for the first one, should draw it's own SVG path (you should split the SVG path into the smaller parts for each section) and un-draw (for lack of a better word ) the previous section path at the same time.

 

Unfortunately we don't have the time resources to provide fully working solutions to our users, but we can give you as much support and advice as you create your animation. My advice at this stage would be to:

1. Create all the HTML and CSS so your sections look and are positioned as they need to be on the final production state.
2. Split your path in order to attach each part of the path to it's corresponding section.
3. Create the animations without ScrollTrigger. I know it sounds counter intuitive but many people in these forums with a lot of experience recommend the same, just get your animations working the way you want first without ScrollTrigger.
4. Add ScrollTrigger to your animations in order to fine tune the entire setup.

In this video @Cassie gives super valuable tips on how to create your ScrollTrigger based animations:

Also you can use this example from the GreenSock collection as inspiration as I believe it has a few elements that could come in handy for your project:

See the Pen rNOBLBV by GreenSock (@GreenSock) on CodePen

 

Finally, as I said before, if you have any GSAP related questions during your process, don't hesitate to drop by here in the forums and we'll help you as much as we can. Don't forget to include a minimal demo, please.

 

Happy Tweening!

[Aaron Christian]

A little old, but i eventually did manage to finally understand the whole timeline based approach.

 

Got it working with the Layout builder in the Drupal CMS platform  

 

https://teachforall.org/our-purpose

[Rodrigo]

Hey Aaron,

 

Is great to hear that you got it working and thanks for posting back with the results, looks really nice!

 

Great job!! 👍👏

 

Happy Tweening!