Search the Community

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

Hi guys, I have set up horizontal scrolling page using scrollTrigger and that works just fine (Lenis smooth scroll is present if that in any case impacts the following issue at all). Horizontal scroll: let scrollTween = gsap.to(this.scroll, { xPercent: -100, x: () => "100vw", ease: "none", scrollTrigger: { pin: this.wrapper, trigger: this.wrapper, start: "left left", end: () => `+=${this.scroll.offsetWidth} bottom`, scrub: true, }, }); What I need to accomplish is if users on trackpads (macbook) scroll horizontally (swipe with two fingers in the horizontal direction on trackpad) scrollTrigger updates and everything works as a "normal" scroll. overscroll-behavior-x: none; is also added to body to prevent default gestures on trackpad — browser history back/forward. Is there a way Observer can come in to handle this and update scrollTween somehow? Thanks...

Hello everyone! I have a horizontal scroll section on my site as seen in the codepen. The problem is, when resizing the window horizontally, the width doesnt match anymore and the hotizontal scroll either goes too far or some of my content is cut off. I cant use xPercent instead of x since i need different widths for various screen widths. I already tried a solution suggested in another Thread ( ), but it doesnt seem to work in my case. Any ideas why or different approaches? Thanks a lot for your help!

Hello, I'm trying to display a modal that scrolls horizontally when loaded. I took my inspiration from this pen : https://codepen.io/GreenSock/pen/wvxoGeG It works perfectly when ScrollSmoother is not involved, but as soon as I uncomment the lines (5 to 11) that enable ScrollSmoother, it doesn't work anymore and I don't have a clue about the reason why. It seems that my ScrollTrigger is now related to the ScrollSmoother instance and I don't want that. Is there a method to detach my ScrollTrigger instance from the ScrollSmoother one? Any guidance is much appreciated.

Hi Based on the demo codepen provided by you, how can I add the draggable plugin? Note that this must also work on mobile. Thanks

Hi Everyone, I am creating a horizontal scroll section in my website using Gsap. The section consists of a video and two images. I have two problems: 1. The video and the images are set to 100% width and object-fit: cover yet it doesn't fit fully in the screen you have to scroll to see the rest of it. I tried object-fit: contain but then I end up with white space on the left and the right. How can fix that? 2. When I scroll down just a little the section automatically scrolls to the next element. Is there a way to disable that?

Hi everyone, I'm working on a unique navigation implementation and could use some guidance. Here's what I'm trying to achieve: - The navigation items are represented by large vertical bars that correspond to specific sections on the page. - As the user scrolls and a vertical bar reaches the left side of the screen, it becomes the "current" vertical bar and remains fixed in place. In my initial attempt, I used a section title as the vertical bar. However, as you can see in the Codepen, I need to have two or more bars anchored to the right side of the screen, moving in sync with their respective sections. I've added some comments in the Codepen link to explain my thought process, but I'm currently struggling to understand why the bars aren't moving as expected I'm open to suggestions and willing to change the structure I've created if anyone has a better solution to achieve this effect ✨ Thank you all in advance for your help!

Hello nice people of GSAP, Forgive me for poor English please.?? My mother tongue is Chinese. I'm a new user for learning how to use GSAP in my project. And now encountered some problems in using GSAP to make a horizontal scroll slider. I'm looking for methods to complete these effects below： 1. When scroll down, slider go horizontal scroll only once time. If scroll back, stop the horizontal scroll effect. 2. Add next and prev button to switch slider by pure JS. (Sorry for that I don't tend to use GSAP Club Plugins, I'm trying to complete it by open source and free ) I tried using the attribute "once: true", but the next/prev button and anchor button not working. And when scroll back this will leave white space on the top. Please tell me how to fix it, thanks for kind people.?? This is the demo I write on codepen： https://codepen.io/lin-hsienli/pen/abRGEZP

Hey guys, I met GSAP today and I was impressed with the quality of animations that it is possible to do, I found an example of how to make the horizontal scroll using vanilla js, someone who has already done it using react can give me an example of how to make this type of animation. Thank you very much :D

