Skip to Main Content

Create horizontal scroll in Elementor with GSAP animation libraries

In this step-by-step tutorial, I will show you how to create horizontal scroll in Elementor with the help of GSAP animation libraries

Create horizontal scroll in elementor

Recently, someone in the Elementor pro community asked a question on how to create a horizontal scroll in Elementor. When I gave my demo and codepen I used it on my project. The person has less knowledge of how to implement it. 

The person has zero knowlwdge in in html and css and JS

I thought what if I write an article showing how to do it step-by-step like how to remove unused CSS in elementor?

In this tutorial, I am going to show you how to create a horizontal scroll in Elementor using GSAP – GreenShock animation libraries (JS) and some custom CSS to fix the janky animation.

Basic requirements:

  • Make sure you enable “Flexbox Container” experiments in Elementor > Settings > Features – Ongoing Experiments > set the “Flexbox Container” to active
    Activate Flexbox Container experiments
  • Understand basic Flexbox CSS Properties.

Create a parent container-

In this first step we are going to create a parent container that wraps/holds all the child’s items with full-width enabled.

This is the most crucial step in this process because the container holds all the child items.

Items settings:

  1. flex-direction to Horizontal / Row (default state)
  2. Justify Content to Start.
  3. Align Items to Start
  4. Set the gap value to zero (0) &
  5. Wrap to Wrap

Parent Container Item's settings

We will change the item’s settings when everything is properly set up.

Give a Parent Container a unique CSS class name

Rather than using a selector CSS class to add our own custom CSS, we will define a unique CSS class for the parent container’s layout area. This way when we export our code, we can use it anywhere without causing any conflicts.

We have added a unique CSS class “container” to the parent container’s CSS class area.

Create child containers (flex-items) and place them inside the parent container 

Now, create your best designs place all the child containers inside the parent container, and stack vertically. 

Place all the child items inside the parent container

Give a child item a unique CSS class name (in this case Light)

left arrow Indicating on Elementor navigator widget

Just like giving a parent container a CSS class, we will do the same things to the child items or flex-items by providing a CSS class as a “panel“. Watch the video for reference. 

Flex-items CSS classes as panel

Add Custom CSS to child items

To stretch the child items container full width, we have to add a few lines of CSS to the Custom CSS area.  

Place the CSS in child items custom CSS area

    
.panel{
    transition: none;
    min-width: 100vw;
}

Set the Parent Container’s items Wrap settings to the default state.

As we can see from the first step settings, we have set up the parent container items wrap to wrap in the settings. To make the flex items (child items) horizontally, we have set the items wrap to nowrap or default state. See the image comparison below for reference –

Parent container's items wrap to wrap
Before
Parent container's nowrap or default state
after

After you uncheck the wrap icon, all the child items will collapse and stack together horizontally and you will see the scroll bar below.

Scrollbar will shown after you set wrap to nowrap

Let’s add some functionalities to the page, to do that we have to add JavaScript.

There are 2 ways to inject the script tag-

  1. Use Elementor custom code &
  2. Use 3rd parties plugins like code snippets or edit your child theme’s function.php file. 

In this example, I will use the code snippets plugin.

Create horizontal scroll in Elementor using GSAP and Elementor

Click the add new button to create a new snippet

click the add new button to add new snippet

Go to cdn.js and download gsap.min.js & ScrollTrigger.min.js

Make sure you download the latest version of the JavaScript and host locally on your server.

You can follow this guide on how to self-host assets on your server.

Below is the self-host method.

    
// Self-host Method

function gsap(){
    if( is_page (72)) {	
		wp_enqueue_script( 'gsap', '/wp-content/uploads/assets/gsap/gsap.min.js', array(), '3.11.4', 'all');
		wp_enqueue_script( 'scrollTrigger', '/wp-content/uploads/assets/gsap/scroll-trigger.js', array(), '3.11.4', 'all');	
		}
}
add_action('wp_footer','gsap', 2);

Or use the CDN option instead of hosting locally. Best fit if you’re not delivering any assets through CDN.

    
// CDN method
//Make sure you preconnect - "https://cdnjs.cloudflare.com" to improve site performance
//This ethod is not fully tested

function gsap(){
    if( is_page (2351)) {	
    	$base_url = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/';
		wp_enqueue_script( 'gsap', $base_url . 'gsap.min.js', array(), '3.9.1', 'all');
		wp_enqueue_script( 'scrollTrigger',  $base_url . 'ScrollTrigger.min.js', array(), '3.9.1', 'all');	
		}
}
add_action('wp_enqueue_scripts','gsap', 2);

