Search the Community

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

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!

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:

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

Hello, I want to make a stream like on this site. I partially succeeded, but I can't control the parallax. The parallax in the blue background that comes after CHAPTER 01 comes into play long ago and the right part looks bad. Actually, I have to give a container a 100% width and the main container a 300% width right now, I couldn't get it to get the width automatically. Can you help me? My sample site https://transmissions.cristobalbalenciagamuseoa.com/2019-21/moe-matsuoka.html

Работаю вторую неделю, помогите ребята. Мне нужно сделать горизонтальную прокрутку для всего раздела. Пример с этого сайта , там тоже используется Gsap, но я не вижу его кода Это должно быть так https://karinasirqueira.com/projects/mailchimp/

Hello everyone, I tried to search the forum but I didn't find any project regarding horizontal scroll done in NextJs, could someone kindly point me to it? Thank you very much and have a nice day

Hi. Could anyone help me to add animation to horizontal text block I'm trying to do? Like here: https://locomotive.ca/en Latest award section (third section on homepage). So the text is scrolling slowly, depends we scrolled down it go right->left, up it start scrolling left->right. I have done that, but I would like to have like the example above, so it scroll looped (slowly) all the time, and speeds up when user scrolls. Thank you for the help! Thanks, Lukas.

I'm very new to GSAP and trying to practice with a very simple horizontal scroll. I've been using this example as a guide with a few changes to make it work with Nuxt3/composition API. https://codepen.io/GreenSock/pen/YzygYvM I'm also working with Tailwind but this isn't working the the CodePen, so I've included the style section too. In my actual app, the site isn't scrolling horizontally and just scrolls down a very tiny amount (like half of the one) and that's it. How do I get it to scroll horizontally? The example has a vertical scrollbar but mine only has horizontal? Have I missed something here? I've recorded my screen to show you what's actually going on on my screen because the CodePen doesn't seem to be representing this in the same way. Video in link below: https://drive.google.com/file/d/1iB5rQiR58bd0EjQyoXuwC-sUAb6Y1Sii/view?usp=sharing Thanks in advance for any help!

I have trouble with the margins of my slider container once I finish scrolling. I bet this is because of conflicts with another scrollTrigger, which should enlarge the backgrounds of similar sections on the scroll. Unfortunalety this is my first use of GSAP and I can't understand how to fix it. Just scroll my Pen and notice how Our Products text is jumping. You might need to open it in Codepen, looks like this problem is not reproducible in the widget. Thanks in advance!

Hi, I've got ScrollTrigger on a project and have implemented the pairing of horizontal and vertical scrolling. You can view the example code pen in this post. What I'm trying to do now is do some cool effects on each section as it scrolls into and out of view. I love this example: https://digilab.kunsthaus.ch/en/exhibition/ausstellung-zur-eroeffnung-des-kunsthauses-am-heimplatz?group=switzerland Hoping that someone very talented in these always helpful forums could point me in the right direction. Thanks

Hi, I'm having issues trying to get horizontal scrolling and vertical scrolling working correctly using ScrollTrigger. I used a starting point from this great CodePen example: https://codepen.io/nicvh/pen/gOeZKOJ What I have done is actually have the horizontal scrolling panels be various widths as that is what is going to happen on the final project and have made the horizontal scrolling sections appear first before the vertical scrolling sections. As you can see from my CodePen example, there seems to be a huge gap at the end of the horizontal scrolling sections. If I make the individual scrolling panels 100% width then it works but for some reason, the x: () function is returning the incorrect value. I've been racking my brain on this for hours and am hoping that one of the geniuses in these forums can help me out. Thanks

Hello, Please I need help recreating this using gsap because i want to have smooth scroll. Every attempt I made using gsap meant that I lost the infite loop effect. I really do not know how or what to do. I went through this demo it did not have an infinite loop and also I did not really understand the code. I would be glad if i could find a solution with helpful explanations so that I learn aswell.

Hi, guys! I'm trying to achieve pinning bottom title of each section in horizontal scroll until section rich screen right side. Can't calculate correct end value for first section title and start/end for second section title.

Is it possible to pin a section within horizontally scrolling container? I know I can "fake" it with a timeline, but was wondering if there is a more automated way.

Hi! So I'm trying to get the .stagger-text class (which moves each word in a sentence upwards on-load) to happen when each isolated item with the class .stagger-text is visible on the screen, I've tried using a forEach loop to apply the ScrollTrigger but that seems to entirely break it (so I clearly did it wrong!) I'm also trying to delay the speed at which the items scroll, which is clearly simple enough... if I were creating a vertically scrolling site. As you can see they scroll down vertically as opposed to horizontally. I feel like these issues are somewhat linked because the site is 'artificially' horizontally scrolling they are all inline and being triggered at the top of the page, which is technically the whole thing, if that makes sense? Hope someone can help! Thanks in advance, Ben Elwood

Hello, I would like to accomplish the following: Step 1. Scroll down to horizontal scroll section. Keep scrolling until image sequence finishes in slide 1. Step 2. After image sequence is finished, we need to horizontal scroll to slide 2. Then, we need to animate a background image position in slide 2 with some overlay text. Step 3. Stop horizontal scroll functionalities and scroll to rest of the page See attachment for a visual explanation. I have a basic understanding of ScrollTrigger, but I think this is a trick which can be implemented in a very specific way. Can someone please help me with this? Thanks!

Hi, how can i create anchor links for a horizontal scrolling? My version is not working correctly: $(".menu-item").on("click", function (event) { event.preventDefault(); var id = $(this).attr('href'); var left = $(id).offset().left; $('body,html').animate({ scrollTop: left }, 1500); });

Hello there, I have this script in use and it works great. My question now is, how to add a stop at the last slide and start the vertical scrolling with a button. Is that possible? Thanks for your help! Mirja

My goal is to create an effect where I reveal a section with horisontal scrolling sections. Though the horisontal scroll should not activate before the last cover has been scrolled away first. I have create a screen recording of the desired result here: The problem I am facing is that the horisontal scroll behaviour is initialised before it is visible, so one can never get to see the first slide.