Search the Community

Hi all, I'm building a section for a website with separate ScrollTriggers for desktop and mobile. The desktop one is a split screen with two columns, the left having a pinned image container with cycling images and the right column with scrolling text. In the mobile version the items are set up as panels, scrolling on top of each other. I have two problems and can't figure it out. in the desktop version, when the new trigger is fired, the background color is animating, but it shortly resets to the body color in the mobile version (<600px) it works well, since I could set the background color on the panel in the forEach loop instead of the larger section color. Here the problem is that after the fourth item, the pinSpacing:false that I set on the ScrollTrigger makes the content after the trigger, so the next section on the page, fall behind the last panel. I can't set pinSpacing to true, since then the panel animation won't work anymore. I tried to look these things on the forum but couldn't find the solution, sorry. Hope you can set my off on the right path, appreciate the help.

I have created a UI with a ladder-like effect using ScrollTrigger. Ladder-like UI The basic behavior, etc. is fine, but when displayed on a smart phone, the behavior is not right, so I tried to adjust it in MatchMedia as follows. New version of ladder-like UI For some reason, on Code Pen, the MatchMedia version only allows scrolling and the first one, but locally, scrolling was not a problem. However, is MatchMedia the right solution to adjust this UI and scrolling behavior on a smartphone? Any other Tips and Tricks for this?

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:

I am new to frontend and have started using gsap for animations. I use gsap mainly for switching between sections. On screens larger than 576px I have a problem: when switching between sections there are jumps and they disappear after a while if you scroll up and down the page. Maybe someone has encountered this ? I don't seem to have a lot of animations so far, but already so laggy. Here's what I tried to do: 1. Remove all possible negative margins. 2. Add to all elements to which the transition is made, properties: transform: translate3d(0,0,0,); will-change: transform; backface-visibility: hidden; 3. Set property ease - sine, power1, power2. All this had no effect. In the mobile version I have a lot of animation that works perfectly with gsap.

Hi all, I must be getting scrollTrigger's behaviour wrong, but I can't figure out what I am missing since I believe to stick closely to the documentation. The content of my webpage features four sections tagged by the class .sectionContainer, each with a height equal to exactly 1 viewport. Once the user finishes scrolling, I want the page to snap to the closest position that shows one full .sectionContainer. In other words, I don't want the page to rest in between two sections. However, when I scroll through the attached example, GSAP often snaps to positions that lie in between two sections, even though I believe my snap points are calculated correctly. Also the onSnapComplete callback shows that the scroll progress at the snap point is different from the actual snap point. F.e. totalHeight of 3578px, sectionHeight of 832px and the 50px padding at the top of .contentContainer imply a first snap point of 0.0139742873113471 by the mapping function sections.map((_, i) => offSet * (i + 1) + i * sectionCoverage). Similarly, for the #secondSectionContainer, the snap point is 0.26048071548351, which seems conceptually correct to me, but the code's behaviour disagrees and snaps to a point within #firstSectionContainer. Can someone please point me to what I am missing?

