How To Play Horizontally Scroll Using GSAP ScrollTrigger In Elementor (No Plugins) | WordPress Tutorial

So if you follow along in the video, I refer to this blog post for you to either enter code at certain points into the HTML widget or in the Custom CSS option inside the main container, so below is everything you will need!

Alternatively

You can download the complete template here

The css code used in the Main Container that houses the horizontal inner containers.

This is put into the Custom CSS tab under Advanced Settings of the main container:

				
					.horizontal-parent{
    transition: none;
    overscroll-behavior: none;
}

The GSAP script used to create the horizontal effect.

				
					<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/gsap.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.9.1/ScrollTrigger.min.js"></script>

<script>
gsap.registerPlugin(ScrollTrigger);
let hcontainer = gsap.utils.toArray(".horizontal-child");
gsap.to ( hcontainer, {
  xPercent: -100 * ( hcontainer.length - 1 ),
  ease: "none",
  scrollTrigger: {
    trigger: ".horizontal-parent",
    pin: true,
    markers:false,
    scrub: 1,
    snap: {
      snapTo: 1 / ( hcontainer.length - 1 ),
      duration: 0.05
    },
     end: "+=5000",
  }
});
</script>

Other Articles

Building Mr Beast’s Feastables Website In WordPress | GSAP Elementor Tutorial

So if you follow along in the video, I refer to this blog post for you to enter code at ...

Building Peter McKinnon’s Website In WordPress

All Images used for the website tutorial: Download Images Please guys, these images are just to help copy the style ...

Never Seen Before – Animated SVG mask entrance effect for images in elementor

https://youtu.be/VduaRoRBuzM So if you follow along in the video, I refer to this blog post for you to enter code ...

GSAP Button Magic Elevate Your Elementor Button Hover Effects

https://youtu.be/CXxqXMzj4_k So if you follow along in the video, I refer to this blog post for you to enter code ...