Hi, I started using GSAP recently and I like this library but I stuck for now. I want to slide elements back to right side position after having already scrolled to the next vertical section. The idea is that there is no empty space left after horizontal scroll ends. I can use this approach to prevent it: x: () => -(container.scrollWidth - document.documentElement.clientWidth) + "px" but this is not exactly what I want, because if there are not many elements and they fit into the screen, it will just stand there until I scroll to the next section. Thanks for your help ?.

Hello, I wanted to make a horizontal scroll structure under four headings. And these four titles have their own content and the videos will be side by side and will be horizontal scrolling while scrolling. and when the content content is finished it will move to the next one. I made a script like this but when I get to the title the pin works correctly but the horizontal scroll does not move. can you help me?

Hi, i'm trying to replicate this animation , but i don't really understand what's wrong with the animation. https://codepen.io/pixit_design/pen/ExKWVdq -> found on another topic. My structure is different. When i don't set horizontal: true, the image property change, but when i want to do it with horizontal trigger, the property doesn't change anymore. I'm sorry if this question has already been asked. i hope you will be able to help me

I am looking to develop a layout on GSAP in which I require horizontal scroll for few sections. I have attached layout structure diagram.

Hi, i'm trying to create an horizontal scroll on my gallery section. So i followed lot of tutorials, and compared my code to lot of codepen to understand why, my horizontal scroll doesn't works. Sometimes it works, but the section is not pinned, Sometimes the section is pinned but scroll doesn't works. What did i do wrong. Also i'm using tailwindCss. Here is my useLocoScroll Hook: import {gsap} from "gsap" import { ScrollTrigger } from "gsap/dist/ScrollTrigger" import LocomotiveScroll from "locomotive-scroll" import "locomotive-scroll/src/locomotive-scroll.scss" import { useEffect } from "react" gsap.registerPlugin(ScrollTrigger) const useLocoScroll = () => { useEffect(()=>{ const scrollEl = document.querySelector('#page-wrapper'); let locoScroll = new LocomotiveScroll({ el: scrollEl, smooth:true, multiplier:1, class: 'is-reveal', markers:true }) locoScroll.on('scroll', () => ScrollTrigger.update) ScrollTrigger.scrollerProxy(scrollEl, { scrollTop(value) { if (locoScroll) { return arguments.length ? locoScroll.scrollTo(value, 0, 0) : locoScroll.scroll.instance.scroll.y; } return null; }, getBoundingClientRect() { return {top: 0, left: 0, width: window.innerWidth, height: window.innerHeight}; }, pinType: scrollEl.style.transform ? "transform" : "fixed" }); const lsUpdate = () => { if (locoScroll) { locoScroll.update(); } }; ScrollTrigger.addEventListener("refresh", lsUpdate); ScrollTrigger.refresh(); return () => { if (locoScroll) { ScrollTrigger.removeEventListener("refresh", lsUpdate); locoScroll.destroy(); locoScroll = null; } }; }) } export default useLocoScroll And here my gallery component. import gsap from "gsap"; import { useEffect, useRef } from "react"; const Gallery = ({ data }) => { const ref = useRef(null); const projects = data.projects.data useEffect(() => { // This does not seem to work without a settimeout setTimeout(() => { let sections = gsap.utils.toArray(".gallery-item-wrapper"); const sectionWidth= ref.current.offsetWidth const scrollWidth = sectionWidth - window.innerWidth console.log(sections); console.log(ref.current.offsetWidth - window.innerWidth); gsap.to(sections, { scrollTrigger: { scroller: "#page-wrapper", scrub: true, trigger: ".sectionHorizontalScroll", pin: true, snap: 1 / (sections.length - 1), start: "top top", end: ()=> `+=${sectionWidth}`, markers: {startColor: "green", endColor: "red", fontSize: "12px"} }, x: -100 * (sections.length - 1), ease: "none", }); }); }, []); return( <section id="" className="h-screen w-max py-32 sectionHorizontalScroll" data-scroll-section > <div className="pinSectionHorizontalScroll"> <div className="flex flex-nowrap w-max" ref={ref} > { projects.map((project, index) => { return <GalleryItem mignature={project.attributes.mignature} title={project.attributes.title} key={project.attributes.title + "-" + index} /> }) } </div> </div> </section> ) } const GalleryItem = ({mignature, title}) => { return ( <div className="w-[50vh] gallery-item-wrapper" data-scroll> <h3 className="text-3xl font-bold text-grayPrimary">{title}</h3> </div> ) } export default Gallery At last, i added my locoScroll to my Layout like that: import ImageWebP from '../../components/ImageWebP' import Birds from './Canvas/Birds' import { Outlet } from "react-router-dom"; import Header from './Header'; import { useState } from 'react'; import CursorProvider from './CustomCursor'; import useLocoScroll from '../../services/useLocoScroll'; export default function Layout() { useLocoScroll(); const [isMenuOpen, toggleMenuOpen] = useState(false) return( <> <CursorProvider> <Header toggleMenu={toggleMenuOpen} isMenu={isMenuOpen}/> <section id='page' className={ 'h-full w-full relative transition-all' + (isMenuOpen ? " ml-96" : " ml-0") }> <section className='fixed left-0 top-0 w-screen h-screen -z-10'> <ImageWebP src={window.location.origin + "/assets/imgs/backrounds/background1.webp"} fallback={window.location.origin + "/assets/imgs/backrounds/background1.jpg"} classnames=" h-screen w-screen object-screen block " alt="A photo showing the expiration date on a box of Lucky Charms" className="object-cover h-full w-full" /> </section> <Birds /> <div id='page-wrapper' className=" w-full h-full min-h-screen z-30" data-scroll-container> <Outlet /> </div> </section> </CursorProvider> </> ) } Thank you if you take times to help me. There is the demo here: https://justhugo.fr

Hello everyone! I have some problem to use correctly Scrolltrigger. The problem it show when i try to translate all slide to "xPercent: -100" when scroll. var thirdPanel = document.querySelector(".third-panel"); if (thirdPanel) { var thirdPanelRect = thirdPanel.getBoundingClientRect(); const sectionsThirdPanel = gsap.utils.toArray(".third-panel .slide"); if (sectionsThirdPanel.length > 0) { const numSections = sectionsThirdPanel.length - 1; const snapVal = 1 / numSections; gsap.to(sectionsThirdPanel, { xPercent: -100 * numSections, ease: "none", scrollTrigger: { trigger: ".third-panel .slide-second", pin: ".third-panel", scrub: true, snap: snapVal, start: `top+=${thirdPanelRect.top} top`, end: "+=" + document.querySelector(".third-panel").scrollWidth, markers: { startColor: "red", endColor: "red", fontSize: "3rem", indent: 200, }, }, }); } } For clarity please check my codepen. My intention is to create a "stacking" slide alfter first blue slide. I hope I was clear, open the codepen for best result. For other information please ask. Mattia

Hi guys, New to this forum and to GSAP, I wanted to combine the personalization of Webflow and the power of GSAP. I'm working on a project where on desktop there's a "complexe" layout. On mobile, I wanted to simplify the navigation by creating a horizontal scroll with 4 different screens. The idea is that after clicking on inputs and other elements, the scroll is automatically snapping to the next screen. Here's the idea: see file in attachment. Do you have any idea on how to achieve this? Thanks mates horizontal-scroll-gsap-mini.m4v

Hello everyone! I apologize in advance for such a simple question, but I cannot find any information about this or a suitable example for my case. I am expecting a scrollbar for my fake-horizontal scroll section as shown in the photo, but I don't know how exactly to do this, which GSAP plugin is needed for this? Please, see clearly what the section to which this scrollbar is needed looks like, I leave a link to the codepen. I'd welcome any information about it. Link to the documentation on the creation of such, video/example work. Thank you in advance, if you need more information, please let me know!

Hello, I made a copy for the gsap animation in the sample codepen link. But it doesn't work like the effect example, it takes the styles but there seems to be a shifting problem. Can you help me? Example; https://codepen.io/GreenSock/pen/JjYPgdp My Pen;

Hi Guys I make a code for horizontal scroll and its work perfectly in desktop devices but in the mobile device when I scrolling with touch it's create some leg. Here Is The Problem: 2023-02-10-00-26-59_KaHU5Lcj (1).mkv Here Is My Code: useEffect(() =>{ const panel = document.querySelectorAll(".panel"); const panels = document.querySelectorAll(".panel").length; const containers = document.querySelector(".containers"); const pin = document.querySelector(".container"); const ctx = gsap.to(panel, { xPercent: -100 * (panels - 1), ease: "none", scrollTrigger: { start:"center center", trigger: containers, pin:pin, scrub: 3, end: () => "+=" + containers.offsetWidth }, }); setTimeout(() => { ScrollTrigger.refresh() if (ctx && ctx.scrollTrigger && ctx.scrollTrigger.scroll() > ctx.scrollTrigger.start) { ctx.scrollTrigger.scroll(ctx.scrollTrigger.start); } }, 200); return () => { ctx.revert() } },[activeTab,]) Please Make me solution of this. Thanks?

Hi Friends, Recently I make this horizontal scroller tab: Everything Is ok but when I scroll it for horizontally and then I clicked one of the tab button and it Begins again from where it ended, and this problem clearly show in my react js project and codesandbox. Please Kindly Check my codesandbox link. Now, just I want to start it from beginning when I click a new tab button. Here is My Codesandbox Link For You: https://codesandbox.io/s/fix-this-tab-the-problem-kskoe3?file=/src/App.js Please Solve It For Me☺️ Codepen Link:

I have six sections. Three sections contain buttons. I want to switch between using the scrollbar to advance to the next section in sections 1-3, using an onClick event to advance to sections four and six, and using a setTimeout to advance to section five. Sections 4 - 6 must also be hidden until triggered by the onClick or setTimeout. I can easily show/hide elements and trigger scroll in native .js, but have been struggling (for several days) to do this with GSAP. I'm sure that a lot of GSAP newbies will find this helpful. Thanks!

Hello, I'm using ScrollTrigger animations to animate a main object. It is fixed from the start but at the third section, when the horizontal scroll starts (orange section), it should stay inside the section and scroll horizontally as it's inside the first slide. In few words I tried to pin the black element when the scroll reach the end of the orange section. I tried to change position dynamically (from fixed to relative) but it makes it doesn't work at all. Anyone can help? Thank you in advance!

Hi guys, sorry that I have to ask but I'm always running in the same issue. Don't want to disturb you guys by saying I'm a newbie..but actually I am. I started by taking the horizontal scroll container codepen demo of Greensock and integrate a grid overlay in the second container. It works, but after the grid container there is a white space which is not wanted and the last sections width gets broken. I realy don't get why, could you pls give me an explanition and help me to solve the white space issue? Further I want that fire an scroll animation when the container is in viewport, tried this with the following lines but it doesn't work. The goal should be that the view autoscroll to the end of the section for the first step and then scroll backwards to middle (50%) of the same section. I integrated the ScrollToPlugin so I don't know what I forgot - if you recognize the reason pls let me know. let tl = gsap.timeline() .to(redContainer, {duration: 2, scrollTo: () => "+=" + document.querySelector(".red").offsetWidth}); Thanks a lot guys!

I want to change my horizontal scroll element click on tabs . I try it in my main project but I can't do this. Codesandbox Link : https://codesandbox.io/s/horizontal-tab-content-xfwmwn I just simply make this template for fix this. so, please help me to complete this. Please Thanks..

Hello, with vertical scroll, we can make parallax or scrolling effect very simply with data-speed="value". How can we do this with horizontal scroll? Is there a method? An example I created to do this; https://codepen.io/sukruemanet/pen/dyKWeOg