I have a video on my website that’s controlled by scrolling up or down, meaning the video plays forward or backward as the user scrolls. I followed this post to achieve this effect and already encoded the video using FFmpeg with this command: ffmpeg -i input.mp4 -vf scale=960:-1 -movflags faststart -vcodec libx264 -crf 20 -g 1 -pix_fmt yuv420p output.mp4 It works smoothly on desktop, but not on mobile devices. I’ve tested it on my Android phone, and the performance is far from smooth. Any ideas on how to fix this? Thank you all!

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've searched the forums for a solution for this but most is related to ScrollTrigger scrolling us to a section whereas I need to solve a bug I've encounted when using ScrollTrigger to create a horizontal slider section... Works ok could probably be better in terms of improving it as it feel a little janky compared to a scroll magic one I created years ago? Anyway to my issue if I have a #contact-us anchor link in my sites main header and a module on the homepage with the ID of contact-us you'd expect when on any page if you click this link it goes to the homepage and scroll to the contact-us section but since on the homepage we have the ScrollTrigger horizontal slider the homepage just loads and no scrolling happens. I've removed the gsap code from my site and everything works as expected. So expect this is an issue with the scrollTrigger logic I have added to my site. I wonder if anyone is able to help me. I'm very new to gsap and ScrollTrigger. Apologies for not creating a minimal demo as my issue is only when going from one page to another I don't think codepen.io will work? Also to mention if I'm on the homepage after the page loaded if I click the link in the header scrolling to contact-us works fine. my gsap code: import gsap from "gsap"; import ScrollTrigger from "gsap/ScrollTrigger.js"; function gsapAnimation() { gsap.registerPlugin(ScrollTrigger); const horizontalSection = document.querySelector(".horizontal-carousel"); const items = gsap.utils.toArray(".horizontal-carousel__item"); const container = document.querySelector(".horizontal-carousel__wrapper"); const itemWidth = window.innerWidth >= 992 ? (window.innerWidth / 3) : window.innerWidth; const totalWidth = itemWidth * items.length; if(container) { gsap.set(container, { width: totalWidth + "px" }); } if (horizontalSection) { const tl = gsap.timeline({ scrollTrigger: { trigger: "#horizontal-scroll", start: "top top", end: () => `+=${totalWidth - window.innerWidth}`, pin: true, scrub: 1, anticipatePin: 0, invalidateOnRefresh: true, } }); tl.to(horizontalSection, { delay: 0.5, x: () => -totalWidth + window.innerWidth, ease: "none" }); } } export default gsapAnimation; If I need to and can I'll try provide any required, thanks in advance for any help on this... I've now added the a codepen.io link but not sure that helps at all and the horizontal slider on there doesn't work half as well as the one on my website? I can provide a staging url of the site if needed? Steps to re-produce issue: 1. Add anchor link to site header i.e #contact 2. Add section on homepage with id contact 3. Navigate to any other page but the homepage 4. Click the Contact Us link with the https://site-url.com/#contact-us href Issue appears where homepage loads but no scrolling happens. What should happen? Homepage loads and scroll to element with the ID of contact. NOTE: This is a WordPress website not vue/react/etc. codepen.io isn't ideal because I cannot create 2 html files to showcase navigating from homepage to another page. VIDEO: https://streamable.com/wz9f1c

Hi there, my app / wegpage suffers from odd scroll behaviour. I gave the debuggin quite some time but nothing seems to work. I use a ScrollSmoother and several ScrollTriggers with snap to labels in nuxt. When one enters the page first time everything works as expected, after navigation / route chnage. the page scrolls to a positon (It seems like the last one on previous page.) Disabling ScrollSmooter helps. Or removing the snap from the triggers also fixes the issue. But maybe I am doing something wrong and I would not have to decided which one to use. I created a stackblitz based on the starter template. it replicates the issues quite well. Steps to reproduce Scroll down the first page (home) to anywhere a bit Change to "Images" in naviagtion Scroll a bit down the page Wait 1s or so, page starts to scroll somewhere https://stackblitz.com/edit/nuxt-starter-txte1rew?file=pages%2Fimages.vue thx for the support.

Hello, I'm building a site and using scrollTrigger to animate a logo. The idea being that on scroll down, the logo stretches from 0% height to 100% height, starting from the bottom of the screen, and then collapses from bottom to top. That part is working fine, but I can't seem to get it working properly in reverse (on scroll up). The first part works fine (it stretches down from the top to the bottom), but then it collapses back into the top, rather than collapsing back into the bottom, and then gets stuck in that state on any future scrolls. Any advice would be hugely appreciated! Staging page here: https://amy-heycock.webflow.io/ Code here: gsap.registerPlugin(ScrollTrigger); let tl = gsap.timeline({ scrollTrigger: { trigger: ".logo-container", start: "top bottom", end: "bottom top", scrub: true, } }); // Step 1: Set up the SVG, initially at the bottom gsap.set(".logo-svg", { height: "0%", position: "fixed", bottom: "0", // Start at the bottom of the screen width: "100%", transformOrigin: "bottom center" // Start growing from bottom to top }); // Step 2: Grow the logo from bottom to top on scroll down tl.to(".logo-svg", { height: "100%", duration: 1 }); // Step 3: Shrink the logo from bottom to top on scroll down tl.to(".logo-svg", { height: "0%", duration: 1, top: "0", // Keep the top fixed bottom: "auto", // Shrinks from bottom to top transformOrigin: "bottom center" // Shrink from bottom to top }); // Step 4: After collapsing, remove fixed positioning tl.set(".logo-svg", { position: "relative" }); // Step 5: On reverse (scroll up), grow from top to bottom, and shrink from top to bottom tl.eventCallback("onReverseComplete", () => { gsap.set(".logo-svg", { transformOrigin: "top center", // Grow from top to bottom on scroll up bottom: "auto", // Reset bottom for reverse direction }); tl.to(".logo-svg", { height: "0%", duration: 1, transformOrigin: "top center", // Shrink from top to bottom top: "0", bottom: "auto", }); });

