GSAP, Scroll Animation, Elementor

How to Create a Horizontal Scroll Section in Elementor Free + Pro

Learn how to implement an engaging horizontal scroll animation on your website using Elementor Free or Pro – no additional plugins required

Horizontal scrolling effects can transform a standard webpage into an engaging, storytelling experience. Whether you’re creating timelines, portfolios, or panoramic views, this technique adds a professional touch to your website. This guide will walk you through implementing a horizontal scroll effect using Elementor, with both free and pro versions supported.

Understanding the Basic Structure

The horizontal scroll effect relies on a specific container structure:
– A main scroll container
– A scroll content container
– Individual panel sections
– Vertical containers for top and bottom
This hierarchical setup ensures smooth transitions and proper animation behavior.

Setting Up the Scroll Container

The primary scroll container requires specific settings for optimal performance:
– Full width (100%)
– Minimum height of 100vh
– Zero gaps
– Hidden overflow
– Custom CSS class: “scroll container”
– Transition and overscroll behavior modifications through CSS

Configuring the Scroll Content Container

The scroll content container serves as the wrapper for your horizontal panels:
– Full width setting
– Auto height configuration
– 100vh height
– Zero margins and padding
– Custom CSS class: “scroll content”
– Direction toggle between row horizontal (for animation) and column vertical (for editing)

Creating Panel Sections

Each horizontal panel requires careful configuration:
– 100% width
– 100vh height
– Zero gaps and margins
– Custom flex-shrink setting of zero
– Individual styling options for visual distinction

Implementation of GSAP Animation

The animation relies on GSAP (GreenSock Animation Platform) with ScrollTrigger:
– HTML widget placement at the bottom of scroll content
– Timeline configuration with customizable scrub options
– Marker settings for development purposes
– Start and end points for animation timing
– X-value movements for smooth transitions

Customization Options

The setup allows for various adjustments:
– Marker visibility toggle for development/production
– Delay settings for smoother corner transitions

Technical Considerations

Several important factors ensure proper functionality:
– Exact setting implementation is crucial
– Container direction must be set correctly for editing and viewing
– CSS code placement varies between Elementor Free and Pro
– Additional animations can be incorporated within the scroll trigger

Best Practices

To maintain optimal performance:
– Follow container settings precisely
– Toggle between horizontal and vertical views when needed
– Ensure proper HTML widget placement
– Disable markers before publishing

Conclusion
This horizontal scroll implementation offers a powerful way to enhance website interactivity. While it requires attention to detail during setup, the result is a professional, smooth-scrolling experience that can significantly improve user engagement. Whether using Elementor Free or Pro, this technique provides a premium feature without the need for additional plugins.

The versatility of this implementation makes it suitable for various applications, from storytelling to product showcases, while maintaining compatibility with both Elementor versions ensures accessibility for all users.

GSAP Code

Place the HTML Widget as the last item in your Scroll Container and add this code there or in the Elementor Custom Code

Copy Code Copied Use a different Browser


<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".scroll-content");
  let scrollContainer = document.querySelector(".scroll-container");

  // Timeline for horizontal scrolling and parallax effects
  let scrollTimeline = gsap.timeline({
    scrollTrigger: {
      trigger: scrollContainer,   // The element that will trigger the scroll animation
      pin: true,                  // Pins the element, making it fixed while scrolling
      scrub: 1,                   // Syncs the animation with the scroll position
      start: "top top",           // Animation starts when the top of scrollContainer meets the top of the viewport
      end: () => "+=" + container.scrollWidth,  // Sets the end point based on the width of the scroll-content
      markers: false,              // Optional, adds markers to visualize the start and end points for debugging
      invalidateOnRefresh: true   // Refreshes the end position on window resize for responsive adjustments
    }
  });

 // Add a small delay at the start (pause with no movement)
scrollTimeline.to(container, { x: 0, duration: 0.1 });

// Add Horizontal Scroll to Timeline
  scrollTimeline.to(container, {
    x: () => -(container.scrollWidth - window.innerWidth) + "px",
    ease: "none"
  });

// Add a small delay at the end
scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>

CSS Code

Copy Code Copied Use a different Browser


.scroll-container{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width:100% !important;
    Height: 100vh !important;
    overflow: hidden !important; 
    margin: 0px !important; 
    padding: 0px !important;
}


.scroll-content{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width: auto !important; 
    height: 100vh !important; 
  flex-wrap: nowrap !important; 
  gap: 0 !important; 
  flex-direction: row !important; 
  margin: 0 !important; 
  padding: 0 !important; 
}


.panel {
  display: flex !important; 
  width: 100vw !important; 
  height: 100vh !important; 
  flex-grow: 1 !important; 
  flex-shrink: 0 !important; 
  flex-basis: auto; 
  box-sizing: border-box !important; 
}

2. Code for the Elementor Free Version

Follow exactly the same steps for the setup instead of adding the CSS Codes from Above. The CSS Code will be in the following code in the Styles included. You can also add the CSS Code to your wordpress Custom CSS and add the GSAP Code in the HTML Widget.

Or just copy all the code below and this into the HTML widget.

Copy Code Copied Use a different Browser


<style>
   .scroll-container{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width:100% !important;
    Height: 100vh !important;
    overflow: hidden !important; 
    margin: 0px !important; 
    padding: 0px !important;
}

.scroll-content{
    transition: none;
    overscroll-behavior: none;
    display:flex !important; 
    width: auto !important; 
    height: 100vh !important; 
   flex-wrap: nowrap !important; 
   gap: 0 !important; 
   flex-direction: row !important; 
   margin: 0 !important; 
   padding: 0 !important; 
}

.panel {
  display: flex !important; 
  width: 100vw !important; 
  height: 100vh !important; 
  flex-grow: 1 !important; 
  flex-shrink: 0 !important; 
  flex-basis: auto; 
  box-sizing: border-box !important; 
}

</style>


<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/gsap.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.5/dist/ScrollTrigger.min.js"></script>

<script>
  gsap.registerPlugin(ScrollTrigger);

  let container = document.querySelector(".scroll-content");
  let scrollContainer = document.querySelector(".scroll-container");

  // Timeline for horizontal scrolling and parallax effects
  let scrollTimeline = gsap.timeline({
    scrollTrigger: {
      trigger: scrollContainer,   // The element that will trigger the scroll animation
      pin: true,                  // Pins the element, making it fixed while scrolling
      scrub: 1,                   // Syncs the animation with the scroll position
      start: "top top",           // Animation starts when the top of scrollContainer meets the top of the viewport
      end: () => "+=" + container.scrollWidth,  // Sets the end point based on the width of the scroll-content
      markers: true,              // Optional, adds markers to visualize the start and end points for debugging
      invalidateOnRefresh: true   // Refreshes the end position on window resize for responsive adjustments
    }
  });

 // Add a small delay at the start (pause with no movement)
scrollTimeline.to(container, { x: 0, duration: 0.1 });

// Hinzufügen des horizontalen Scrollens zur Timeline
  scrollTimeline.to(container, {
    x: () => -(container.scrollWidth - window.innerWidth) + "px",
    ease: "none"
  });

// Add a small delay at the end
scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });
</script>