Search the Community

I've been banging my head against this for several weeks and have not been able to solve, hoping someone here will have a flash of brilliance. I've got a vertical scroll going into a horizontal scroll, then going back into vertical scroll. The second vertical scroll should pin the first section as soon as it hits top left of viewport, but it's not, and I've tried various approaches to both left and top values to account for the horizontal scroll that precedes it. Because you can't pin inside a horizontal scroll, I've got section 5 acting as my 1vw container, and I'm calculating x and y position for section 6 so that as you scroll right (down) it approaches the left viewport. When it reaches 0, 0 it should pin #section6, but I believe the start calculation isn't correct (I've left one of my attempts commented out above to show you what else I've tried). Anyone have any clue how to solve for this? PS: note I'm using smooth scrollbar, which is probably accounting for some of the difficulty of making this work.

Hello, I hope you are well. First of all may I note that I am new using GSAP and that I am using it in React ("gsap" and "gsap/react" libraries). I want to reuse an animation, that basically is an horizontal scroll. Even though the animation works perfectly, I need the viewport to be centered on the whole parent section (so the title "Algunos proyectos_" and filter stays on sight). I tried setting the trigger by the section ID that is 'projects', by using document.querySelectorAll("sections.projects"), etc but always without the expected results. Can you guide me through or give me some assistance please? Thanks in advance! P.S.: This is how is seen while the animation takes place: P.S.2: This is how it should be seen while the animation takes place:

Hello everyone. I'm in a pickle. Here you can see the page I'm trying to develop. The idea is: the page is divided into several sections. Upon scrolling, each section stays sticky while the next one overlaps it. Everything would be fine, but section 3 contains several blocks with horizontal scrolling. And this section 3 doesn't stay sticky as the rest of the section. I'm only a beginner in GSAP and I don't know how to fix this issue. I will be very happy for any help or advice. Thank you in advance.

