Search the Community

Here it has a delay for starting the horizontal scroll snap. It should begin to or maintain the speed from start to end. It would be great if some one could help me to sort this. Thank you in advance

Hi everyone, I'm working on a project where I'm trying to pin a title during horizontal scrolling. I've successfully implemented vertical scrolling with ScrollTrigger and pin:true, but I can't seem to figure out how to achieve the same for horizontal scrolling. I've provided a link to a StackBlitz project where you can see my working vertical scroll example, but the horizontal one isn't functioning as expected. Any help or suggestions on how to make this work would be greatly appreciated! StackBlitz Demo Link: https://stackblitz.com/edit/stackblitz-starters-zxxdmi?file=app%2Fpage.jsx Thanks so much for your time and assistance!

I 've been trying to solve this for days seeing the community and referring topics here in GSAP and tried various method but still could not solve this issue. As you can see from the code there are three div's and the second div has some content and I need to make one of the div's in it scroll horizontally while scrolling vertically. I have pinned the second div inorder to complete the horizontal scroll. It works sometime when I make corrections on the code and hit save. But when I refresh the page it stops working all the same. Also sometimes it works only when the cursor is on the left most side the horizontal scroll works. Any suggestions / help ? I have provided the codesandbox link for the same. https://codesandbox.io/p/sandbox/horizontal-scroll-q55rs3

Hi, I've added GSAP with ScrollTrigger to my website to add an horizontal scroll section and to animate some elements on scroll. Animating the elements with ScrollTrigger works as expected until I you at the horizontal scroll section. GSAP calculates the actual scrolling position wrong when you start scrolling horizontally. The actual vertical scrolling position needs to be paused once you start scrolling horizontal, and must resume when you are done. What happens now is that GSAP thinks you've scrolled further down, thus activating the other scroll triggers, while we are in fact just scrolling horizontal. I've created a simple Codepen example that has the same issue. The text items before the horizontal scroll section animate in as expected, but the items after the horizontal scroll section are all already visible once you arrive there. How do I resolve this? Any help is appreciated!

