Elementor, GSAP, Scrolltrigger

Elementor GSAP Tutorial: Mastering Mobile And Desktop Scrolling For Better User EXPERIENCE

Why Vertical Scrolling on Tablets and Mobile Devices?

When it comes to responsive design, user experience is key. Here’s why vertical scrolling is the go-to for most mobile and tablet setups:

Intuitive Interaction: Most touchscreens are designed for a simple up-and-down swipe. Vertical scrolling follows the natural motion of your thumb, making navigation smooth and familiar. Who really wants to relearn how to scroll, right? 😉

Clarity & Readability: With vertical scrolling, your content—be it text, images, or videos—stays neatly organized. This linear flow makes your site easier to read and digest. In contrast, horizontal scrolling on a small screen can quickly become confusing. Ever tried reading text while swiping sideways? Not fun!

SEO Perks: Search engines, like Google, favor websites optimized for mobile users. A vertical scroll enhances user experience and can give your SEO a little boost, helping your content rank higher. More readers, more engagement—win-win! 🚀

When Does Horizontal Scrolling Make Sense?

That said, horizontal scrolling isn’t all bad. There are scenarios where it can shine:

Visual Presentations: If you’re showcasing a gallery, product lineup, or interactive map, horizontal scrolling can create a dynamic, engaging display. It allows you to present content in a creative, visually appealing way.

Unique Design Elements: Sometimes, you want to shake things up with a layout that surprises your audience. A horizontal scroll can be a cool design trick for storytelling or innovative navigation. Just remember: it should be used sparingly to keep the user experience top-notch.

My New Code: Vertical Scroll for Tablets and Mobile

With my latest code update, I’m opting for vertical scrolling on tablets and mobile devices. Here’s why that rocks:

Enhanced Usability: Users can easily navigate your site with a simple up-and-down swipe—no awkward sideways motion needed.
Optimized Layout: Content is displayed in a clear, linear format, perfect for blogs, articles, or any long-form content.
Better SEO: A mobile-friendly design not only pleases your visitors but also boosts your site’s ranking in search engines.

In a nutshell, while horizontal scrolling can be a neat trick for specific visual projects, vertical scrolling on mobile devices and tablets typically offers a more intuitive, user-friendly, and SEO-optimized experience. Try it out and see the difference for yourself—your users will thank you!

GSAP Code

Copy Code Copied Use a different Browser


<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/gsap.min.js"></script>

<script src="https://cdn.jsdelivr.net/npm/gsap@3.12.7/dist/ScrollTrigger.min.js"></script>
<script>
  gsap.registerPlugin(ScrollTrigger);

  function initGsapAnimation() {
        gsap.registerPlugin(ScrollTrigger);

    let mm = gsap.matchMedia();

    mm.add("(min-width: 1025px)", (context) => {
      let container = document.querySelector(".h-inner");
      let scrollContainer = document.querySelector(".h-wrap");

      if (!container || !scrollContainer) return; 
      ScrollTrigger.getAll().forEach(trigger => trigger.kill());

      let scrollTimeline = gsap.timeline({
        scrollTrigger: {
          trigger: scrollContainer,
          pin: true,
          scrub: 1,
          start: "top top",
          end: () => "+=" + container.scrollWidth, 
          invalidateOnRefresh: true, 
        }
      });

      scrollTimeline.to(container, { x: 0, duration: 0.1 });
      scrollTimeline.to(container, {
        x: () => -(container.scrollWidth - window.innerWidth) + "px",
        ease: "none"
      });
      scrollTimeline.to(container, { x: () => -(container.scrollWidth - window.innerWidth) + "px", duration: 0.1 });

      ScrollTrigger.refresh(); 

      return () => {
       
        ScrollTrigger.getAll().forEach(trigger => trigger.kill());
      };
    });
  }

 
  jQuery(window).on("elementor/frontend/init", function () {
    initGsapAnimation();
  });


  window.addEventListener("resize", () => {
    initGsapAnimation();
  });

  
  jQuery(document).on("elementor/popup/show", function () {
    setTimeout(initGsapAnimation, 500); 
  });
</script>

CSS Code

Copy Code Copied Use a different Browser


.h-wrap{
    transition: none !important;
    overscroll-behavior: none !important;
}


.h-inner{
    transition: none !important;
    overscroll-behavior: none !important;
}


.h-panel {
  
  display: flex !important; 
  width: 100vw !important; 
  height: 100vh !important; 
  flex-grow: 1 !important; 
  flex-shrink: 0 !important; 
  flex-basis: auto; 
  box-sizing: border-box !important; 
}

.h-image img{
      height: 70vh !important;
      width: 70vw !important;
      object-fit: cover !important;
  }


@media (max-width: 1024px) {
  
  .h-image img{
      height: 100% !important;
      width: 100% !important;
      object-fit: cover !important;
  }
  
  .h-image{
      height:100% !important;
      width: 100% !important;
  }
  
  .h-panel {
  display: flex !important; 
  width: 100vw !important; 
  min-height: auto !important;
  height: auto !important;
  flex-grow: 1 !important; 
  flex-shrink: 0 !important; 
  
}
  
}