- 1) Basic requirements:
- 2) Create a parent container-
- 3) Create child containers (flex-items) and place them inside the parent container
- 4) Set the Parent Container’s items Wrap settings to the default state.
- 5) Create horizontal scroll in Elementor using GSAP and Elementor
- 6) Add Custom CSS to the parent container
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.
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.
Items settings:
- flex-direction to Horizontal / Row (default state)
- Justify Content to Start.
- Align Items to Start
- Set the gap value to zero (0) &
- Wrap to Wrap
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.
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.
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.
.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 below for reference-Before
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.
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-
- Using Elementor custom code &
- 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.
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.
gsap.registerPlugin(ScrollTrigger);
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)", () => {
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
}
});
});
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
.containerelement. This means that any changes to the element’s properties will happen instantaneously, without any animation. - Hide the overflow of the
.containerelement 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.
