Trying to use drawSVG and make the animation consistent across different desktop screen sizes

[petya]

Hello!

I'm trying to create an animated content using ScrollTrigger. I have 4 sections that fade in/out on scroll and I have a progress bar that animates when each section fades in. The issue that I'm having is trying to animate a curved SVG line and trying to match the start and end animation with the fading in of the first section.

Any help would be much appreciated!

 

See the Pen zYbpLvr by petia182 (@petia182) on CodePen

[mvaneijgen]

Seen that everything here depends on if the previous item has animated I would start by creating one timeline and put all your animations on that timeline then when you're happy with that animation add one ScrollTrigger to that global timeline to hook it up to scroll. 

 

Right now you have a timeline created on line 30 and then each tween has a ScrollTrigger, this is not how ScrollTrigger works. It either can be on single GSAP tweens or ScrollTrigger needs to control one timeline you can't have individual tweens on a timeline with a ScrollTrigger. 

 

To grow a path you can use DrawSVG (as you already do) and this should work .from(".curved-line path", { drawSVG: 0 }); to animate it from 0 to 100%

 

To emphasize, right now you're using around 10 ScrollTriggers! I would do it with one and one timeline, you'll see that then everything will be so much more simpler to handle.

 

Also you're using GSAP version 3.5.1 and we are currently at version 3.12.5! I highly recommend staying on the latest  version!

[mvaneijgen]

A really crude and fast example is something like this. I’ve placed some comments in your JS to better explain things, please be sure to read through them!

 

I've also changed some of your CSS so that every card has the same styles and sits right on top of each other. 

 

The ScrollTrigger code is commented out, but you can easily turn it on to see how it would work on scroll Hope it helps and happy tweening! 

 

See the Pen BabrJyv?editors=1010 by mvaneijgen (@mvaneijgen) on CodePen

[petya]

Thank you very much @mvaneijgen!!

[petya]

Hi again @mvaneijgen and thanks so much for your help!

 

I updated the code a little bit and things generally look ok. I am a bit confused about a couple of things:

• how can I set up the SCRUB only for the tracker line and not for the fade-in sections? Seems like I can't do that if I'm using 1 ScrollTrigger. Can I create 2 separate ScrollTrigger instances to handle that?
• is it ok to create to also create a separate ScrollTrigger for the PIN element? If I don't, the footer section overlaps.
• on-screen resize the whole animation breaks - are. Do you have an idea why this happens?
  
  Here is the updated codepen: 

  See the Pen XWGEVZg by petia182 (@petia182) on CodePen

[mvaneijgen]

9 minutes ago, petya said:

on-screen resize the whole animation breaks - are. Do you have an idea why this happens?

I've restructured your setup a bit and used different triggers elements, removed your pinning ScrollTrigger and used function based values (these get recalculated on ScrollTrigger.refresh(), which gets called if the screen resizes) 

 

13 minutes ago, petya said:

is it ok to create to also create a separate ScrollTrigger for the PIN element? If I don't, the footer section overlaps.

If you set up your trigger element and the start and end triggers correctly this is not needed.

 

14 minutes ago, petya said:

• how can I set up the SCRUB only for the tracker line and not for the fade-in sections? Seems like I can't do that if I'm using 1 ScrollTrigger.

Correct, either the whole ScrollTrigger gets scrubbed or none of it does. 

 

Quote

Can I create 2 separate ScrollTrigger instances to handle that?

You can, but that will require a lot of extra setup and thinkering, but if you're confidant in your skill you could surely get that to work. Personally I would just add labels to your timeline and then tell ScrollTrigger to snap to those labels, no setup required and will kinda create the same effect. See the docs for more info. https://gsap.com/docs/v3/Plugins/ScrollTrigger/

 

Again everything is possible with GSAP, you just have to put in the time and effort to get it to work. There are a lot of features build in to the tools and if you check the docs they all get explained. Personally I use codepen to try out new ideas, I usually then just keep forking my pen to try out different ideas, either because I think it could be better or my original idea was not working. Usually at version 10 I got something I'm happy with. Creating forks of your pen will allow you to fall back at earlier ideas if something new is not working. So if you're set on getting it they way you want, give it a go, but keep in mind there is only so much we can give support of on these free forums. Hope it helps and happy tweening! 

 

See the Pen xxBjbNW?editors=0010 by mvaneijgen (@mvaneijgen) on CodePen