Hi there!! 👋🏻 I am using GSAP for the first time and I am loving it!! But I would do with some help on a slider like animation I am creating for a client. This is done in Webflow using Saddle Framework. I will share Read Only link at the bottom of the message, but first some context. The client wants a slider with 2 sets of cards that animates on scroll. We use a switch to go from one slider to the other and here is where I am having a problem... When I click on the switch a new timeline gets set creating a timeline hell situation that scales the more you switch between the 2 sliders... I've tried to kill the tweens with ".killTweenOf()", to use the timeline object and kill it to reset it, and nothing seams to work... Here is my JavaScript: // wait for DOM and scripts to load window.addEventListener('load', ()=> { // GSAP Services Slider Switch Animation const section = document.querySelector('[bs-servicesSlider-element="section"]') const switchButton = section.querySelector('[bs-switchButton-element="switch"]') const toggle = switchButton.querySelector('[bs-switchButton-element="toggle"]') const leftText = switchButton.querySelector('[bs-switchButton-element="leftText"]') const rightText = switchButton.querySelector('[bs-switchButton-element="rightText"]') const retailerTrack = document.querySelector('[bs-servicesSlider-element="retailerTrack"]') const brandTrack = document.querySelector('[bs-servicesSlider-element="brandTrack"]') const items = [...document.querySelector('[bs-servicesSlider-element="list"]').children] const retailerItems = items.filter(item => item.children[1].innerHTML === 'Retailer') retailerItems[retailerItems.length - 1].style.borderRight = "none" retailerTrack.append(...retailerItems) const brandItems = items.filter(item => item.children[1].innerHTML === 'Brand') brandItems[brandItems.length - 1].style.borderRight = "none" brandTrack.append(...brandItems) const retailerProgressBar = section.querySelector('[bs-servicesSlider-element="retailerProgressBar"]') const brandProgressBar = section.querySelector('[bs-servicesSlider-element="brandProgressBar"]') let click = 0 // GSAP Service Slider Scroll Animation const commons = { duration: .4, ease: "circ.inOut" } const scrollTriggerCommons = { start: 'top 25%', end: '200% 25%', scrub: true, markers: true, toggleActions: 'play pause reverse pause' } const retailerStrollTrigger = { trigger: retailerTrack, ...scrollTriggerCommons } const brandScrollTrigger = { trigger: brandTrack, ...scrollTriggerCommons } const setSliderAnimation = () => { const track = click === 0 ? retailerTrack : brandTrack const progressBar = click === 0 ? retailerProgressBar : brandProgressBar const scrollTrigger = click === 0 ? retailerStrollTrigger : brandScrollTrigger const trackPosition = window.innerWidth - track.offsetWidth gsap.to(track, { x: trackPosition, ease: commons.ease, scrollTrigger: scrollTrigger }) trackPosition === 0 ? progressBar.parentElement.classList.add('u-hide') : progressBar.parentElement.classList.remove('u-hide') gsap.to(progressBar, { width: progressBar.parentElement.offsetWidth, ease: commons.ease, scrollTrigger: scrollTrigger }) } // GSAP Toggle Animation const toggleAnimation = () => { gsap.to(toggle, { xPercent: click === 0 ? 0 : 100, }) setTimeout(() => { if(click === 0) { rightText.classList.add('u-hide') leftText.classList.remove('u-hide') } if(click === 1) { leftText.classList.add('u-hide') rightText.classList.remove('u-hide') } }, 200) } // GSAP Theme Animation const theme = { lightGrey: '#f0f0f0', darkGrey: '#232323', yellow: '#e8f83d' } const themeAnimation = () => { gsap.to(section, { backgroundColor: click === 0 ? theme.yellow : theme.darkGrey, color: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) gsap.to(section.querySelector('.subheading_line'), { backgroundColor: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) gsap.to(switchButton, { backgroundColor: click === 0 ? theme.darkGrey : theme.yellow, color: click === 0 ? theme.lightGrey : theme.darkGrey, ...commons }) gsap.to(toggle, { backgroundColor: click === 0 ? theme.lightGrey : theme.darkGrey, color: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) gsap.to([...retailerTrack.children, ...brandTrack.children], { borderColor: click === 0 ? theme.darkGrey : theme.lightGrey, ...commons }) } // GSAP Switch Click Animations const changeTrack = () => { gsap.to(click === 0 ? brandTrack : retailerTrack, { opacity: 0, ...commons }) if(click === 0) { brandTrack.classList.add('u-hide') retailerTrack.classList.remove('u-hide') retailerProgressBar.classList.remove('u-hide') brandProgressBar.classList.add('u-hide') } else { retailerTrack.classList.add('u-hide') brandTrack.classList.remove('u-hide') retailerProgressBar.classList.add('u-hide') brandProgressBar.classList.remove('u-hide') } gsap.to(click === 0 ? retailerTrack : brandTrack, { opacity: 1, ...commons }) } switchButton.onclick = (event) => { event.preventDefault() click = click === 0 ? 1 : 0 toggleAnimation() themeAnimation() changeTrack() gsap.to(window, { ...commons, scrollTo: { y: "#service-slider_outer", offsetY: 80, autoKill: true }, }) gsap.killTweensOf([retailerTrack, brandTrack], "x") setSliderAnimation() } // Resizing function const displayedCards = { desktop: 3, tablet: 2, mobile: 1 } const resizeTrack = (screenWidth, track) => { let cardsDisplayed = displayedCards.desktop if(screenWidth <= 991) { cardsDisplayed = displayedCards.tablet } if(screenWidth <= 568) { cardsDisplayed = displayedCards.mobile } track.style.width = `${(screenWidth / cardsDisplayed) * track.children.length}px` } // Init Animation resizeTrack(window.innerWidth, retailerTrack) resizeTrack(window.innerWidth, brandTrack) changeTrack() themeAnimation() setSliderAnimation() window.onresize = () => { resizeTrack(window.innerWidth, retailerTrack) resizeTrack(window.innerWidth, brandTrack) themeAnimation() changeTrack() setSliderAnimation() } }) You can find the elements in the Webflow project under "services-slider_outer", and the first section inside the inner wrapper has the JS object with the current code. Please, I need help as this is a key element of the project and I cannot create this animation with Webflow's animations since I need to dynamically change the width of the scroll animation. Thanks in advance!!! Link: https://preview.webflow.com/preview/buzket-space-v2?utm_medium=preview_link&utm_source=designer&utm_content=buzket-space-v2&preview=ff7a7c3ed6298bc1e243bd83225520d8&workflow=preview

