scrolltrigger Use container's horizontal scrollbar instead of window scroller as Trigger

[isitayush]

Hi! I've been trying to use gsap scroll trigger & motion path plugin in combination. I'm trying to create a horizontal path scroller but on an inner container that overflows which I think should've made the inner container as the trigger. Somehow gsap refuses to work when I set the `sc-trigger` class on the container that overflows. I'm not sure if what I'm doing somewhat wrong.

- Goal: I want to use the inner scrollbar to move the car across the path instead of the window scrollbar. 

- nextjs-gsap repro: https://stackblitz.com/edit/stackblitz-starters-j4gryt?file=app%2Fpage.tsx

[mvaneijgen]

Hi @isitayush welcome to the forum!

 

instead of scrolling horizontally (because most computers don't have a horizontal scroll wheel and thus people are not expecting to scroll horizontally) most developers opted to scroll normally and move the element horizontally. When you set pin: true, in ScrollTrigger then everything works like people expect, but you can still have the effect of moving horizontal.

 

I've no idea how your code is setup. I don't use React nor Tailwind it couldn't get it to work properly. You should never animate your trigger element when using ScrollTrigger, but in this case I couldn't get it to work when using my new .trigger element, so this was the only way. 

 

I've created a timeline instead of a single tween and move ScrollTrigger to the timeline. I've add a new tween which move the container -4000px (this should be the with of the element, minus the current screen width) and at the same time moved played your car tween. Then in the ScrollTrigger I pin the .some-class element, this should be set to true, but probably Tailwind is setting some weird CSS which I can't change. Hope it helps and happy tweening! 

 

https://stackblitz.com/edit/stackblitz-starters-dh2buu?file=app%2Fpage.tsx%3AL22-L22,app%2Flayout.tsx

 

 

[isitayush]

Hi @mvaneijgen! Thank you so much. I've was able to follow the example and set up my own code with horizontal scroll. I ultimately wanted exactly that but I did not knew how to achieve it therefore I resorted to the inner container scrollbar. I still have slight trouble understanding how it came together. In my perspective, We first create a timeline with a scroll trigger. The trigger points to the outer  <div /> element.  I assume trigger is what tells gsap that "Hey! Use the scrollbar for the entire wrapped content" and thereby outer div acts as a wrapper. Then we're binding two different tweens to the same trigger through timeline. (Both of them play at the same time as they aren't delayed.)

- First Tween moves the <main /> element to left (-4000px in this case).

- Second Tween moves the car on the path via MotionPathPlugin.

 

The part which I don't understand is the -4000px - current_screen.width. How should I calculate it if let's say I have an svg whose properties are as follow's & How do I tell gsap about it? (Should I just swap the value instead of 4000?). Let me also know if I'm wrong for any of the above as I'm still piecing this in my head.

<svg
	xmlns="http://www.w3.org/2000/svg"
	viewBox="0 0 6000 600"
	width={5300}
	height={600}
	preserveAspectRatio="xMidYMid meet"
	fill="none"
>
</svg>

 

[mvaneijgen]

11 hours ago, isitayush said:

The trigger points to the outer  <div /> element.  I assume trigger is what tells gsap that "Hey! Use the scrollbar for the entire wrapped content" and thereby outer div acts as a wrapper.

Maybe, I see it more as "hey, ScrollTrigger watch this element and then trigger something", eg the property start: "top top", tells ScrollTrigger start when the top of the element hits the top of the browser window and end: "+=4000 bottom", says when the top of the element + 4000px hits the bottom of the browser

 

11 hours ago, isitayush said:

The part which I don't understand is the -4000px - current_screen.width. How should I calculate it if let's say I have an svg whose properties are as follow's & How do I tell gsap about it? (Should I just swap the value instead of 4000?). Let me also know if I'm wrong for any of the above as I'm still piecing this in my head

Yeah if you know the value you could just change the 4000px to your known value or you could use Javascript to get the width of the element dynamically. 

 

Something which really helped me when starting with ScrollTrigger is just animating something on scroll. And also this video. Hope it helps and happy tweening! 

 

 

 

[isitayush]

Thank you! That really helps. I'm still very new to this and this was my first time building a tween. I'll try to approach animations first instead of scroll.