Horizontal Scroll Freezes

[george.seletski.1224]

  document.addEventListener("DOMContentLoaded", function() {
        // Register ScrollTrigger plugin
        gsap.registerPlugin(ScrollTrigger);

        const translateIcon = document.querySelector(".translate-icon-global");
        const dropdownContent = document.querySelector(".dropdown-content");

        // Check if the device supports touch events
        const isTouchDevice = 'ontouchstart' in window || navigator.msMaxTouchPoints;

        // Use const for screenWidth instead of let as it doesn't change
        const screenWidth = window.innerWidth;

        // Use querySelector instead of querySelectorAll for a single element
        const storyBlock = document.querySelector(".story-content");

        // Use template literals for string interpolation
        console.log(`width: ${screenWidth}em`);

        const sections = document.querySelectorAll('.h-scroll__section');
        const horizontalScroll = document.querySelector('.h-scroll__inview');
        const container = document.querySelector('.h-scroll__inner');

        // Calculate the total width of the horizontal content
        const horizontalContentWidth = (sections.length - 1) * window.innerWidth;
        console.log(horizontalContentWidth);


        // Vertical scrolling for mobile and tablet devices
        if (window.innerWidth > 991) {
            // Horizontal scrolling
            gsap.to(horizontalScroll, {
                xPercent: -43 * (sections.length - 1),
                ease: 'none',
                delay: 100,
                scrollTrigger: {
                    trigger: container,
                    invalidateOnRefresh: true,
                    pin: true,
                    start: 'top top',
                    end: () => `+=${container.offsetWidth}`,

                    scrub: 1,
                },
            });
        }

        if (!isTouchDevice) {
            const images = document.querySelectorAll(".study__img");

            const scrollContainer = document.querySelector(".h-scroll__inview");
            console.log(window.innerWidth, window.innerHeight);

            if (screenWidth < 1919) {
                scrollContainer.style.width = '1450em !important';
            } else {
                scrollContainer.style.width = `${screenWidth - 589}em`;
            }

            const customCursor = document.querySelector(".custom-cursor");

            // Add custom cursor functionality for non-touch devices
            document.addEventListener('mousemove', function(event) {
                customCursor.style.left = `${event.clientX}px`;
                customCursor.style.top = `${event.clientY}px`;
            });

            const links = document.querySelectorAll("a");

            links.forEach((link) => {
                link.addEventListener("mouseover", () => {
                    customCursor.classList.add("custom-cursor--link");
                });

                link.addEventListener("mouseout", () => {
                    customCursor.classList.remove("custom-cursor--link");
                    setTimeout(() => {
                        customCursor.style.left = `${event.clientX}px`;
                        customCursor.style.top = `${event.clientY}px`;
                    }, 30);
                });
            });
        } else {
            const scrollContainer = document.querySelector(".h-scroll__inview");
            const customCursor = document.querySelector(".custom-cursor");
            customCursor.style.opacity = '0 !important';

            // Function to disable vertical scrolling
            function disableVerticalScroll() {
                document.addEventListener("scroll", preventScroll);
            }

            // Function to re-enable vertical scrolling
            function enableVerticalScroll() {
                document.removeEventListener("scroll", preventScroll);
            }

            // Function to prevent the default scroll behavior
            function preventScroll(event) {
                event.preventDefault();
            }

            if (screenWidth < 1919 && screenWidth > 991) {
                // Call the disableVerticalScroll function to turn off y scrolling
                scrollContainer.style.width = `${screenWidth}em`;
                storyBlock.style.width = `${screenWidth}em`;
                disableVerticalScroll();
            } else if (screenWidth < 1919) {
                scrollContainer.style.width = '100%';
            }
        }


        // Disable scroll
        function disableScroll() {
            // Get the current scroll position
            var scrollTop = window.pageYOffset || document.documentElement.scrollTop;
            var scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;

            // Save the current scroll position and add scroll-lock styles
            window.onscroll = function() {
                window.scrollTo(scrollLeft, scrollTop);
            };
            document.body.classList.add('scroll-lock');
        }

        // Enable scroll
        function enableScroll() {
            window.onscroll = null;
            document.body.classList.remove('scroll-lock');
        }
    });

Hi! I am currently working on a horizontal scroll for a webpage with images. The webpage consists of three sections. First full-screen section. Sections with images. Last full-screen section.  I have a problem with that horizontal scroll stucks. And even freezes at some point. All images are optimized and lightweight. How to make horizontal scroll work smoothly.

#gsap #horizontal-scroll

project_page_style.css test_index.html

[GSAP Helper]

Hi @george.seletski.1224 and welcome to the GreenSock forums!

 

It's pretty tough to troubleshoot without a minimal demo - the issue could be caused by CSS, markup, a third party library, your browser, an external script that's totally unrelated to GSAP, etc. Would you please provide a very simple CodePen or Stackblitz that demonstrates the issue? 

 

Please don't include your whole project. Just some colored <div> elements and the GSAP code is best. See if you can recreate the issue with as few dependancies as possible. If not, incrementally add code bit by bit until it breaks. Usually people solve their own issues during this process! If not, then at least we have a reduced test case which greatly increases your chances of getting a relevant answer.

 

Here's a starter CodePen that loads all the plugins. Just click "fork" at the bottom right and make your minimal demo: 

See the Pen aYYOdN by GreenSock (@GreenSock) on CodePen

 

Using a framework/library like React, Vue, Next, etc.? 

CodePen isn't always ideal for these tools, so here are some Stackblitz starter templates that you can fork and import the gsap-trial NPM package for using any of the bonus plugins: 

• React (please read this article!)
• Next
• Svelte
• Sveltekit
• Vue
• Nuxt

 

Please share the StackBlitz link directly to the file in question (where you've put the GSAP code) so we don't need to hunt through all the files. 

 

Also you might want to have a look at GSAP MatchMedia in order to save some of the headaches of checking screen size breakpoints by hand and creating your animations accordingly:

https://greensock.com/docs/v3/GSAP/gsap.matchMedia()

 

Once we see an isolated demo, we'll do our best to jump in and help with your GSAP-specific questions.