useEffect(() => { gsap.registerPlugin(ScrollTrigger, ScrollToPlugin); const section: any = scrollRef.current; const scrollContainer = section.querySelector(".scroll-container"); const scrubTween= gsap.to(scrollContainer, { x: () => -(scrollContainer.scrollWidth - section.offsetWidth + 104) + "px", ease: "none", scrollTrigger: { trigger: section, start: "center center", end: () => "+=" + (scrollContainer.scrollWidth - section.offsetWidth), pin: true, anticipatePin: 1, invalidateOnRefresh: true, scrub:0, onUpdate: (self) => { if (self.direction === -1) { // Scrolling upwards gsap.set(scrollContainer, { x: 0 }); // Reset horizontal scroll position } }, }, }); return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, [])

Hey, so I've been searching through the forum but I kinda can't find a solid solution for the problem. So I want a horizontal scroll which is working like wanted. But the content in the panels is dynamic (there are longer texts or more images). This works for desktop devices but not for mobile. So my design team was thinking about something like a staircase animation where I scroll horizontally to the right and then scroll down until I reach the end of the panel and then continue scrolling horizontal. In my codepen I tried to show the problem while simulating the mobile device. The content is overflowing so it gets hidden. But I want it to be scrollable. I've tried it with normal CSS overflow scrolling but this will be a pain for the user. Can anyone of you point me in the right direction? I read about pausing the ScrollTrigger while in the panel to let the user vertical scroll, but couldn't find a solution. (And yes, I also don't like scrolljacking, but customers...) Thanks!

Hi everyone, I'm new to Gsap and I'll be grateful for any help! I'm trying to recreate the effect I posted on codepen but in a horizontal version. On scroll, the second slide and its content would pass over the first to give an effect of overlapping. I've already tried, but I can only make a basic horizontal scroll without "overlapping". Let me know if you need more details. codepen link : https://codepen.io/webScenarii/pen/qBzopqo

Hi All, i have recently started using gsap. it is so great. i am using it with a react project but for minimal demo i have used js only, i found one demo in gsap's examples. i am trying to achieve same but without infinite loop it should iterate all the items only once. so i am not sure that should i use this loop helper function or it can be achieved without it. anyway i have modify code a bit and it is working as expected but only issue is if cards are less than 14 i doesn't work properly means what i want is it to iterate all items once only but if cards are less, it start iterating from 0 for few cards again. i am not sure where we can make changes so it work with dynamic number of cards. (currently it doesn't work if only few cards are there, less than 14) JFYI, this is how screen is - section - horizontal scroll with pin (cards should loop for only one iteration) - section Thanks in advance :)

Hello GSAP community, My Next.js, GSAP, tailwindcss app, version is mentioned below, "gsap": "^3.12.5", "next": "14.2.4", "@gsap/react": "^2.1.1" I have encountered while implementing GSAP ScrollTrigger with useGSAP hook, 2 issues i encountered. 1. Until and unless i set markers as true, the scroll trigger animation does not happen which means that the page is still there is no scroll. when i set that to true then scroll animation happens. 2. it has a weird behaviour before the scroll animation or before the start reaches the scroll-start the component is black or the screen becomes black and on end too it becomes black I have spend days on this problem and could not find a solution over here. I have searched everywhere but there is no such problems that i am facing. Here is my files that might be needed to solve this issue. index.tsx SectionScrollFirst.tsx FeatureAbout.tsx _app.tsx package.json _app.tsx page.js

Good morning everyone. this is the first time I am using GSPA, I used to use scrollMagic, but on this apprlication, it did not prove to be up to scratch. I re-developed using GSAP the project, but I still have a problem (I solved one, but have another). I have prepared this example, however, you do not generate the error in this simulation, but if you try it with a mobile device or with the simulation from the browser of a mobile device, you can see the problem. Here is the codePen: In practice, if you resize the window or if you start from a small window size e.g. 375 x 812, the galleries do not pin to the screen (you can see an attached image), but do so far down the screen. I have tried many different variations, but I cannot find an error. I noticed that by adding overflow hidden to the .imagesGallery class, on mobile it starts to work, but the gallery contents are cut off. Does anyone have any suggestions for me? Thank you in advance. Gabriele

This is a minimal demo of how the website I am creating might look like, there is more content in each container, but for the sake of minimalism, I have removed all of it. The main issue is that: 1. The anchor links are not working. 2. If I use touchpad and scroll left and right(horizontally) and then scroll top to bottom(horizontally), the gsap is getting triggered from where I left off and then its scrolling even when there is no content to the right. 3. It is pushing my last container to the top after I scroll there.

Hi everyone, I'm working on a Next.js project using GSAP and ScrollTrigger for horizontal scrolling. At the end of the horizontal scroll, I want the last panel to split into left and right sections. The left section should pin while the right section scrolls vertically. CodePen Example : Horizontal Scroll Example StackBlitz Project : Pin Left Section and Scroll Right

Hi, I have implemented horizontal scrolling on a component, and it works perfectly. However, if I add a page transition, the horizontal scrolling glitches and does not start properly. I checked the markers, and it seems that the triggering start shifts to the bottom of sectionRef,or 100vh lower instead of the top of section, which is how it should behave. Please try the horizonal scroll with page transition and without it, to see how it should work. You can comment the function in useGsap on page.jsx. Any improvements you can do to horizontal scroll would be appreciated:) what I found: The problem is related to the pin property, but it is necessary to keep, for functionality. The issue that pin spacer does not shift up with the other components it does not change it's position. here is the stackbiltz demo: https://stackblitz.com/edit/stackblitz-starters-61byf2?file=app%2Fpage.jsx

Hello. I'm completely new to gsap and now struggling with some issues. I have written the code below in React/Next js & tailwind, I don't set the p-s-content to overflow hidden because I need to track the scrollbar, when the user gets to the .p-s-content just begin the horizontal scrolling with .parent-section pinned. <section className={`${className} parent-section w-full h-fit flex flex-col justify-between items-center gap-8 mt-[120px] mb-16`} > <h2 className="w-full h-fit text-left text-section text-[40px] font-bold"> {title ?? "Title"} </h2> <div className="p-s-content relative w-full h-full flex justify-between items-start gap-11"> {contents?.map((item: IContent, key: number) => { return ( <div ref={sliderRef} className="w-fit flex flex-row justify-between items-center gap-8 flex-nowrap" > <div key={key} className="w-max h-full flex flex-col justify-between items-start gap-12" > <h3 className="text-[200px] text-left pl-[10px] font-bold text-blue-1"> {item?.title} </h3> <div className="w-full max-w-[546px] h-full flex flex-col justify-between items-center gap-8"> <p className="text-paragraph text-paragraph-size font-normal leading-10 tracking-[0.8px] pl-[10px]"> {item?.abstract} </p> </div> </div> <Image key={key} className="p-s-img aspect-square max-w-[515px] max-h-[515px] object-cover" src={item?.image} alt={item?.title} /> </div> ); })} </div> </section> I tried some demos of the forum but it just didn't suit my case but got me to the code below . (Calculations just made me more and more confused) the pinned element, when I reach the "start" of it , it just get to the bottom of the page and wouldn't stick in it's initial location, so the scrolling, consume I have five items, just went to the middle of the second one and stops. imageSliderRef && gsap.to(".p-s-content", { ease: "none", x: () => +(imageSliderRef.scrollWidth - window.innerWidth), scrollTrigger: { trigger: ".p-s-content", pin: ".parent-section", start: "top", end: () => `-=${imageSliderRef.scrollWidth - window.innerWidth}`, scrub: 1, invalidateOnRefresh: true, markers: true, }, }); Actually I want the .parent-section stuck to it's position and the scrolling reach the end of the width of the .p-s-content. I Couldn't provide any Codepen example but I just made sure I've explained clearly. Thank you.

Hey everyone, I love what you can do with GSAP, but I'm a total newbie and struggling with even horizontal scroll. I tried your demo for vue horizontal scroll, but can't seem to get it work in my vue project. Any advice? Thanks!

Hi there, I’m having an issue implementing a design where a vertical scroll transitions to a horizontal. The sticky horizontal scroll section is jumping when the transition happens. I have done a similar setup that doesn‘t include scroller: ".outer" where it does not occur, how ever this content will be loaded in a modal and from what I have ready I need to use scroller so it is not connected to the body container. You will see the first image jump upwards when rapidly scrolling. It seems to occur more on the first and last couple images. Any help would be greatly appreciated.

Hi GSAP community, Can anyone help me with the following issue? I'm using ScrollTrigger to horizontally scroll/pin a few slides. The number of pixels to scroll (x) is a dynamic value: the overflow of the row with slides compared to it's parent. This works perfectly on the initial load of the page. But if you resize the viewport to a point where the parent narrows the pin end point gets off. I made a minimal demo to reproduce the issue. Resize the window to a point where the parent/container (blue border) narrows. You'll see that the last slide (the end of the scrub) won't line up with the parent container (blue border) anymore. I assume my function to calculate the overflow is wrong. Any help is greatly appreciated!

Hello ! I'm new with scrollTrigger and I don't understand how I can pin elements inside my horizontal scroll section. For example, in this codepen : https://codepen.io/PaulettePaillette/pen/MWjeqdb I would like the scroll to stop when the number 3 (grey div) "touch" the left side of the screen. And then the number 4 scroll above the number 3 section and the classic horizontal scroll continue. I think it's possible, I hope, but I don't understand how to make it. I hope my issue is clear, and someone could help me on it. Thanks

Hello! I am quite new to GSAP and I am trying to make a slider using Draggable. I am trying to display a caption when an item is above the arrow (the '\/'). I got working for the right side. However, I can't get the draggable to be able to drag all the way to the left without messing up getting the 'content-box' index in the OnDragEnd function. Please, let me know how to solve this. Thanks in advance

Hello everyone, I hope you're doing well. I'm seeking immediate assistance with a topic concerning horizontal scrolling. Initially, I have an image that needs to be zoomed (scaled) from the center to the top, and then further zoomed into the center (the zooming functionality is currently working fine). Following that, I need to implement a horizontal scroll to the right. When the left edge of the text card reaches the center of the viewport, it should reveal a line (desktop-line-animation) towards the image, which is positioned halfway on the left side. The scrolling should be pinned while extending and reducing the line. Once the line is completely revealed, scrolling should continue, and the text needs to change to new content until the video comes fully into view, at which point the scrolling ends. I've been using stops, but currently, everything occurs after the image has finished zooming and before scrolling starts, resulting in a significant delay. Any suggestions or improvements to optimize this process would be greatly appreciated. I'll attach a desing and to show you how it should look like:

I am currently having some problems with my first time using GSAP. This is my current code. https://stackblitz.com/edit/nuxt-starter-bjtpnn?file=app.vue,package.json How can I make the box area have the effect of the program in the CodePen？

Hello everyone, and thanks in advance for help! I am trying to create horizontal scroll animation with 3 main section where first section should be 50% width and other 50% should be 50% of first image in second section. Right now I have created with 5 sections and same is working fine if there is not different concept for middle section. On load first div appears with 50% width and 50% of second div is visible in viewport Once middle div appears in viewport it should have 3 inner divs scrolling one by one Second div on viewport initially After scrolling one by one image should move left with text appearing left aligned After completion of the above animation, the second div should swipe left and the third div should appear. having different animations on it. https://codepen.io/subho0777/pen/gOEdjMV

Hi Everyone, Hope everyone is doing good. I am facing a small problem that I cant seem to solve. issue is that while i scroll vertically there a section that scroll horizontally (like a image carousel) then unpin and continou scrolling vertically. ISSUE: the issue is where the trigger should unpin. now it unpin when the left side of last image has touched the left side of parent div leaving a big white space. Example From Images. What I want: when the last image is shown, just stop the horizontal scrolling and unpin the section don't drag the last image to the right side https://codepen.io/Fawad4real/pen/abMRqLZ

Hey Guys, I am trying to create a custom cursor with gsap. My site is horizontal scroll based as you can see in the codepen demo. The problem is whenever I am scrolling the cursor also moves up. How can i stop this from happening and make it behave just like a normal cursor. I am working in Next JS with the cursor being a separate component. Please help me. Thanks alot