Search the Community

For some reason, my parallax scroll is getting a strange bug that will make all the scroll elements mess up (blank spaces, not finishing the animation, overlapping and so on) in 2 scenarios: - Changing the page size and not reloading the page; - Quickly scrolling (as far as I was able to investigate it will happen when the content is still loading, but I'm not completely sure about this information); The first scenario isn't a big deal (but if it isn't that hard I would like to fix it) since you don't expect the user to do it. Yet the second scenario is something I need to fix because it directly affects the user experience. Any idea about what is happening and the alternatives? https://codepen.io/Ramoses-Hofmeister-Ferreira/pen/azdqgpX

Hi, I am working on this idea of scrolling through sections with SVG's. Those SVG's have layers that I animate with ScrollTrigger. There are 3 sections 'Hero scene', 'City scene' and 'New section' (in the future there might be more sections). At the moment I am a bit stuck on how to continue, specifically how to transtition from the 'City scene' to the 'New section'. Preferably I have the City pinned/snapped so that those layers will go down where then the layers from the 'New section' will animate from underneath. Basically how the hero transitions into the city. Also I am not sure if this is the right way of doing this. It could be that I need to change the way I have setup those sections and that there is a better way and more scalable way when adding more sections that flow into one another. If there's someone who can help me get into the right direction it would be much appreciated! PS If needed, I can transfer my example codepen to stackblitz (https://stackblitz.com/@gsap-dev/collections). Because those SVG's are pretty large and I can imagine for readability it would be easier. Greetings, Mark For a better view I recommend viewing the 'Full Page View' as it is not optimized for smaller screen sizes ----

Hello. I need help with an implementation. All sections need to be pinned, and additionally, the first section should have pinSpacing for an extra animation, as shown in the GIF. My searches, unfortunately, have not been successful. Maybe there is a way to achieve this.

Hi, When scrolling throw the container, they are being pinned and stacked on top of each other, but as soon as they are unpinned, the containers are transformed/moved out of place. The codepen showcases the issue I am facing. Thanks!

Hi GSAP team, I’m running into an issue with ScrollTrigger pinning. I have a section with a .menu__image__wrapper that I want to pin while scrolling. On first page load, the pin doesn’t work (the image disappears). If I switch categories in my app (which destroys and re-inits the triggers), the pin suddenly works correctly. I also noticed earlier that I had a y transform (GSAP.set(..., { y: ... })) on the pinned element itself. Removing that transform fixed some glitching, but I still sometimes see the pin fail on first load. Video Of Issue:https://www.loom.com/share/f02251051e0d40a5b0595020b76bd8b7?sid=2a13507c-e9aa-4d87-9644-47d2f085eb01 Here’s a simplified version of my setup: Here is the animation class code for the menuPIN only: import GSAP from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; GSAP.registerPlugin(ScrollTrigger); export default class MenuPin { constructor() { this.mm = null; // matchMedia instance this.triggers = []; // ScrollTrigger instances this.clickHandlers = []; // mobile click handlers this.currentSection = null; } setupSection(section) { if (!section) return; const runSetup = () => { // destroy previous triggers/spacers this.destroy(); this.currentSection = section; this.mm = GSAP.matchMedia(); const initDesktop = () => { this.setupDesktop(section); }; // Desktop this.mm.add("(min-width:1024px)", () => { const firstImg = section.querySelector(".menu__image"); if (firstImg && !firstImg.complete) { firstImg.addEventListener("load", initDesktop, { once: true }); setTimeout(initDesktop, 300); } else { initDesktop(); } return () => { }; }); // Mobile this.mm.add("(max-width:1023px)", () => { requestAnimationFrame(() => this.setupMobile(section)); return () => { }; }); }; // Run immediately if DOM is ready, otherwise wait for DOMContentLoaded if (document.readyState === "loading") { document.addEventListener("DOMContentLoaded", runSetup); } else { runSetup(); } } setupDesktop(section) { const imageWrapper = section.querySelector(".menu__image__wrapper"); if (!imageWrapper) return; const images = Array.from(section.querySelectorAll(".menu__image")); const imageHeight = section.querySelector(".menu__image").getBoundingClientRect().height const items = Array.from(section.querySelectorAll(".menu__item")); const itemHeight = section.querySelector(".menu__item").getBoundingClientRect().height if (!items.length) return; // spacer at the end let spacer = section.querySelector(".menu__spacer"); if (!spacer) { spacer = document.createElement("div"); spacer.classList.add("menu__spacer"); section.appendChild(spacer); } spacer.style.height = `${imageHeight - itemHeight - 41}px`; const pinDuration = section.scrollHeight; // Pin image wrapper const pinTrigger = ScrollTrigger.create({ trigger: section, start: "top top", end: () => `+=${pinDuration}`, pin: imageWrapper, pinSpacing: false, markers: false, }); this.triggers.push(pinTrigger); // Set first image visible right away // GSAP.set(images[0], { autoAlpha: 1 }); // Then set up triggers items.forEach((item, i) => { const t = ScrollTrigger.create({ trigger: item, start: `top-=25 top`, end: `bottom-=25 top`, // onEnter: () => this.showImage(images, i), // onEnterBack: () => this.showImage(images, i), markers: true, }); this.triggers.push(t); }); } setupMobile(section) { const images = Array.from(section.querySelectorAll(".menu__image")); const items = Array.from(section.querySelectorAll(".menu__item")); // remove previous handlers items.forEach(item => { if (item._menuPinHandler) { item.removeEventListener("click", item._menuPinHandler); delete item._menuPinHandler; } }); // add click handlers items.forEach((item, i) => { const handler = () => this.showImage(images, i); item.addEventListener("click", handler); item._menuPinHandler = handler; this.clickHandlers.push({ el: item, handler }); }); // show first image // this.showImage(images, 0); } showImage(images, index) { images.forEach((img, i) => { GSAP.set(img, { autoAlpha: i === index ? 1 : 0, border: i === index ? "3px solid red" : "none" }); }); GSAP.to(images[index], { autoAlpha: 1, duration: 0.25, ease: "expo.out" }); } destroy() { // kill triggers this.triggers.forEach(t => t && t.kill()); this.triggers = []; // remove click handlers this.clickHandlers.forEach(({ el, handler }) => { el.removeEventListener("click", handler); if (el._menuPinHandler) delete el._menuPinHandler; }); this.clickHandlers = []; // remove spacer if (this.currentSection) { const sp = this.currentSection.querySelector(".menu__spacer"); if (sp) sp.remove(); } this.currentSection = null; } } import Page from '@classes/Page'; import MenuPin from '@animations/MenuPin'; import MobileCategorySwipe from '@animations/MobileCategorySwipe'; import GSAP from 'gsap'; import { ScrollTrigger } from "gsap/ScrollTrigger"; GSAP.registerPlugin(ScrollTrigger); export default class Menu extends Page { constructor() { super({ element: '.menu', elements: { wrapper: '.menu__wrapper', section: '.menu__section', button: '.menu__category__label', }, }); } create() { super.create(); this.menuPin = new MenuPin(); const categoryEl = document.querySelector(".menu__category"); if (categoryEl) { new MobileCategorySwipe({ element: categoryEl }); } const firstSection = document.querySelector(".menu__section.--active"); if (firstSection) { this.menuPin.setupSection(firstSection); } // bind buttons this.elements.button.forEach(btn => { btn.addEventListener("click", () => { const category = btn.dataset.category; this.showCategory(category); }); }); } showCategory(category) { // Hide all sections first this.elements.section.forEach(section => { const isActive = section.dataset.category === category; if (isActive) { section.classList.add('--active'); console.log(section); // Make section visible so ScrollTrigger can measure GSAP.set(section, { autoAlpha: 1 }); // Destroy old triggers before setting up the new one if (this.menuPin) this.menuPin.destroy(); // Setup the pin/animations for the new section this.menuPin.setupSection(section); // Refresh ScrollTrigger after layout changes requestAnimationFrame(() => ScrollTrigger.refresh()); } else { section.classList.remove('--active'); GSAP.set(section, { autoAlpha: 0 }); } }); // Update buttons this.elements.button.forEach(btn => { const isActive = btn.dataset.category === category; btn.classList.toggle('--active', isActive); GSAP.to(btn, { color: isActive ? "#000" : "#CBC4B1", duration: 0.5, ease: "expo.out" }); }); } }

Hey guys, I finished my portfolio website, and going through it, I notice one error. As you can see, there is a strange movement on the left card. On the first visit to the website, everything is normal, but once you click the FAQ item, it moves to the left and shrinks, and if you continuously click the FAQ item, it flickers. I am 100% sure this is GSAP code. I use Smooth Scroller, and I pin the left card. When I remove the GSAP code and go with sticky on the left card, everything works normally. What could be the problem? Here is the read-only link https://preview.webflow.com/preview/veljko-portfolio-bb1f89?utm_medium=preview_link&utm_source=designer&utm_content=veljko-portfolio-bb1f89&preview=2e29e1d3721c84bd8fed760aba33f39c&workflow=preview and website https://veljkov.me/

There's this extra space below the section even though i have given the section 680px of height.. and also at the end of this sectiona massive space is coming even though i never added it?.. heres the code "use client" import React, { useEffect, useRef } from 'react' import gsap from 'gsap' import { ScrollTrigger } from 'gsap/dist/ScrollTrigger' const steps = [ { id: 1, number: '1', title: 'Initial Discovery & Research', desc: 'We begin by aligning your goals with market research to validate and shape ideas.' }, { id: 2, number: '2', title: 'Brainstorming & Idea Generation', desc: 'We collaborate through brainstorming to spark innovation and explore diverse ideas.' }, { id: 3, number: '3', title: 'Idea Screening & Selection', desc: 'We filter ideas by feasibility, goals, and market fit to focus on those with the highest potential.' }, { id: 4, number: '4', title: 'User Persona Development', desc: 'We craft user personas to tailor concepts around real needs, behaviours, and pain points for user-centric solutions.' }, { id: 5, number: '5', title: 'Feasibility Study & Risk Assessment', desc: 'We assess feasibility and risks to build a strong, strategic foundation for product development.' }, { id: 6, number: '6', title: 'Prototyping & Concept Visualization', desc: 'We create prototypes and wireframes to visualize ideas, refine concepts, and gather stakeholder feedback.' }, { id: 7, number: '7', title: 'Feedback & Iteration', desc: 'We gather feedback to refine prototypes, ensuring concepts meet user needs and market expectations.' }, { id: 8, number: '8', title: 'Defining the Product Roadmap', desc: 'We design a product roadmap that defines timelines, milestones, and goals to guide development.' }, { id: 9, number: '9', title: 'Final Concept Approval', desc: 'The process ends with final concept approval, aligning all stakeholders for development.' } ] function ProductSuccess() { const sectionRef = useRef<HTMLDivElement | null>(null) const cardsContainerRef = useRef<HTMLDivElement | null>(null) const cardRefs = useRef<Array<HTMLDivElement | null>>([]) useEffect(() => { gsap.registerPlugin(ScrollTrigger) // Offset to leave space for fixed navbar (adjust if navbar height changes) const NAV_OFFSET_PX = -45 const section = sectionRef.current const cardsContainer = cardsContainerRef.current const cards = cardRefs.current if (!section || !cardsContainer || cards.length === 0) return // Calculate card height + gap const cardHeight = cards[0]?.offsetHeight || 0 const gap = 16 // mb-4 = 16px const totalCardHeight = cardHeight + gap // Set initial positions - all cards stacked below the viewport cards.forEach((card, index) => { if (index === 0) { gsap.set(card, { y: 0 }) } else { // Position each card below the previous one gsap.set(card, { y: totalCardHeight * index }) } }) // Create timeline for the animation const tl = gsap.timeline({ scrollTrigger: { trigger: section, // start when section hits just below navbar start: `top+=${NAV_OFFSET_PX} top`, end: () => `+=${totalCardHeight * (cards.length - 1) + window.innerHeight}`, scrub: 0.5, pin: true, anticipatePin: 1, } }) // Animate each card group cards.forEach((card, index) => { if (index > 0) { // Move all cards from current index onwards up by one card height const cardsToMove = cards.slice(index) tl.to(cardsToMove, { y: (cardIndex) => { const originalIndex = index + cardIndex const newPosition = totalCardHeight * (originalIndex - index) return newPosition }, duration: 1, ease: "none", stagger: 0 }, index === 1 ? 0 : ">") } }) return () => { ScrollTrigger.getAll().forEach(trigger => trigger.kill()) } }, []) return ( <section ref={sectionRef} className="w-full bg-white py-12 md:py-16 lg:py-20 h-[680px] overflow-hidden"> <div className="max-w-7xl mx-auto px-4 lg:px-0"> <div className="grid grid-cols-1 lg:grid-cols-2 gap-8 lg:gap-12 items-start"> {/* Left: Heading + paragraph (pinned) */} <div className="flex flex-col justify-start lg:sticky lg:top-0"> <h2 className="font-['Inter'] font-semibold text-[28px] md:text-[32px] lg:text-[36px] leading-[120%] text-[#000000] max-w-[550px]"> From Vision to Reality: Our Proven Path to Product Success </h2> <p className="mt-4 md:mt-8 font-['Inter'] font-normal text-[16px] leading-[24px] text-[#00000066] max-w-xl"> Our product ideation and conceptualization is a step-by-step journey from brainstorming and research to prototyping and refinement. We then craft a strategic roadmap to guide your concept into development, ensuring every decision aligns with your vision. </p> </div> {/* Right: Steps list with animation */} <div className="w-full relative"> <div ref={cardsContainerRef} className="relative h-[200px]"> <div className="absolute top-0 left-0 w-full"> {steps.map((s, index) => ( <div key={s.id} ref={el => { cardRefs.current[index] = el }} className="absolute top-0 left-0 w-full" > <div className="flex items-stretch gap-[36px]"> {/* Strip */} <div className="w-[66px] flex flex-col items-center flex-shrink-0 bg-white"> <div className="text-left whitespace-nowrap bg-white font-['Inter'] font-semibold text-[15px] leading-[20px] text-[#000000]"> {`STEP - 0${s.number}`} </div> <div className="flex-1 w-full flex items-start min-h-[120px]"> <div className="mx-auto w-0.5 h-full" style={{ background: 'repeating-linear-gradient(to bottom, #00000033 0px, #00000033 4px, transparent 4px, transparent 6px)' }} /> </div> </div> {/* Card */} <div className="flex-1 mb-4"> <div className="bg-[#FAFAFA] rounded-[12px] p-6"> <div className="flex flex-col items-start"> <div className="w-[48px] h-[48px] rounded-[8px] bg-[#3C82F6] flex items-center justify-center mb-3"> <span className="font-['Inter'] font-bold text-[24px] leading-[24px] text-white">{s.number}</span> </div> <div className="font-['Inter'] font-medium text-[18px] leading-[27px] text-[#0C0C0C]"> {s.title} </div> <div className="mt-1 font-['Inter'] font-normal text-[12px] leading-[20px] text-[#00000066]"> {s.desc} </div> </div> </div> </div> </div> </div> ))} </div> </div> </div> </div> </div> </section> ) } export default ProductSuccess

I’m trying to build a horizontal scroll effect with GSAP + ScrollTrigger. The idea is: when you scroll vertically, the text moves horizontally across the screen. It works fine when the scrollTrigger config is like that scrollTrigger: { trigger: trackSectionRef, start: "top top", scrub: true, pin: true, markers: true, anticipatePin: 1, invalidateOnRefresh: true, }, But whenever I change the start to be "-30% top", the pin spacer adds an annoying white space on the top, tried several solutions, but all of them messed up something in the animation, maybe the problem is that I'm new to GSAP. What I want to achieve, is for the horizontal scroll to start before the scroll section is pinned. And at the same time, I want the scroll section to be pinned correctly without any white spaces, would appreciate your take on the matter. Here is the code : https://codepen.io/abdelrahmanahmed04/pen/XJmxOXM

Hello, I've been working for a while on a homepage where the client asked me for a specific pinning effect: each section should start being pinned once its top reaches the bottom of the navbar (whose height is stored in the `--navbar-height` CSS variable), and stop being pinned after scrolling for about 150% of the section height. I've tried many variants of this, but the closest I've managed to get is this, which is still wrong since it starts pinning when the bottom of the section hits the bottom of the viewport: ``` sections.forEach((section, i) => { ScrollTrigger.create({ start: "bottom bottom", end: "+=90%", scrub: true, markers: true, trigger: section, pin: true, anticipatePin: 1, }); }); ```

Hello everyone, I'm running into some issues with ScrollTrigger and could use some guidance. I'm trying to create multiple scroll animations where images slide in from the side. I managed to get this working by pinning the container itself (https://codepen.io/zumpel96/pen/OPyBboy). However, this isn't the behavior I want, because I'd like all other content to remain pinned or "frozen". As you can see in my working pen, the other content continues to scroll. I've also tried using a single common pinned container, but that approach doesn't work either: https://codepen.io/zumpel96/pen/empPJzY Wrapping only the "visible" part in a container isn't an option either. In my pen, there's content between the animated scroll containers that's visible for both. This means that content would need to belong to both the first and second scroll containers, which isn't possible. Any advice or suggestions on how to achieve this effect would be greatly appreciated. Thank you so much!

Hi! I’ve built an animation where a headline gets pinned in the center while some images scroll by in the background. Then, a block of text scrolls up, hits the bottom of the headline, and at that point, the pin is removed and everything scrolls normally again. Now I want to take it a step further: After that sequence, I’d like to pin the parent container once it reaches the top, so that the next module can slide over the pinned section. But doing this breaks everything. Here’s a small demo – if you comment out the second part, you’ll see the problem clearly.

I need to create a react component that has scrolltrigger with pin which pins the media that comes behind it. The component will have multiple sections which have h1, p, span and a media background that has height of 150vh which displays different media (image or video) based on the index of array and its media type the component when comes into viewport the media div should have position fixed (using pin). The sections are not snapping properly. I am getting jitterring, bouncing effect and sometimes to for bouncing with a pause. const nextSection = sectionRefs.current[idx + 1]; const prevSection = sectionRefs.current[idx - 1]; if (nextSection) { triggers.push( ScrollTrigger.create({ trigger: section, start: 'bottom bottom-=50px', end: 'bottom top', onEnter: (self) => { if (self.direction === 1 && !isSnapping) { isSnapping = true; gsap.to(window, { scrollTo: { y: nextSection, autoKill: false, }, duration: 0.6, ease: 'power2.inOut', onComplete: () => { isSnapping = false; }, onInterrupt: () => { isSnapping = false; }, }); } }, }) ); } if (prevSection) { triggers.push( ScrollTrigger.create({ trigger: section, start: 'top-=50 top', end: 'top top', // markers: true, onLeaveBack: (self) => { if (self.direction === -1 && !isSnapping) { isSnapping = true; gsap.to(window, { scrollTo: { y: prevSection, autoKill: false, }, duration: 0.6, ease: 'power2.inOut', onComplete: () => { isSnapping = false; }, onInterrupt: () => { isSnapping = false; }, }); } }, }) ); } its not working as expected. I need smooth transition between section with a snap effect. Please guide me.

Hey everyone, confused in one of my client's work. Would be grateful if somebody helps out. I have a two background images, one of 60vh and other of 40vh so that both appear in one page. On scroll I want to change the background x position of first image for example it should go right. Once the top of the viewport touches the top of the image, scroll should be locked and scroll should be continued when the animation completes. If i pin the image, the image is going down with my viewport but I don't want that. The image should be in its initial position, only lock the scroll. Thanks in advance.😁

Hi community, Im' a beginner with GSAP and ScrollTrigger and I'm running into an issue. My goal is for the user to scroll horizontally through 6 sections, and after the 6th section, the scrolling should switch back to vertical to display the final section (simply as that, ahah). Right now, instead of that, a large (undesired) section appears after the 6th sectoin (maybe a problem with the "pin"?). I've tried many things to debug it, but I just can't figure it out. Code here : https://codepen.io/Nathan-Loheac/pen/gbaPeXW Thank you so much for any help or advices

Hi Everyone, Long time GSAP dabbler, but first time posting in the forum. Looking for some help and advice. I'm trying to create a scroll triggered and pinned section of a site that scrolls through content within a 'frame' inside the section. This is on desktop only. on mobile the animations are killed. What I'm struggling with managing is the height of the container and how long it is pinned for before the content below naturally appears and the scroll continues as normal. I have created an example of what I'm trying to achieve here. https://codepen.io/nickylew/pen/RNWWMop I feel as thought I may be over complicating things, trying to set the height of the section dynamically based on the number of 'boxes' there are to scroll through. These 'boxes' will be dynamic, pulled from a CMS, so there could be 5 of them, could be 10+. Which is why I was trying to get the height and uses that to dynamically set things up. Any help greatly appreciated! As I'm getting a little spun round in circles. Additionally, improving performance would be amazing to know as well. As this is janky! But, that might be because it is trying to work out heights.

Hi everyone, I’m running into a specific issue where I need to play a regular (non-scrubbed) timeline inside a pinned section that is scrubbed. Here’s what I’m trying to achieve: I have a ScrollTrigger that pins a section (let’s call it #host) for a certain scroll distance. Inside that, I animate .intro-content with scrub as the user scrolls — this part works fine. Once .intro-content fades out, I want .speaker-content to animate in like a normal GSAP animation — not scrubbed — with some epic entrance. However, I still want this second animation to be bound to the scroll position (reverses when scrolling back), just not scrubbed like the first. Right now, everything plays scrubbed if it’s in the same timeline, and if I break it out into another timeline, it seems disconnected or doesn’t trigger correctly inside the pinned context.

Hi there, I am quite new to GSAP but I think I managed to create some nice animations and I am almost "there". The only thing that doesn't work for me is to set pins correctly using ScrollTrigger. I have created a demo here: https://codepen.io/henningtillmann/pen/wBvZGOm What you see: An SVG animation pinned in the container that has min-height: screen. I know that there is no scrolling as soon as the pin is active, so other the other sections (2b, 2c) are only visible after the animation is completed. What I'd like to achieve is that the animation plays in the background (three timelines) and the sections 2a, 2b, 2c are on top of them. If I just pin the SVG, then the scrolling doesn't match anymore. It's probably just a minor thing but I wasn't able to find a solution. Thank you in advance! Best, Henning PS: I have read the forum guidelines but the "conmon GSAP mistakes" and "common ScrollTrigger mistakes" links trigger a 404.

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:

Good afternoon, this is my first post in the community, so I apologize in advance if I do anything wrong. I am having an issue with the "pin" attribute for ScrollTrigger animations, using Elementor Pro. I created an example to demonstrate it. I created 3 containers with 100vh, and in the central one, I added a text. The animation changes the text opacity from 20% to 100%, and keeps the container fixed during the animation. The start works fine, the animation is triggered, and the container stays pinned. However, when the animation ends, the container disappears, and after that, it appears from top to bottom, as if it teleports to the position it would be if it weren't pinned, then goes back to its pinned position. I’m not sure what could be causing this. I have more complex animations with horizontal scrolls, and this problem always happens when I set the animation to be pinned. https://r2u.io/text/ <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/ScrollTrigger.min.js"></script> <script> gsap.registerPlugin(ScrollTrigger); gsap.fromTo(".h2", { opacity: 0.2 }, { opacity: 1, scrollTrigger: { trigger: ".meuContainer", start: "top top", end: "+=100%", scrub: true, markers: true, pin: true } }); </script> output3020.mov

I dug into old topics and found some solutions but none of them worked or maybe I couldn't correctly try them so forgive me if I'm repeating an old question. I just want to implement a simple sticky inside its parent and though the element sticks to the correct position, the start seems wrong. The main problem is the end because the sticky element stops before it reaches the bottom of its parent.

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.

Hello everyone, I am trying to solve a problem of synchronizing a section (pinned with scrollTrigger) with a certain amount of scroll until I reach the end of the scrollTrigger. Basically I have a counter that is inside my pinned section. Once it is pinned I have a Gsap Observer that animates my counter from counterSequence[n] to counterSequence[n+1] (this is obviously for an imageSequence animation). That means each time I scroll inside my pinned Section, I activate an animation of my counter... until I reach the end of my counterSequence (meaning my last frame on my real project). The problem is that scrollTrigger only allows to specify a start and end of the section and I don't know how to synchronize it with my number of scrolls until I finish all my counter Sequences (for now I did end: "+=800%" so that I am sure I have enough space to scroll to get all my counter sequences). Do you have any idea of the direction I should take ? (No need to spend too much time on my codepen just any idea ^^) Thank you !

Hello, I'm new to GSAP and I wanted to use ScrollTrigger on my website. I just don't understand why pinning does not work well in my case, and I tried to make a good copy of my problem on codepen. The behavior I'm trying to achieve is that for the first 300px of scrolling the nav bar stays pinned, the rest of the page scrolls away and after 300px (where the animation ends and opacity is 0.5) the nav bar also scrolls away. I would be grateful for any solution that would make this work with mu previous fade in animation.

Hey, everybody. I am developing wordpress themes. In many projects I use GSAP animations. In large multi-page sites I face the problem of poor performance of GSAP scrolltriger property pin. Probably I am lacking experience to optimize it. Perhaps someone can share his experience how to better optimize animations in such projects (in the context of Wordpress and in general)? Perhaps it makes sense to separate all pages by block and load js-code animations only when there is a block? Thanks for any information PS. To understand the Wordpress problem I will add. That in most sites I create my custom theme from scratch. Pages are separated by blocks. These blocks work with the help of ACF Gutenberg plugin.

Hi! I hope you're doing great. I'm facing some issues with the code. First of all, I couldn't figure out how to use the pin feature because I've mostly used GSAP with plain HTML, CSS, and JavaScript. Secondly, I couldn't understand the strange behavior of the animation. When I enter the start marker, the content disappears. However, the animation triggered by ScrollTrigger runs smoothly when I exit and re-enter through the end marker. import React, { useEffect, useRef } from "react"; import { gsap } from "gsap"; import pakistanMap from "./assets/pakistanMap.svg"; import worldMap from "./assets/worldMap.svg"; import { ScrollTrigger } from "gsap/ScrollTrigger"; gsap.registerPlugin(ScrollTrigger); const Extra = () => { const worldRef = useRef(null); const pkRef = useRef(null); const containerRef = useRef(null); useEffect(() => { gsap.to(worldRef.current, { scale: 0.1, opacity: 0, duration: 4, scrollTrigger: { trigger: containerRef.current, start: "top 30%", end: "bottom 30%", markers: { start: "start", end: "end", }, scrub: 1, // pin: true, // pin: worldRef.current, // pin: containerRef.current, }, }); }, []); return ( <main className="w-full overflow-x-hidden"> <header className="w-screen h-[70vh] bg-gray-800"></header> <section ref={containerRef} className="container flex flex-col gap-4 items-center justify-center bg-white" > {/* World Map */} <div ref={worldRef} className=" w-[500px] h-auto bg-black/20 z-20"> <img className="w-full h-full object-contain" src={worldMap} alt="World Map" /> </div> {/* Pakistan Map */} <div ref={pkRef} className=" w-[500px] h-auto bg-green-100"> <img className="w-full h-full object-contain" src={pakistanMap} alt="Pakistan Map" /> </div> </section> <footer className="w-screen h-[80vh] bg-gray-800"></footer> </main> ); }; export default Extra;