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>