Hello, I am currently working on making a small website for my club. The issue I am facing is that I have a small section of 3 <section> tags of each height 100vh and 100vw and I am using a scrollTrigger to horizontally scroll them. Exactly like the svelte playground here: https://svelte.dev/playground/c3b97847be2b410e8f0f136c243387ef?version=5.9.0#H4sIAAAAAAAACrVUTYvbMBD9K4MOJWnz5V160TqGPfVUujSFHqoeHHviqFUkI42zG4L_e5EtO042uyy0DZiY0Zv3nubDR6bTHTLOPq3uH-AdrDJrlPpmZVGgha9YKlhRagktm7CNVOgY_3FkdCh9kg-wSUdxX5Yzt0dFPrZOHV6LZ0YTanKMs9hlVpaUCC1I7kpjCQqXlrCxZgeC-XfB7ganxwt79RA6Pzu7SDT6s6k09QmtnRakBSkk8MZSqdF-2Wwc0neZ07bh8E_IH43GsEzg2ITJq84sFtIR2gdVFVKPzkyM2_yG3mFG0mgHy-aSs4qkcjMy99amh5FgM4eZYF3GQIDMqMuddMoATw9oM9TEYRotFvAeetBMoS5oC1OIxpMOjqlDDoJpo1GwEBaUVzb1SRw-9lA3vAE_KQJQFxNs1lerZ_OIUmoOZCscxFxmqzWHaBBCnXNoSynYh6Vg8OFq-buMun2p2-rUY9-0eH6aHh3vUqkhU6lzS8EG3hKhvWCcyz2spc65ObEvj9c06xdo2oLFoco9yGHmWxsNMA1uG_UQwZJVyIri-TY6kc0DW9KNWeP1BYmbIAHh94LETS_RgJ5JvHaL27dJ3L4mQfE8l_vEN8g3pW2Po4PCpN210-gch7O-Ufg0zaVtuThY83jX9T-XrlTpgYMH3fmWNuhHm5YctPH_YZGbSfGrFLgffUs5RIvFvqXrARGcyW9RFltqkWHt6VL2ms3MqGqnw-E6zX4X1lQ6n2ZGGcthrSoMh78qR3JzmIYPIAe_vmgvTiXhzp2d1aFsfgQ6z291-9yQxfwtN_kHZm__3uwBlerH4D_6bVYjnndTyiaM8IkY91-y-mf9BxuW0z0kBwAA My problem is that on the first load of the website the horizontal scroll section breaks at the very end and furthermore it breaks the rest of the website as well. Here is a small video showing you the issue I'm facing: https://streamable.com/pgg7pe You can take a look at the website here as I don't have a codepen for it but the website is hosted here: https://www.clubgraphica.tech/ And you can take a look at the source code if you so wish to here: https://github.com/LightningFryer/graphica-core As you can see the site breaks at the section of the horizontal scroll on the first load of the website (without caching), but on the second load of the website the site works fine. I'm also sharing a snippet of the code of the section with the horizontal scroll below: <script lang="ts"> import gsap from 'gsap'; import ScrollTrigger from 'gsap/ScrollTrigger'; import { onMount } from 'svelte'; let containerOffsetWidth: Number; import dept_gd_sec_card from '$lib/images/gd_sec_card.webp'; import dept_3d_sec_card from '$lib/images/3d_sec_card.webp'; import dept_ui_ux_sec_card from '$lib/images/ui_ux_sec_card.webp'; import dept_web_dev_ux_sec_card from '$lib/images/web_dev_sec_card.webp'; import Device from 'svelte-device-info'; import { stopOverscroll } from '$lib/anims/helperFuncs'; // import { Star } from 'lucide-svelte'; onMount(() => { let sections = gsap.utils.toArray('.department-sec'); gsap.registerPlugin(ScrollTrigger); // ScrollTrigger.normalizeScroll(true); ScrollTrigger.refresh() gsap.to(sections, { xPercent: -100 * (sections.length - 1), ease: 'none', // duration: 2, scrollTrigger: { trigger: '.container', pin: true, scrub: 1, // snap: 1 / (sections.length - 1), end: () => '+=' + containerOffsetWidth || 0 } }); gsap.from('.intro-text', { opacity: 0, yPercent: -100, duration: 1, scale: 2, stagger: 0.3, ease: 'power4.inOut', scrollTrigger: { trigger: '.department-intro-sec', start: 'top 50%' } }); gsap.from('.dept-card-sec-1', { opacity: 0, yPercent: 50, xPercent: -50, duration: 2, ease: 'power4.out', stagger: 0.4, rotate: 45, scrollTrigger: { trigger: '.department-gd-3d-sec', start: 'bottom right' // markers: true, } }); if (!Device.isMobile) { gsap.from('.dept-card-sec-2', { opacity: 0, yPercent: 50, xPercent: -50, duration: 2, ease: 'power4.out', stagger: 0.4, rotate: 45, scrollTrigger: { trigger: '.department-ui-web-sec', start: 'bottom left' // markers: true } }); } else { gsap.from('.dept-card-sec-2', { opacity: 0, yPercent: 50, xPercent: -50, duration: 2, ease: 'power4.out', stagger: 0.4, rotate: 45, scrollTrigger: { trigger: '.department-ui-web-sec', start: 'right center' // markers: true } }); } }); // right center for phones </script> <main class=""> <div class="container flex max-h-screen min-w-[300vw] flex-row" bind:offsetWidth={containerOffsetWidth} > <section class="department-intro-sec department-sec flex h-full w-[100vw] flex-col items-center justify-center bg-accent text-base-200" > <!-- This is the background image that looks like the exploding thingy. DO NOT DELETE --> <!-- <div class="absolute z-0 scale-[1.3]"> <img src={dept_intro_blob} alt="dept_intro_blob" /> </div> --> <div class="flex h-full w-full items-center justify-center"> <div class="flex flex-col items-center justify-center"> <h1 class="intro-text text-center font-bebas text-3xl text-white md:text-7xl"> What about our <span class="text-[#ffda45]">various departments</span> you ask? </h1> <h1 class="intro-text text-center font-bebas text-3xl text-white md:text-5xl"> Scroll on to see what <span class="text-7xl">we</span> have to offer! </h1> </div> </div> </section> <section class="department-sec department-gd-3d-sec flex h-full w-[100vw] flex-col items-center justify-center" > <div class="h-full w-full"> <div class="flex flex-col items-center justify-center md:flex-row md:gap-0"> <div class="dept-card-sec-1"> <img src={dept_gd_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" /> </div> <div class="dept-card-sec-1"> <img src={dept_3d_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" /> </div> </div> </div> </section> <section class="department-sec department-ui-web-sec flex h-full w-[100vw] flex-col items-center justify-center" > <div class="h-full w-full"> <div class="flex flex-col items-center justify-center md:flex-row md:gap-0"> <div class="dept-card-sec-2"> <img src={dept_ui_ux_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" /> </div> <div class="dept-card-sec-2"> <img src={dept_web_dev_ux_sec_card} class=" scale-[0.7] rounded-xl" alt="gd_sec" /> </div> </div> </div> </section> </div> </main> <style> .department-intro-sec { position: relative; /* width: 100vw !important; */ height: 100vh; /* Full viewport height */ background-image: linear-gradient(to right, #ffffff7f 1px, transparent 1px), linear-gradient(to bottom, #ffffff7f 1px, transparent 1px); background-size: 70px 70px; /* Set grid cell size */ background-color: black; animation: moveLeft 2s linear infinite; } .department-gd-3d-sec { position: relative; /* width: 100vw !important; */ height: 100vh; /* Full viewport height */ background-color: black; background-image: linear-gradient(to right, #ffffff7f 1px, transparent 1px), linear-gradient(to bottom, #ffffff7f 1px, transparent 1px); background-size: 70px 70px; /* Set grid cell size */ animation: moveLeft 2s linear infinite; } .department-ui-web-sec { position: relative; /* width: 100vw !important; */ height: 100vh; /* Full viewport height */ background-color: black; background-image: linear-gradient(to right, #ffffff7f 1px, transparent 1px), linear-gradient(to bottom, #ffffff7f 1px, transparent 1px); background-size: 70px 70px; /* Set grid cell size */ animation: moveLeft 2s linear infinite; } @keyframes moveLeft { 0% { background-position: 0 0; } 100% { background-position: 70px 0; /* Moves by exactly one grid cell size */ } } </style> Sorry if I am not able to provide more information but I just want this issue to be fixed and yes I also do understand that this issue is hard to recreate all the time as the issue only occurs on first load when the website isn't cached yet is what I'm guessing. Thank you for your help!

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.