Elementor Full Screen Horizontal Scroll Containers

Elementor Full Screen Horizontal Scroll Containers

Table of Contents

In this tutorial you are going to learn how to create horizontally scrolling Elementor containers  without any plugin.

This tutorial uses the new containers element, as they are perfect for this.

See the demos here.

Straight code version (desktop and mobile ready):

 

GSAP version (desktop only)

 

GSAP with snapping version (desktop only)

Features:

  • Make any content at all horizontally scrollable
  • Works on desktop and mobile
  • Performant animation
  • No JS dependencies version
  • GSAP version
  • Snapping enabled option

Important note: You will need the feature "Container" to be enabled under Elementor > Experiments > Container. This uses the new Container element.

Template included: The "Straight code" demo above is included as a template JSON file. The GSAP versions are not included as template files, but easy to replicate by following the tutorial.

Let's get started!

First, add an Elementor container to your page

This is a premium tutorial. Purchase access to unlock the full tutorial and download the template.

 

Looking for something else? Search across 2369 Elements right here:

And get exclusive Elementor related discounts here

Checkout the Elementor Addon Finder directly

Comments

Leave a Reply