Hello, Im hoping to get some help with animation using scrollTrigger then move x and y + scale. I am trying to make the following animation (reading this after viewing codepen might make more sense): - once the green background element hits the top of the viewport (image should be fully centered when this happens) - Then as we scroll a set amount (currently 1700), i want it so that the icon (in the codepen it is a plus) is fully centered and covering the screen virtically (I also want this to work dynamically with different screen ratio). Imagine if the image + icon were equivalent to a screenshot of a chrome tab with a chrome extension, and we are trying to zoom into the chrome extension as we scroll. I am currently struggling to get this to work... The x axis (x movement) and scaling seems to work perfect, but the y axis (y movement) and scaling seems to be off... If anyone could point me to the right track or help me to get this work, i would really appreciate that. For reference, Ive attached what I am thinking of. Initial screen (right as the scrollTrigger starts): Final screen (right as scrollTrigger ends). Blue/purple box is the imaginary screen, and icon fills up the height of the screen fully. Codepen:

Hello everyone, I hope you are all well. I have a problem after trying to use toggleAction, this error appears in the console "Invalid property" "toggleActions" "set to" "play pause resume reset" "Missing plugin? gsap.registerPlugin()"

Hi guys hope you are doing good. Iam facing issue while working with my project iam trying to add dynamic section to existing one which already have scroll trigger and animation executed new section too have animation. when i add this new section its break animation of below section and add blank spacing as well in my production project it stop the below animation too. i have some sort of builder customizer so that when i changed content too it first removed the section and then append it the same position. e.g.. if section is placed over 3rd position then after content change it again added on same position when its added it give blank space for below section which have scroll trigger initialized as well stop the animation performed on it. I can't kill all trigger and the reinitialize all section again as it will compromise the performance by removing and adding animation for all section again and again. Please note - animation only break section below the newly added section. Tried with refresh each scrolltrigger again but its not worked. using forcefully refresh [ScrollTrigger.refresh(true);] Thanks in advance for any help or suggestion

The revealed images are not syncing correctly with the image headings. When an image heading reaches the top of the image box section (p-wrap), the image box still displays Image 1. Additionally, the pinning should stop once all images have been revealed. Please help me here...

