Search the Community

I've recently started learning GSAP so i am not too familiar with it. Im building a website for my business and wanted to implement GSAP ScrollTrigger to add some flare to it. For my website, I used scrollTrigger to make a horizontal scrolling section on MOBILE DEVICES only. When I viewed the section on testing environments and codePen it worked well and as it was supposed to: - The website would scroll vertically like normal until it reached the the section titled "We Provide Opportunity to Aspiring Businesses by ". This section would then to snap into place and begin scrolling horizontally until it reaches a the 3rd card, then continue scrolling vertically like usual. When i posted it to my live testing site (testinghub.dev) it didn't work the same: -What happened on the real web, is when the section "snapped" a large empty section would appear in between where it was supposed to snap and where the cards are in view (you have to scroll very far down to see it). Once you do the cards, it doesnt even scroll horizontally. Its really weird. Like i said, the codePen is the exact code i used (withought the images) and it works fine, but it doesnt work in the real world. I dont know why. CONTEXT: I used an iphone 16 to test the live website. I havent used an android device as i dont have one. GSAP CODE: gsap.registerPlugin(ScrollTrigger) document.addEventListener('DOMContentLoaded', sideScrollers); window.onresize = sideScrollers; let mobileQuery = window.matchMedia("(max-width: 450px)"); let desktopQuery = window.matchMedia("(min-width: 451px)") function sideScrollers(){ //maybe i put this inside an if statment/ conditional function if(mobileQuery.matches){ let sections = gsap.utils.toArray('.card-scroller .card-container') let tl = gsap.timeline({ scrollTrigger: { trigger: ".card-scroller", pin: true, anticipatePin: 1, scrub: 0.5, start: "top 4%", //was 6% (incase it broke EVERYTHINGGG) end: "+=3000", snap: {snapTo: [0, 0.5243, 1], duration: 0.2, delay: 0.1, ease: "circ.Out"}, } }) tl .from(".translate", { delay: 0, ease: "circ.out", duration: .04, y: 25}) .to(sections,{ duration: .15}) .to(sections,{ ease: "power1.inOut", xPercent: -113 * (sections.length - 1), }) .to(sections,{ duration: .15}) } } GSAP FILES: <script src="JS/gsap.min.js"></script> <script src="JS/ScrollTrigger.min.js"></script> Can someone please help me with this? If needed you can copy and paste the code on a testing site if you have one as well to view the issue im talking about. Let me know if more context or details are needed!!!

Hi there, I am currently making a horizontal scroll element and I am wanting to add markers to individual elements to trigger something to happen when they reach a certain point on the screen horizontally. I have it working for the most part, however when scrolling backwards, the first item isn't reaching that trigger point, naturally, as it starts way before that point. Is there a way to handle this? I was thinking to do something whereby if it reaches the start of the timeline again I can manually trigger something to happen 🤔 I have attached a simple set up and am console logging out the images when they reach the point, so you can what I mean about the first image once you go past it and go back. Thanks in advance

So I'm trying to implement a basic horizontal scroll which scrolls across 3 sections upon entering a "container" object. But for some reason the scroll is buggy and the scroll doesn't show any of the sections after the first one. I've attached a link to a sveltekit playground demo. Please look into it. Thank you! https://svelte.dev/playground/c3f9045c97d8440daf51e5c2eb354577?version=5.9.0 I know this question has been asked a ton before but it hasn't been asked for sveltekit specifically and I'm finding it hard to find a solution for it. Sorry!

Hi all, I know this topic has been drummed to death but I simply can't get my solution to work. I'm creating an animation within a ScrollTrigger, where each box that comes into view grows in height and reveals it's content. I've tried looping through each element as multiple other threads have suggested, but I just can't get it to work. All of the blocks animate in sync at the same time which is not what I'm looking for. I'm looking to have them animate as they pass onto the screen or when they're something like 50% within the viewport. Any help would be greatly appreciated.

I am a beginner in gsap and I have a next.js project with tailwindcss. What i need to do is a pinned section with 3d cards that can scroll horizontally. The user can only "pass" this section if he has scrolled all the cards in the session. Each 3d card have a rotate x animation, but this 3d animation must be start just when the scroll is in the current card. I already found a lot of "horizontal scroll" in gsap community forum but I can't apply in my case. I don't know if there is a styled in somewhere confliting the animation, or the animation settings is really bad. I have the rotate x animation already, and a simple & smooth movement in all section elements, the code is below: const triggerSection: gsap.DOMTarget | ScrollTrigger.Vars = { trigger: "#projects-section", start: "-150 40%", end: "bottom 60%", scrub: 1.6, markers: false, }; gsap.fromTo( "#projects-title", { x: "-30%", opacity: 0.6 }, { x: 0, opacity: 1, scrollTrigger: triggerSection } ); gsap.fromTo( "#projects", { x: 0, opacity: 0.6 }, { x: "-10%", opacity: 1, scrollTrigger: triggerSection } ); gsap.timeline({ scrollTrigger: { id: "project-cards-trigger", ...triggerSection } }) .fromTo(".project-card", { rotateX: 10, rotateY: 50 }, { rotateX: 0, rotateY: 0, duration: 0.8 } ) .to(".project-card", { rotateX: 10, rotateY: -50, duration: 0.8 } ); Here is my section component with tailwind: export default function ProjectsScene({}) { const { projects } = portfolio; useLayoutEffect(() => { gsap.registerPlugin(ScrollTrigger); ScrollAnimation(); return () => { UnmountAnimations(); }; }, []); return ( <section data-scroll data-scroll-section id="projects-section" className="relative flex min-h-dvh w-full flex-col items-end justify-center gap-3 px-4 sm:px-8 md:px-16 lg:px-24 xl:px-48" > <TagText id="projects-title">projects</TagText> <div id="projects" className="flex w-max items-center justify-end gap-10"> {projects.map((p) => ( <ProjectCard key={p.title} project={p as Project} /> ))} </div> </section> ); } I would like to receive any tips to work with gsap and a possible fix for my issue. If you need more details please tell me, i am available to send it. Thanks, Eric Zardo.

Hello, everyone! I made this horizontal scroll using gsap. But switching the active class for the link does not work for me and when I click on the link again, the active section scrolls to the left.

I'm trying to have a section that scrolls horizontally while you scroll down, (it looks ugly on code pen because it doesn't have my local files and the rest of the CSS. Just what's necessary). I was looking at videos on how to do this, and although it seems simple enough, I cant get it to work. Can somebody help me understand what I'm doing wrong? I am new to using GSAP and don't have a complete understanding of it just yet although I've been looking into it extensively. What I'm looking to create is a horizontal carousel that will pin to the container and start scrolling across cards in the carousel as the user is scrolling down. after the carousel reaches the end it should continue scrolling down through the rest of the page like normal. This is a good example of what I'm looking for Instead the carousel is stagnant. instead of pinning to the carousel and scrolling horizontally like it should, the viewport scrolls right past without showing the other cards in the carousel. I downloaded the files for GSAP, I added "gsap.min.js" and "ScrollTrigger.min.js" along my main js file to my local js folder for my website. Then I added them into my html file like so: <script src="JS/gsap.min.js"></script> <script src="JS/ScrollTrigger.min.js"></script> <script src="JS/main.js"></script>

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