Not enough?
I've also added some Smooth Scroll effect with Lenis!
Start by defining the HTML structure for your page.
You should have a container for the content that will be horizontally scrolled,
and within that container, create sections (panels) that will be horizontally scrolled.
Time for some CSS, remember to add a 'hidden' overflow-x to the body and a 'flex' display to the container.
Register the ScrollTrigger plugin for GSAP.
Select all elements with the class "panel" and stores them in an array called sections.
Initiate a GSAP animation that targets the sections (panels) for horizontal scrolling.
Animate the xPercent property of the sections.
Specify the easing function for the animation.
"none" means a linear scroll, resulting in constant speed as you scroll.
Specify the element that triggers the animation. ('.container')
Pin the trigger element while the animation is active, creating the appearance of horizontal scrolling.
Make the animation scrub 1:1 with the scroll.
Specify how the animation snaps to each section.
Determine when the animation ends. It's set to be the total width of all sections.