Hello everyone. I need some help. I need to create a scroll animation as shown in the screenshots. The first screenshot shows how the right block should look at the beginning: the first text is fully visible, while the next one is partially visible. The second screenshot shows what should happen during scrolling. The text should shift to the left and move upwards. When the text reaches the top of the section, it should fade out (opacity decrease). So far, I haven’t been able to get it to work. I’m not sure what’s the best way to do it—should the text be positioned using flex and gradually shift left and up, or should it be arranged in a column from the start and move left and up in sequence? I’d really appreciate any help!🙏

Hello there New to GSAP here, sorry in advance if this question has been asked before ! I have two sections ("section_one" & "section_two") I want to animate a float from 0 to 5 when scrolling the first section and then from 5 to 10 when scrolling the second section. The code works as intended when I remove the ScrollTriggers, but when I add them, the value resets back to 0 between the first and the second trigger. Here is a code pen sample where you can see the logs of the value in the console. Thanks in advance for you help !

Hi, I'm just started learning gsap animations and i'm trying to make a text animation but i don't know how. By scrolling, I want to show the new text and minimize the old text. The final result should look like this: Can you give me any advice? Thank you so much.

Hi there again lovely GSAP community 👋🏻 I've tried various approaches to create a scroll based Header but wasn't able to come to a satisfying result 😔 I hope some of you might point me in the right direction. What I am trying to achieve This in a full height page header, pinned at start. From the start: show a slider (just a text for simplification for the moment) When the user starts scrolling the foreground/text of the slider is hidden, but the the background image is kept A large card appears on top of it in the center Then multiple "slides" inside that card are traversed through when scrolling Simplified text-only slide for now...this will be more complex in the final version with an illustration besides text, both will be animated...not fully sure what animation I want to use there between the cards. When the last card is reached and the user scrolls on the header is unpinned and the normal rest of the page's content follows. Visual: Approaches I tried I tried multiple approaches but could not reach a good state while trying (and struggling) quite a bit 😬 The best was in this direction: https://codepen.io/aaronmeder/pen/dPyYvRZ Basically each "step" listed above has a label, then it will snap to these labels. I tried with lots of different values for timing and snapping, but just couldn't get it to feel good enough. Also the feeling is quite different for a touchpad or a mousewheel - have not even tried mobile 🥵 Looking for help ❤️ I am very unsure if the whole setup I am trying makes sense or if there is a much better way to set things up. The feeling / behaviour I am looking for would be much more like https://alvarotrigo.com/fullPage where for each "scroll tick" it goes right to the next "step"...I never want to "wait to much" in between steps or "land in a in-between state". Is there maybe a better way to achieve this withoutscrub& snap? I found many demos (also official ones) that show you a behaviour where you Would really appreciate help! Aaron

I am trying to achieve the following: Once the User starts scrolling, the Navbar collapses to a maximum height of 48px as much. Also some letters get opacity 0 unless there is an hover Problem I see is that in low resolutions it is scaling more. Probably there is a better approach for this Any help is welcome

Hi there, I’ve encountered an issue in Chrome (both on desktop and mobile) related to ScrollTrigger. When using translate-based animations, Chrome translates the content in a single step during scroll, but ScrollTrigger seems to execute the animation in "two steps." This results in a jerky and non-smooth effect. I’ve attached a video showing the behavior on desktop and a CodePen with my code. For pin is the same, when the element goes fixed it jumps Thank you! Untitled.mp4

Hi guys, hope you're doing well. I got a problem right now by integrating gsap with next.js What I want to achieve: - Got <body/> and <html/> overflow:hidden to avoid mobile adress bar to show/hide and to avoir to use normalizeScroll - Using a scroll proxy with ScrollTriggers and add a smooth effect on them with Lenis - ScrollTrigger.update on my main RAF to got lenis, gsap, and three.js sync Here you got isolated code : https://stackblitz.com/edit/stackblitz-starters-g1esexap?file=app%2FComponents%2FDom%2FMaSection.tsx I am currently stuggling on this one, I got a vanilla version, everything works well, but when pass the code to next.js It seems like gsap scrollTriggers are no longer working. Help yould be appreciated to found a way to achieve that

Hi! I'm currently testing GSAP with Lenis but this seems to be mostly a GSAP + ScrollTrigger issue. I'm trying to figure the best way to pin the second section (red background) before you proceed scrolling to the next section (white background). I wanted to add a "pause" before the user proceeds to scroll down past it / the section should be pinned until the gsap timeline finishes.

