Different scrollbars for same width containers (Scrolltrigger)

[Michael71]

Hello long time since I posted here.

 

I'm trying to align a drawpath svg (which is working nicely with Scrolltrigger) with a simple timeline animation (the line increasing in width) but since the timeline can be larger than the viewport I thought I could add it in a container with the same width as the drawpath svg container (3000px) but they seem to have different scrollbar width and so they don't sync correctly. Any ideas are appreciated!

See the Pen rNMxLvL by 7linternational (@7linternational) on CodePen

[ZachSaucier]

Hey Michael. This is an implementation question and not really related to GSAP so we may not have the capacity to help you out. I encourage you to log all of the relevant values to see if they match what you expect. With that being said, perhaps a nice fellow like mikel or akapowl will come by and help  

[Michael71]

@ZachSaucierI understand I was just wondering why would the ScrollTrigger set on two containers with the same width would show two different scrollbars and thus being out of sync with one another.
 

[akapowl]

 

Hey @Michael71

 

I had to fiddle around quite a bit, before I found what I think could be the problem.

 

I don't think there is too much wrong with the ScrollTriggers you set up.

 

Actually, your code just appears to be a bit messy at some points.

For example, if you check your console, you will notice, that you miss-spelled two element IDs in your JS.

In your HTML you have one </div> closing tag too much and also - and this is the actual reason, the scrollbars have different lengths - your div.big as you put it in your HTML doesn't quite work as you probably thought it would.

 

I just removed it, and instead set the width of 3000px to the .container directly in the following demo.

Because the SVG was offset then, I translated it to the left by 25vw so it's in viewport for the purpose of this demo at least.

Edit: Got rid of that translation again and simply just set the height of the SVG to 500px and width to auto,

 

The width leads me to the next point that I noticed, when I set the ends to both your ScrollTriggers to '+=100%' at one point: 

What you actually would or would want to consider for your ScrollTriggers in all this, isn't the offsetWidth (which is the same for both your scrollers since they both span over the width of the window) but the scrollWidth instead - which, if you take a look at the console differs by 32px; the width of that last item in your .timeline. You could accomodate for this, by setting in the end of the ScrollTriggers - e.g. by setiing end: "+=100%-=32px". The Scrollbars would move 'in sync then' but they would still have a slightly different length each, so probably easiest and best would be just setting the width of the container to 3032px instead of 3000px.

 

You'll notice, that now the SVG won't be pinned for the whole scroll-process, so you probably should consider setting up different triggers for the pinning of both those things you have and for their animations themselves, with the pinning ScrollTriggers having a longer 'duration' than the animating ScrollTriggers by the amount, that your .timeline overflows the window. But that is just a guess in the dark at this point because my head is sort of smoking and I am out of time. You could give it a shot yourself, though.

 

See the Pen 6eda74f5dd525f4cf568ddeac7e6bd44 by akapowl (@akapowl) on CodePen

 

 

Hope this was somewhat helpful.

 

Cheers,

Paul

 

[Michael71]

Really appreciate this detailed explanation it really helped out immensely!
I guess the only thing that is still unclear to me is how exactly `end` works, I mean according to docs when setting the end to `bottom right` should align the end of the animation with the end of the scrollbar right? So that would make it not scroll at all (which is the requirement here), and even if I set it to 4000px (which is larger than the scrollbar) it still scrolls when the scrub reaches towards the end.
On my example by omitting `end` the Draw SVG did draw without scrolling at the end but still unsure why this happens.

[akapowl]

 

Back to it with a clearer mind now:

It scrolls at the end, because the container is set to a width of 3000px and the SVG has a width of about 1400px in my demo, so at the end it naturally scrolls to the end of that container. Does that make sense?

 

Since you don't actually need it to scroll at all, you would also not actually have to set a specific width to the container, but simply just set the end of your ScrollTrigger to whatever amount you need it to be scrollable - the pinSpacing will then make it scrollable for you, so to say.

 

For the other part you'd need to set up two different triggers though, since you need the scrolling at some point, but want it to be pinned for a shorter duration than the duration that the animation takes to play. So in the following demo I removed the pin from the .timeline ScrollTrigger, set its end and also the SVG-ScrollTrigger's end to '+=3032px' - the width set to your timeline - so they both have the same 'duration' and run in sync. This way at the very end, the red line would animate over your '2020' point htough, which I accomodated for by setting a max-width of '3000px' to #theline.

 

I added an extra ScrollTrigger that only handles the pinning-part with the end set to '+=100%' - the offsetWidth of that element so to say. So the animation will run with no scroll now for the 'duration' equivalent to the width of the .timelinecontainer in the window, and then it becomes scrollable. 

 

Here is a demo for all that working together

 

See the Pen 989ad3bbfca6e439badc83f93d6c7186 by akapowl (@akapowl) on CodePen

 

 

 

 

On 12/5/2020 at 7:59 AM, Michael71 said:

I guess the only thing that is still unclear to me is how exactly `end` works

 

When pinning you can actually set the end to whatever amount you like, as you see - the question always is, what is that amount supposed to be referring to.

If you use values like '+=100%', if I am not mistaken, that always refers to the amount of space the trigger-element actually takes in the window, but you actually want to make it dependent on the scrollWidth and not the offsetWidth - and then again you don't want it to be dependent on that width of the element you are referring to, but some other element's - thus it becomes quite complex to wrap your head around.

 

 

Cheers

Paul

 

[Michael71]

1 hour ago, akapowl said:

the pinSpacing will then make it scrollable for you

 

I was totally missing that part, thanks for highlighting this.

Amazing solution, especially the third scrollTrigger that was very insightful. ScrollTrigger is a powerful tool but it takes some getting used to it.