Along with the 2 scripts (gsap and ScrollTrigger) above you need to add this extra JS below and create a new script and name as trigger.js

    
gsap.registerPlugin(ScrollTrigger);
	let sections = gsap.utils.toArray(".panel");
	let mm = gsap.matchMedia();
  // replace "=>" with "=>" arrow function otherwise it will not work
	// add a media query. When it matches, the associated function will run
	mm.add("(min-width: 800px)", () => {
		gsap.to(sections, {
			xPercent: -100 * (sections.length - 1),
			ease: "none",
			scrollTrigger: {
				trigger: ".container",
				pin: true,
				scrub: 1,
				snap: 1 / (sections.length - 1),
				end: () => "+=" + document.querySelector(".container").offsetWidth
			}
		});
	});

  1. If the code “above” is not working properly. Please copy and paste the code from here.
  2. If you don’t know how to self-host the assets, follow my remove unused CSS tutorial.

After you self-host the script, it should look this – 

Enqueue 3 scripts tag to the footer

Self-Host Method.

    
function gsap(){
//72 is the page number, you need to identify the current page for yourself
//trigger.js is the file I created and it should contains the code below.

/*
* gsap.registerPlugin(ScrollTrigger);
* 	let sections = gsap.utils.toArray(".panel");
* 	let mm = gsap.matchMedia();
*   // replace "=>" with "=>" arrow function otherwise it will not work
* 	// add a media query. When it matches, the associated function will run
* 	mm.add("(min-width: 800px)", () => {
* 		gsap.to(sections, {
* 			xPercent: -100 * (sections.length - 1),
* 			ease: "none",
* 			scrollTrigger: {
* 				trigger: ".container",
* 				pin: true,
* 				scrub: 1,
* 				snap: 1 / (sections.length - 1),
* 				end: () => "+=" + document.querySelector(".container").offsetWidth
			}
* 		});
* 	});
*/
    if( is_page (72)) {	
	
		wp_enqueue_script( 'gsap', '/wp-content/uploads/assets/gsap/gsap.min.js', array(), '3.11.4', 'all');
		wp_enqueue_script( 'scrollTrigger', '/wp-content/uploads/assets/gsap/scroll-trigger.js', array(), '3.11.4', 'all');
	
		wp_enqueue_script( 'trigger', '/wp-content/uploads/assets/gsap/trigger.js', array(), '1.0.0', 'all');			
}
}
add_action('wp_footer','gsap', 2);

CDN method- trigger.js need to hosted locally on your server

    
// CDN method
//You need to preconnect "https://cdnjs.cloudflare.com"
//This method is not fully tested

function gsap(){
    if( is_page (2351)) {	
    	$base_url = 'https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/';
		wp_enqueue_script( 'gsap', $base_url . 'gsap.min.js', array(), '3.9.1', 'all');
		wp_enqueue_script( 'scrollTrigger',  $base_url . 'ScrollTrigger.min.js', array(), '3.9.1', 'all');
		//Host trigger.js locally on your server
		wp_enqueue_script( 'trigger', '/wp-content/uploads/assets/gsap/trigger.js', array(), '1.0.0', 'all');
		}
}
add_action('wp_enqueue_scripts','gsap', 2);
       

This is how Google Bard explains-

The code defines a function called gsap(). This function checks if the current page is page 72. If it is, then the function enqueues three scripts:

  • gsap.min.js: This is the core GSAP library.
  • scroll-trigger.js: This is a plugin that allows you to create animations that are triggered by scrolling.
  • trigger.js: This is a custom script that you have created.

The enqueue_script() function takes the following arguments:

  • handle: The name of the script.
  • src: The URL of the script.
  • deps: An array of the names of any scripts that this script depends on.
  • ver: The version of the script.
  • in_footer: Whether the script should be enqueued in the footer or the header.

The add_action() function tells WordPress to run the gsap() function in the wp_footer hook. This hook is called when the footer of the page is rendered.

So, this code will enqueue the GSAP libraries and your custom script on page 72.

Now save change and activate the snippet. After you activate the snippet, your horizontal slide will work with some janky animation shown in the video below. 

To fix the issue, you need to add custom CSS to the parent container so it doesn’t cause any conflict with the Elementor transition effect.

Add Custom CSS to the parent container

To fix the janky animation (watch the video above for reference), we need to remove the transition on the parent container set by Elementor and set the overflow hidden to hide the scrollbar.

  • Disable the transition of the .container element. This means that any changes to the element’s properties will happen instantaneously, without any animation.
  • Hide the overflow of the .container element horizontally. This means that any content that overflows the element’s boundaries will be hidden.
    
.container{
      transition: none;
      overflow-x: hidden;
}
       

Now the problem is solved and the design is complete.

If you love it, you can support me or donate to me so I write more content for you. 

or 

If you’re unable to set it up you can purchase the service from my store at 10 USD.

Picture of Kishorchand wearing Elementor Blue Shirt that I got it from wining Elementor Header competition

Thangjam Kishorchand Singh

Passionate about web performance, I specialize in assisting individuals and businesses in creating high-speed websites to elevate user experience, improve search rankings, and minimize bounce rates. I continually explore cutting-edge tools and techniques to optimize website performance, sharing insights through informative articles, engaging presentations, and valuable content.

Let's connect on my social media channels to engage in discussions about website speed and transform your site into a lightning-fast online experience.

Follow or chat with me -

Contact Me
Scroll up further to Load all the comments...