Let’s get to it.
Before we dive into the tutorial, let’s take a quick look at the outcome across different screen sizes.
Download The Layout for FREE
To lay your hands on the free layout, you will first need to download them using the button below. To gain access to the download you will need to subscribe to our Divi Daily email list by using the form below. As a new subscriber, you will receive even more Divi goodness and a free Divi Layout pack every Monday! If you’re already on the list, simply enter your email address below and click download. You will not be “resubscribed” or receive extra emails.
Download For Free
Join the Divi Newsletter and we will email you a copy of the ultimate Divi Landing Page Layout Pack, plus tons of other amazing and free Divi resources, tips and tricks. Follow along and you will be a Divi master in no time. If you are already subscribed simply type in your email address below and click download to access the layout pack.
You have successfully subscribed. Please check your email address to confirm your subscription and get access to free weekly Divi layout packs!
Overview of Approach
What We’re Using
What We’re Creating
Fake horizontal scrolling when scrolling vertically
Making the effect work on a number of sections of our choice (not necessarily the entire page)
An effortless horizontal screen experience across all screen sizes
1. Add Placeholder Sections
Add Section #1
Start by adding a first section to the page you’re working on. This section will serve as a placeholder so we can watch the effect fall into place.
Open the section settings and assign a height to the sizing settings.
Clone Section #1
Then, clone the placeholder section once. This will help us generate some space at the top and bottom of our page, without it being part of the horizontal scrolling (see preview).
1. Build Section Design
Add New Section Between Sections
Now that we have the two placeholder sections in place, it’s time to create the first section that we’ll use inside our horizontal scrolling. Add this section right in between the two placeholder sections.
Open the section settings and assign a max height in the sizing settings.
Max Height: 100vh
We’re also setting the vertical overflow to auto. This, in combination with the max height in the previous step, will help us automatically generate a scrollbar on certain screen sizes where the section elements exceed the viewport height.
Vertical Overflow: Auto
Add New Row
Continue by adding a new row to the section using the following column structure:
Without adding modules yet, open the row settings and use a background image.
Background Image Size: Cover
Background Image Position: Center
Modify the sizing settings of the row next.
Use Custom Gutter Width: Yes
Gutter Width: 1
Tablet & Phone: 80%
Along with the spacing settings.
Tablet & Phone: 20vh
Bottom Padding: 0px
Then, open the column settings.
Use a white background color for the column.
Background Color: #ffffff
Move on to the column’s design tab and apply some custom padding values.
Top Padding: 5%
Bottom Padding: 5%
Left Padding: 5%
Right Padding: 5%
Use a border too.
Border Width: 1px
Border Color: #000000
Add Text Module #1 to Column
Add H4 Content
Time to add modules, starting with a first Text Module containing some H4 content.
H4 Text Settings
Move on to the module’s design tab and change the H4 text settings as follows:
Heading 4 Font: Source Code Pro
Heading 4 Text Color: #000000
Heading 4 Text Size:
Heading 4 Letter Spacing: 1px
Add Text Module #2 to Column
Add H3 Content
Add another Text Module right below the previous one and use some H3 content in the content box.
H3 Text Settings
Move on to the module’s design tab and change the H3 text settings accordingly:
Heading 3 Font: Alata
Heading 3 Text Size:
Add Text Module #3 to Column
Add a last Text Module to the column with some description content of your choice.
Change the module’s text settings accordingly:
Text Font: Source Code Pro
Text Line Height: 1.5em
Change the sizing settings next.
Tablet & Phone: 100%
And complete the module settings by applying some responsive padding values to the spacing settings.
Tablet & Phone: 5vh
Tablet & Phone: 5vh
Add Button Module to Column
The last module we need to complete the row design is a Button Module. Add some copy of your choice.
Move on to the module’s design tab and change the button settings accordingly:
Use Custom Styles For Button: Yes
Button Text Size:
Button Text Color: #ffffff
Button Background Color: #000000
Button Border Width: 0px
Button Border Radius: 0px
Button Font: Source Code Pro
Button Font Style: Uppercase
Add some custom padding values next.
Top Padding: 15px
Bottom Padding: 15px
Left Padding: 50px
Right Padding: 50px
And reposition the module in the advanced tab.
Location: Bottom Left Corner
Vertical Offset: -5%
Horizontal Offset: 5%
2. Reuse Section
Clone Section Twice
Once you’ve completed the first section, you can clone it twice.
Change Image & Copy & Link
Make sure you change the image, copy and link in each duplicate section.
2. Add Functionality
Add CSS Class to Each Section You Want to Include in Horizontal Scroll
Now that we have all elements in place, we can start focusing on the functionality of it all. The first step to accomplishing the outcome is assigning a custom CSS class to each section that you want to be part of the horizontal scrolling. In this case, that means the three sections between placeholder sections.
CSS Class: horizontal-section
Add New Code Module Somewhere Inside Page
Next, add a Code Module to the page. This can be anywhere you want.
Add GSAP & ScrollTrigger Libraries First
Copy-paste the GSAP and ScrollTrigger libraries inside the Code Module. Use script tags for this with the following sources:
Add New Script Tags for Custom Code
Right below the library script tags, we’ll add some new script tags.
Add JS Code
Prepare for JQuery Usage
Inside these script tags, we’ll start by loading JQuery.
Register ScrollTrigger Plugin
Then, we’ll register the ScrollTrigger plugin.
Wrap All Relevant Sections in a New Div
We’re also placing each one of the relevant sections inside a new div using the following code lines:
var allSections = $(‘.horizontal-section’);
Create New GSAP Tween with ScrollTrigger
To make the fake horizontal scrolling work, we’re going to use a new tween with a scroll trigger. The code that makes this happen is the following:
xPercent: -100 * (allSections.length – 1),
start: "top top",
// base vertical scrolling on how wide the container is so it feels more natural.
end: () => "+=" + document.querySelector(".horizontal-container").offsetWidth
Add Style Tags for Custom CSS Code
Next, we’ll add some style tags to our Code Module.
Insert CSS Code Between Style Tags
And we’ll complete the tutorial, and the functionality, by adding the following lines of CSS code between the style tags:
Now that we’ve gone through all the steps, let’s take a final look at the outcome across different screen sizes.
In this post, we’ve shown you how to go the extra mile for your website with Divi and GSAP. More specifically, we’ve shown you how to scroll horizontally when actually scrolling vertically on your page. This is a custom type of animation that you might have come across at a certain point and wondered how you could do it with DIvi. You were able to download the JSON file for free as well! If you have any questions or suggestions, feel free to leave a comment in the comment section below.
If you’re eager to learn more about Divi and get more Divi freebies, make sure you subscribe to our email newsletter and YouTube channel so you’ll always be one of the first people to know and get benefits from this free content.
The post How to Automatically Scroll Horizontally When Scrolling Vertically with Divi & GSAP appeared first on Elegant Themes Blog.
Read more: elegantthemes.com