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

How To Make A Vertical 3D Gallery Slider

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

How To Make A Horizontal 3D Gallery Slider

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

How To Make A Auto Rotating 3D Carousel

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

How To Make A 3D Carousel For Products

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