Horizontal scroll

GSAP (GreenSock Animation Platform) is a feature-rich animation library that allows us to create dynamic effects in web apps, games, and interactive stories. With GSAP anything can be animated on the browser, allowing developers to create seamless animations triggered by scrolling, opening up a world of possibilities for enhancing user engagement.

Here, we will learn how to use the ScrollTrigger plugin from GSAP to create engaging horizontal scroll animations. We will start with the basics of horizontal scrolling and the fundamentals of GSAP and ScrollTrigger. Finally, we will guide you through a step-by-step tutorial to help you create a beautiful horizontal scroll animation.

Understanding Horizontal Scroll Animations

When users scroll over a webpage, objects on the page are animated horizontally, giving websites more depth and interactivity. Horizontal scrolling, as opposed to conventional vertical scrolling, can produce a distinctive storytelling experience by engrossing readers in the story or dynamically navigating them around the content.

Introducing the GSAP ScrollTrigger plugin

GSAP is a JavaScript package well-known for its versatility and performance when it comes to producing high-quality online animations. Developers can utilize GSAP's ScrollTrigger plugin to trigger animations based on scroll position, allowing animations to be seamlessly integrated with user interactions.ScrollTrigger can perform different actions on an animation (play, pause, resume, restart, reverse, complete, reset) when entering/leaving the defined area or viewport.

ScrollTrigger provides a variety of options for specifying trigger locations, animation directions, and easing functions, providing developers complete control over their animations. ScrollTrigger simply allows you to fade components into view, animating based on scroll direction, and producing elaborate parallax effects.

Step-by-Step Guide:

Step 1: Set Up Your HTML Structure

To start, create a simple HTML structure for your animation of a horizontal scroll. To allow horizontal scrolling, define a container element to host your content and give it a fixed width that is more than the viewport width. Put the items you want to animate horizontally inside the container.

<div class="container scroll-container">
  <div class="panel scroll-content">
    <!-- Frist Content to be horizontally animated -->
  </div>
<div class="panel scroll-content">
    <!-- Second Content to be horizontally animated -->
  </div>
<div class="panel scroll-content">
    <!-- Third Content to be horizontally animated -->
  </div>
</div>

Step 2: Style Your Elements

Style your container and content elements using CSS to ensure proper layout and positioning. Set overflow-x to "scroll" for the container to enable horizontal scrolling.

.scroll-container {
  width: 100vw;
  overflow-x: scroll;
}

.scroll-content {
  width: 200vw; /* Twice the viewport width for demonstration */
  white-space: nowrap; /* Prevent content from wrapping */
}

Step 3: Initialize GSAP and ScrollTrigger

Add GSAP and ScrollTrigger into the project you are working on by installing the libraries or connecting to them from a CDN. To begin using GSAP and ScrollTrigger functionality, initialize them in your JavaScript file.

// Initialize GSAP and ScrollTrigger
gsap.registerPlugin(ScrollTrigger);

Step 4: Create the Animation

Define the animation using GSAP, specifying the target elements and desired properties. Utilize ScrollTrigger to trigger the animation based on the scroll position.

// Define the animation
gsap.registerPlugin(ScrollTrigger);

let sections = gsap.utils.toArray(".scroll-content");

gsap.to(sections, {
  xPercent: -100 * (sections.length - 1),
  ease: "none",
  scrollTrigger: {
    trigger: ".scroll-container", 
    pin: true,
    scrub: 1,
    snap: 1 / (sections.length - 1),
    end: () => "+=" + document.querySelector(".scroll-container").offsetWidth
  }
});

Let's break down the code we wrote, when the viewport/section we need to scroll reach scrolltrigger will get the triggering class i.e. scroll-container start creating the horizontal scroll. There are many properties to play with the scroll trigger but we need a few for the scroll we want so, we use pin a property that pins the animated elements in place during scrolling. snap is to scroll snap. CSS scroll snapping allows you to lock the viewport to certain elements or locations after a user has finished scrolling. xPercent defines the horizontal movement of the Scroll-contentelements. Scrub determines the intensity of the scrubbing effect, which is a visual effect that adjusts the animation speed based on the scroll speed. Scrub value 1 means that the animation follows the scroll position precisely

Demo

https://codepen.io/oldskool123/pen/mdrrbyo

Conclusion

With the help of GSAP's ScrollTrigger plugin, we can easily create visually appealing horizontal scroll animations that can improve user experiences and add smooth, dynamic effects to websites. By playing around with various scroll triggers, animation directions, and easing routines, you can unlock your imagination and create engaging storytelling experiences for your audience. So, make the most of GSAP and ScrollTrigger's capabilities and create some amazing animations for your website!