Skip to Main Content

Create horizontal scroll in Elementor with GSAP animation libraries

Play Video
In this step-by-step tutorial, I will show you how to create horizontal scroll in Elementor with the help of GSAP animation libraries
Table of Contents
UPDATE:  Remove CDN version from the post

Recently, someone in the Elementor pro community asked 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 & Trigger.js

 
Please download the 3.11.4 or 3.11.5 version of the GSAP and  ScrollTrigger JavaScript and host it locally on your server or use the CDN whichever method you prefer.

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

This is my page ID and I will be using in this demo.

Page ID to enqueue scripts

Below is the self-host method.

        
function gsap(){
   if( is_page (18015)) {	
         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_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 called trigger.js or any.

        
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 above code is not working properly. Please copy and paste the unminified 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

if( is_page (18015)) {		
	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/share/trigger.js', array(), '1.0.0', 'all');			
}
}
add_action('wp_enqueue_scripts','gsap', 2);       
    
This is how Google Gemini explains-
The code defines a function called gsap(). This function checks if the current page is page ID 18015. 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 on which this script depends.
  • ver: The version of the script.
  • wp_enqueue_scripts in WordPress is an action hook used to manage scripts and stylesheets (CSS) that you want to load on your website’s frontend.
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 ID 18015.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;
}       
    

Enqueue multiple scripts on pages

What if I want to enqueue multiple scripts or stylesheets on pages or posts? this is the question my visitors ask me. To do that you can use the Indexed Arrays function.

The code will be something like this-

$arrays = array('2351', '2428', '580'); is the page ID.

        
function gsap(){
$arrays = array('2351', '2428', '580');
 if( is_page ($arrays)) {
   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/share/trigger.js', array(), '1.0.0', 'all');
    }
}
add_action('wp_enqueue_scripts','gsap', 2);       
    

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.

If you found this tutorial helpful you can support me by buying me a cup of coffee, sending via PayPal, or buying the products from my store-
  1. Buymecoffee
  2. PayPal or
  3. Buy products from my store
Thank you.

12 Responses

  1. It is a very good tutorial, but it is very difficult to follow the instructions since you are not being specific at all in many points. Maybe if you could create a quick video, it would help a lot. Otherwise, it is impossible to make it work.

    For example, you never specified when or how to use the “Unlimited Elements for Elementor” plugin.

    When explaining the step to host the libraries, the linked file already redirects to a more recent version. So you have to edit the version in the code.

    Then, you mention adding a separate Javascript code fragment, but you do not specify where. I assume it’s a Snippet, but it still doesn’t work.

    I also don’t understand why you provide two versions for the “self-host method” in the final version, adding the code “wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘ 1.0.0’, ‘all’);” but you don’t share the “trigger.js” file.

    I sincerely hope you can address my questions, as in your demo, everything seems to work very well, but there are many doubts in this tutorial.

    1. Answers to all your questions-
      1. “Hi, it’s possible to have the elementor template?” – Not at this moment
      2. I never mentioned the “Unlimited Elements for Elementor (UE)” plugin in this tutorial at all. Where did you get the information from? if you’re talking about the demo page, I use UE but not in this tutorial.
      3. You can use the latest version if you want and it will work just fine. if you’re not so sure use the 3.9.1 version.
      4. “Then, you mention adding a separate Javascript code fragment, but you do not specify where. I assume it’s a Snippet, but it still doesn’t work.” – I did mention that the link to the code is already available and you didn’t follow my tutorials properly. So, here is the link to the JS file: https://foxscribbler.com/wp-content/uploads/ac_assets/gsap-animation/gsap-horizontalscroll.js
      5. “I also don’t understand why you provide two versions for the “self-host method” in the final version, adding the code “wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘ 1.0.0’, ‘all’);” but you don’t share the “trigger.js” file.” – Sorry, about the naming, I should have updated it. This is the JS I am referring to: https://foxscribbler.com/wp-content/uploads/ac_assets/gsap-animation/gsap-horizontalscroll.js
      6. In the final version, I gave you 2 versions one is CDN.js and the other one is self-host, you can choose which one fits you. You have self-host trigger JS which is not available
      7. Snippet automatically deactivated due to an error on line 7: Syntax error, unexpected ‘all’ (T_STRING), expecting ‘)’. – You forgot to add an Apostrophe to the version number in line number. Correct that and it should be fine. It is not my fault its users.
      wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘1.0.1, ‘all’); before no Apostrophe
      wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘1.0.1’, ‘all’); after

      8. You call this tutorial “Horizontal Scroll” but at no point does it explain how to convert the scroll from vertical to horizontal so nothing in this tutorial is useful. – Did you follow the tutorial properly or did you just skim it? This might help https://asset.cloudinary.com/foxscribbler/de0da0a2ebe30b3f83202a7e9a31158a

    1. The Prism JS libraries (Elementor code highlighter) wouldn’t allow me to add the JS arrow function (=>) which is why the horizontal scrolling is not working. Please copy and paste the code from here https://foxscribbler.com/wp-content/uploads/ac_assets/gsap-animation/gsap-horizontalscroll.js?ver=1.5.85 and make sure you update the version number

      From
      wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘1.0.0’, ‘all’);

      to

      wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘1.0.1, ‘all’);

      1. Snippet automatically deactivated due to an error on line 7:
        Syntax error, unexpected ‘all’ (T_STRING), expecting ‘)’.

        function gsap(){
        //72 is the page number, you need to identify the current page for yourself
        if( is_page (2910)) {

        wp_enqueue_script( ‘gsap’, ‘/wp-content/uploads/assets/gsap/gsap.min.js’, array(), ‘3.12.3’, ‘all’);
        wp_enqueue_script( ‘scrollTrigger’, ‘/wp-content/uploads/assets/gsap/scroll-trigger.js’, array(), ‘3.12.3’, ‘all’);
        wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘1.0.1, ‘all’);
        }
        }
        add_action(‘wp_footer’,’gsap’, 2);

        1. Ah! you forgot to add the “apostrophe” (‘) at the end of version number (‘1.0.1) and please make sure you copy and paste the code from https://foxscribbler.com/wp-content/uploads/ac_assets/gsap-animation/gsap-horizontalscroll.js?ver=1.5.85 for trigger.js

          function gsap(){
          //72 is the page number, you need to identify the current page for yourself
          if( is_page (2910)) {

          wp_enqueue_script( ‘gsap’, ‘/wp-content/uploads/assets/gsap/gsap.min.js’, array(), ‘3.12.3’, ‘all’);
          wp_enqueue_script( ‘scrollTrigger’, ‘/wp-content/uploads/assets/gsap/scroll-trigger.js’, array(), ‘3.12.3’, ‘all’);
          wp_enqueue_script( ‘trigger’, ‘/wp-content/uploads/assets/gsap/trigger.js’, array(), ‘1.0.1’, ‘all’);
          }
          }
          add_action(‘wp_footer’,’gsap’, 2);

Leave a Reply

Your email address will not be published. Required fields are marked *