Horizontal Scrolling Section with Parallax and Velocity Skew Effects

Step 1: Setting up the Structure

The structure is simple. You have a wrapper containing items, which could be Webflow CMS items or static elements. The idea is to move this wrapper horizontally based on the scroll position, creating a horizontal scroll effect.

<div id="horizontal-section">
  <div class="wrapper">
    <div class="item" style="background-image:url('your-image.jpg');"></div>
    <!-- More items here -->
  </div>
</div>

• Wrapper: Contains all the items that will scroll horizontally.
• Items: The individual elements that will participate in the parallax and skew effects. In this example, they also have background images pulled dynamically from a CMS.

Step 2: Horizontal Scrolling Effect

The horizontal scroll effect is achieved by animating the X position of the wrapper as the user scrolls down the page. The scroll trigger pins the section, meaning it stays fixed in place while its contents move horizontally.

function initScroll() {
  let wrapperTween = gsap.to(wrapper, {
    x: () => {
      const itemWidth = items[0].offsetWidth;
      const marginRight = parseInt(getComputedStyle(items[0]).marginRight, 10);
      const distance = (itemWidth + marginRight) * items.length;
      return (distance - window.innerWidth) * -1;
    },
    ease: "none",
    scrollTrigger: {
      trigger: horizontalSection,
      pin: true,
      start: "top top",
      end: () => `+=${items[0].offsetWidth * items.length}`,
      scrub: 1,
      invalidateOnRefresh: true,
    },
  });
}

• wrapperTween: Animates the wrapper's X position to the left, effectively creating a horizontal scroll as the user scrolls vertically.
• ScrollTrigger: Pins the section, ensuring it stays in place while the content scrolls.

Step 3: Parallax Effect

The parallax effect moves the background of each item at a different rate compared to the horizontal scroll, giving a 3D depth effect.

items.forEach((item) => {
  gsap.fromTo(
    item,
    {
      backgroundPosition: "0 50%", 
    },
    {
      backgroundPosition: "100% 50%", 
      ease: "none",
      scrollTrigger: {
        trigger: item,
        containerAnimation: wrapperTween,
        start: "left right",
        end: "right left",
        scrub: true,
      },
    }
  );
});

• Background Movement: As each item moves horizontally, its background image animates from left to right, creating the parallax effect.
• Container Animation: The parallax is synced with the horizontal scroll through the containerAnimation feature.

Step 4: Velocity-Dependent Skew Effect

The skew effect responds dynamically to the scroll velocity, adding a subtle skew to the items when the user scrolls faster.

function applySkewEffect() {
  let proxy = { skew: 0 }; 
  const skewSetter = gsap.quickSetter(".item", "skewX", "deg"); 
  const clamp = gsap.utils.clamp(-20, 20); 

  ScrollTrigger.create({
    onUpdate: (self) => {
      const skew = clamp(self.getVelocity() / -200);
      if (Math.abs(skew) > Math.abs(proxy.skew)) {
        proxy.skew = skew;
        gsap.to(proxy, {
          skew: 0,
          duration: 0.8,
          ease: "power3",
          overwrite: true,
          onUpdate: () => skewSetter(proxy.skew),
        });
      }
    },
  });
}

• Proxy Object: Keeps track of the skew value, ensuring smooth transitions.
• Velocity-Driven Skew: The skew effect becomes more extreme with faster scroll speeds and gradually returns to normal when the scrolling stops.

Step 5: Putting It All Together

Finally, initialize both the horizontal scroll and skew effects:

initScroll();
applySkewEffect();

Once you have everything set up, publish your page and watch as your content slides horizontally while responding to scroll velocity and animating with a parallax effect. This kind of interaction keeps users engaged and adds depth to your design.

Conclusion

This approach to horizontal scrolling with parallax and velocity skew brings a polished, dynamic feel to your website. It's perfect for portfolios, case studies, or any content that benefits from strong visual storytelling.

By combining Webflow CMS with GSAP's ScrollTrigger plugin, you can create rich animations without overwhelming your users, keeping the experience smooth and enjoyable.

‍