Skip to Main Content Skip Table of 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
  • 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 flex-items or child items or children container a unique CSS class name

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 flex items or child items full width, we have to add a few lines of  CSS to the child item’s custom CSS area. 

Place the CSS in child items custom CSS area

    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 below for reference-Before Parent container's items wrap to wrap AfterParent container's nowrap or default stateAfter 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. Using Elementor custom code &
  2. Using 3rd parties plugins like code snippets.

In this example, I will use the advanced method using the code snippet plugin.

Create horizontal scroll in Elementor using GSAP and Elementor

Download & install the code snippet plugin

To inject the script tags, you will have to download and install the code snippet plugin from the WP repository or if you’re using Elementor Pro, you can use the custom code functionalities.

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.

        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);

Along with the 2 scripts above you need to add this extra JS below.

	let sections = gsap.utils.toArray(".panel");
	let mm = gsap.matchMedia();

	// add a media query. When it matches, the associated function will run
	mm.add("(min-width: 800px)", () => {, {
			xPercent: -100 * (sections.length - 1),
			ease: "none",
			scrollTrigger: {
				trigger: ".container",
				pin: true,
				scrub: 1,
				snap: 1 / (sections.length - 1),
				end: () => "+=" + document.querySelector(".container").offsetWidth
After you host the script locally on your server.Enqueue 3 scripts tag to the footer
        function gsap(){
//72 is the page number, you need to identify the current page for yourself
    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);

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, we need to remove the transition on the parent container 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.
      transition: none;
      overflow-x: hidden;      

Now the problem is solved and the design is complete.

Thangjam Kishorchand

Thangjam Kishorchand

Hi there! I'm Kishorchand, and this is my blog where I share my Elementor tips and tricks that I've learned over the past two years. I'm mostly active on Quora and Facebook, and I love experimenting with design trends like variable fonts and dark mode.

Upgrade to Elementor pro Today

Scroll up further to Load all the comments...