Initially, I wanted to create a GSAP ScrollTrigger responsive split-screen pinning effect similar to what is showcased on deveb.co. However, I was never able to get it to work. As a result, I decided to simplify and go back to the basics, using this codepen project: OLD scroll left pin right mockup -- not responsive. It was during this process that I realized the root of my issue had always been the same: whenever the column pinning starts, it disappears, and when the animation ends, it reappears. I've spent hours searching through forums for solutions but haven't found a fix. I first tried using gsap.context(); to resolve the issue: // Scroll.jsx import React, { useLayoutEffect } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import './Scroll.css'; gsap.registerPlugin(ScrollTrigger); const Scroll = () => { useLayoutEffect(() => { let ctx = gsap.context(() => { ScrollTrigger.create({ trigger: ".gallery", start: "top top", end: "bottom bottom", pin: ".right", pinSpacing: true, markers: true, scrub: true, }); }); return () => ctx.revert(); }, []); return ( <> <div className="spacer"></div> <div className="gallery"> <div className="left"> <div className="detailsWrapper"> <div className="details"> <div className="headline"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> </div> </div> <div className="right"> <div className="photos"></div> </div> </div> <div className="spacer"></div> <div className="spacer"></div> <div className="spacer"></div> </> ); }; export default Scroll; That didn't work, so I decided to use useGSAP(), but it still produces the same result. // Scroll.jsx import React, { useRef } from 'react'; import { gsap } from 'gsap'; import { ScrollTrigger } from 'gsap/ScrollTrigger'; import { useGSAP } from '@gsap/react'; import './Scroll.css'; gsap.registerPlugin(ScrollTrigger); const Scroll = () => { const galleryRef = useRef(null); useGSAP( () => { ScrollTrigger.create({ trigger: galleryRef.current, start: "top top", end: "bottom bottom", pin: ".right", pinSpacing: true, scrub: true, markers: true, }); }, { scope: galleryRef } ); return ( <> <div className="spacer"></div> <div ref={galleryRef} className="gallery"> <div className="left"> <div className="detailsWrapper"> <div className="details"> <div className="headline"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> <div className="details"> <div className="headline"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> <div className="text"></div> </div> </div> </div> <div className="right"> <div className="photos"></div> </div> </div> <div className="spacer"></div> <div className="spacer"></div> <div className="spacer"></div> </> ); }; export default Scroll; I have reviewed the React & GSAP | GSAP | Docs & Learning, countless forums, and YouTube tutorials, but I’m still struggling to find a solution. I’m reaching out to you in the hope that you can help me. /* Scroll.css */ body { background: #EEF4FF; margin: 0; } .spacer { width: 100%; height: 50vh; background: #ddd; } .headline { background: #2D4E86; border-radius: 6px; height: 4em; width: 100%; } .text { margin: 0.8em 0 0 0; background: #2D4E86; border-radius: 6px; height: 1em; width: 100%; } .gallery { display: flex; outline: 1px solid red; height: auto; } .left { width: 50%; } .detailsWrapper { margin: auto; width: 80%; } .details { height: 100vh; outline: 1px solid green; display: flex; flex-direction: column; justify-content: center; } .right { position: sticky; top: 0; outline: 1px solid purple; width: 50%; height: 100vh; display: flex; flex-direction: column; justify-content: center; /* overflow: hidden; */ z-index: 1; } .photos { width: 40vw; height: 40vw; background: maroon; /* visibility: visible; */ } I’ve attached a video that visually demonstrates the issue, and I would be incredibly grateful for your assistance in resolving this. ScrollTrigger Pin Issue.mp4

Sorry everyone, Im stuck again. I keep getting this error in my console and it doesnt allow me to scroll. ScrollTrigger.min.js?ver=1738805288:10 Uncaught DOMException: Failed to execute 'insertBefore' on 'Node': The node to be removed is no longer a child of this node. Perhaps it was moved in response to a mutation? at _swapPinOut (https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js?ver=1738805288:10:24976) at Ce.revert (https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js?ver=1738805288:10:25033) at Sb (https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js?ver=1738805288:10:13288) at _refreshAll (https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js?ver=1738805288:10:17681) at https://cdn.jsdelivr.net/npm/[email protected]/dist/ScrollTrigger.min.js?ver=1738805288:10:33101 createPinTrigger @ my-app.js?ver=1738805288:376 (anonymous) @ my-app.js?ver=1738805288:403 Where it says (anonymous) its pointing to line 73 I've done various things: Stripped the code to the bare minimum Made the images 1px tall (I thought the lazy loaded image heights might affect it) I've reorderd the funtions.php so it follows the gsap.registerPlugin I just cant find what the issue is. Thank you