ScrollTrigger with large timelines

[cptain 4 Likes (Newbie)]

I'm building an SVG animation and I'm having trouble figuring out how I can incorporate a ScrollTrigger for my panels. My goal is to scale up the panels to their full size as far as the user is scrolled to a position that will allow them to view the animation. I'm not quite understanding how to do so in such a big timeline as this is the first time I'm creating something that is more than 10 lines of code with gsap. Any advice?

 

I apologize in advance if my code is sloppy and not as efficient as it could be.

 

Here's another codepen I made to try to test it out with less animations going on. 

See the Pen wvMbQdO by Cptain (@Cptain) on CodePen

See the Pen MWKdbKz by Cptain (@Cptain) on CodePen

[GreenSock 18,872 Likes (Superhero)]

5 hours ago, cptain said:

My goal is to scale up the panels to their full size as far as the user is scrolled to a position that will allow them to view the animation.

I read that a few times and I'm not sure what you mean, but is this what you want?

See the Pen d9ae35a3bf47dcd10cb75d177e83fa84?editors=0010 by GreenSock (@GreenSock) on CodePen

 

All I did was put each of them into its own timeline and attach a ScrollTrigger accordingly. There are more advanced things you could do, like leverage pinning and/or scrubbing but I didn't want to go overboard and confuse you. 

 

Also, do you know about setting defaults on timelines? You might be able to significantly cut down on the code by leveraging defaults. For example, almost all of the tweens have "duration: 0.5" so you can just set that once as a default on the timeline and be done. Actually, 0.5 is the default duration anyway, so you could even omit all those. And "power4.out" can just be "power4" because ".out" is the default type. You're not doing anything "wrong" - I'm just suggesting some tips that might reduce the amount of code you're writing. 

 

Happy tweening!

[cptain 4 Likes (Newbie)]

Wow, thank you so much! This is exactly what I needed. 🙏 

 

So, basically, I needed to just add a timeline for each panel instead of just having one. Also, I appreciate the tips on cutting down the code, great suggestions! 

 

One more question. Is it possible to also have the animation trigger only if the previous animation has finished first?  I'm gonna check the DOC again, but just throwing this out there in case I can't figure it out. 

 

On a sidenote, I can't thank you enough for developing such an amazing tool. I never thought it would be so easy to animate the web without losing my mind. 

[ZachSaucier 7,162 Likes (Superhero)]

Using defaults is one of the many tips to animate efficiently  

 

44 minutes ago, cptain said:

Is it possible to also have the animation trigger only if the previous animation has finished first? 

Sure, it's possible. But there's a logical conflict there: should the play state be determined by the scroll position or the animation state of the previous section? I recommend that you keep it the way that it is now. If you want to add more space between elements so it's harder for users to play multiple that might make sense.

 

If you really want that behavior and can't figure it out yourself let us know.

[cptain 4 Likes (Newbie)]

Awesome! Thanks again for the replies.