Search the Community

I use GSAP’s ScrollTrigger in my React app, and everything works perfectly in the local environment. However, after deploying to Vercel, I’ve encountered an issue with ScrollTrigger when switching routes. Here’s the behavior: When I navigate to a page, the ScrollTrigger positions (start and end markers) are not aligned with the actual content. For example, the start and end markers appear above the intended elements. (I noticed it in all my sections) If I refresh the page, the ScrollTrigger recalculates correctly, and everything works perfectly. Navigating to another route causes the same issue to arise until I refresh the page again. I’ve also noticed that I’m using the Swiper component in two routes at the bottom of the page, reusing the same component. This seems to cause similar issues even in my development server. (I have properly used context for this component) [Note: I have added lazy loading for components and don't have any lazy loading images] const Home = lazy(() => import("@/pages/Home/Home")); Here is a minimal useGsap code from my code: useGSAP(() => { const cards = gsap.utils.toArray( ".card" ) as HTMLElement[]; cards.forEach((item, i) => { gsap.from(item, { y: 50, duration: 1, opacity: 0, delay: i * 0.1, ease: "power2.out", scrollTrigger: { trigger: item, start: "top 90%", toggleActions: "play none none none", markers: true, }, }); }); }, []); Any advice on how to ensure ScrollTrigger recalculates properly? And the best practices to follow when using GSAP with React or Next.js

Original: https://codepen.io/GreenSock/pen/XWzRraJ I want to achieve the following: I want to scroll through the page in a normal way. So first, I scroll through the intro. Then, when div.wrapper reaches the top of my screen, I want to pin it using ScrollTrigger. At that point, I only want to swipe through the swiper using this Observer. Once I reach the end of my swiper, I want to continue scrolling through the page, and the Observer can stop at that point. I'm having trouble making this work. Can anyone help me?

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;

I have an animation on these cards that is changing the height of some spacers above these cards to get a neat scrubbing affect. The animation works great and scrolling down with the scroll wheel is just fine, but if you click on the scrollbar and drag it down, you'll notice that when it hits the animated area, it slows down significantly. I know that this is caused because the height of the entire page is decreasing which does need to happen. Scrollable height changes = scrollbar speed change. My question is how do I stop or at least reduce this from happening. It almost feels like scroll jacking which I hate. I also noticed that this does not happen on safari. I haven't check other browsers besides chrome (sidekick) and safari.

Hi everyone, I’m encountering the following error when deploying my project on Netlify: Invalid property scrollTrigger set to {trigger: section#vertical, start: 'top top', end: 'bottom center', scrub: true}. This works perfectly fine in my local environment, but the error appears on Netlify. Here is what I’ve tried so far: I made sure to register the plugin using gsap.registerPlugin(ScrollTrigger), but the issue persists. I double-checked that all the DOM elements (#vertical and .col_left) exist before initializing ScrollTrigger. I tested the values passed to scrollTrigger using console.log, and they seem correct. Here’s a simplified example of my code: import React, { useEffect } from "react"; import "../styles/SecondScreen1.css"; import { gsap } from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import orange from "../assets/images/Orange.webp"; import mapnazava from "../assets/images/Mpanazava.webp"; import gate from "../assets/images/Gate.webp"; import Lenis from "@studio-freight/lenis"; gsap.registerPlugin(ScrollTrigger); const SecondScreen1 = () => { useEffect(() => { const lenis = new Lenis({ duration: 1.2, easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)), }); function raf(time) { lenis.raf(time); ScrollTrigger.update(); requestAnimationFrame(raf); } requestAnimationFrame(raf); const section1 = document.getElementById("vertical"); const colLeft = document.querySelector(".col_left"); // Gestion responsive avec matchMedia const mm = gsap.matchMedia(); mm.add("(max-width: 449px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "90vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); mm.add("(min-width: 450px) and (max-width: 950px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "115vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); mm.add("(min-width: 951px)", () => { gsap.fromTo( colLeft, { y: 0 }, { y: "32vh", duration: 1, ease: "tick", scrollTrigger: { trigger: section1, start: "top top", end: "bottom center", scrub: true, }, } ); }); return () => { ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); mm.revert(); // Supprimer les animations lors du démontage }; }, []); return ( <div className="secondscreen1"> <section id="vertical"> <div className="container"> <div className="vertical__content"> <div className="col col_left"> <h2 className="vertical__heading custom-h2"> <span>Experience</span> <span>That you</span> <span>Can Trust</span> </h2> <h4 className="custom-h4"> MY PROFESSIONAL PATH </h4> <p className="custom-p"> Over my career, I've had the opportunity to consolidate my skills while working with outstanding organizations across various industries. Here are some of the projects and companies I’ve had the pleasure of contributing to. </p> </div> <div className="col col_right"> <div className="vertical__item"> <div className="header-container"> <img src={orange} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Orange Digital Center</h3> <h3 className="custom-h3">Développeur Mobile et Web</h3> <h3 className="custom-h3 tech"> Flutter - React Js - Node Js </h3> </div> </div> <p> July 2024 - October 2024 ( 4-month internship ) <br /> As part of the Orange Summer Challenge, I created the Mobile application of the SPARE project with Flutter and the website with React Js. </p> </div> <div className="vertical__item"> <div className="header-container"> <img src={mapnazava} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Mpanazava eto Madagascar</h3> <h3 className="custom-h3"> Développeur d’application Mobile </h3> <h3 className="custom-h3 tech">Flutter- Node Js</h3> </div> </div> <p> February 2024 - June 2024 <br /> Development of a mobile payment application payment form mobile application with Flutter and Node Js with transaction tracking. </p> </div> <div className="vertical__item"> <div className="header-container"> <img src={gate} alt="Logo" className="custom-image" /> <div className="test-xp"> <h3 className="custom-h3">Gate Company Group</h3> <h3 className="custom-h3">Développeur Mobile et Web</h3> <h3 className="custom-h3 tech"> React Native - React Js - Node Js </h3> </div> </div> <p> November 2023 - January 2024 ( 3-months internship ) <br /> Development of GateAfri, GateNews and AfriMuz with React Native. Optimization of the graphical (UI) and technical aspects of the GateAfri and GateNews websites with React Js. </p> </div> </div> </div> </div> </section> </div> ); }; export default SecondScreen1;

I'm attempting to replicate the "One Element Scroll" animation from Tympanus.net (https://tympanus.net/Development/OneElementScroll/) using GSAP Flip.fit within a NextJs. However, i'm experiencing an issue where the width and height of the element with the class .one flicker between its full size and the final size set by Flip.fit. Minimal reproduction : i've created a simplified NextJs project on StackBlitz to isolate the issue: https://stackblitz.com/edit/stackblitz-starters-dykskccl?file=app%2F_components%2Fmain.tsx

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 have a problem with implementing lenis with the scrollTrigger. Basically when I make the scroll trigger end to be "+=800px" lenis ends up unavailable to scroll to the bottom of the page. gsap.registerPlugin(ScrollTrigger); const lenis = new Lenis({ lerp: 0.15, autoRaf: true, }); ScrollTrigger.create({ trigger: section.value.parentNode, start: "top 89px", end: `+=800px`, pin: section.value, markers: true })

Hi everybody! I'm trying to create a ScrollTrigger where the section is pinned, in the first part of the main content there's a border-radius effect and then scrolls normally to the second one with the logo and navigation. The thing is, I want the background (Element '.js-bg') pinned, since I can't use sticky on it. The idea is instead of enlarging the video to fill all the container (200vh), to keep it full screen (100vh) but with the sticky effect, so it will remain there while you scroll. I think I might be overcomplicating but I couldn't archive it. I tried with "pin: '.js-bg'" in the animation but when scrolling the title gets outside of the border effect or the border goes to 0 suddenly while scrolling. Here is a codepen with a minimal of my current implementation: https://codepen.io/mariaferraro/pen/gOdRZoK

Hi, I’m using ScrollTrigger to make sections appear one after the other in sequence. I would like the sections to appear with a normal fade-in and disappear with a fade-out. To keep the sections fixed, I’m using `pin: true`. Moreover The next section must appear without “spacing” from the previous one (one fades out while the other fades in). The enter and exit animations must not follow the scroll. Once started, they should complete in 1s, like a normal tween. Here is the POC: See the CodePen at the bottom of the post. Question: when the section is deactivated (e.g., `onLeave`), the pin state is removed, and during the exit animation, I see the section scrolling up or down depending on the scroll direction. How can I keep it fixed, at least until the exit animation is finished? To clarify my question, I created a second POC that does exactly what I asked but significantly changes the markup by moving sections out of the scroll. I would like to avoid moving content outside of `#smooth-wrapper`. https://codepen.io/giuliocollesei/pen/KwPeWaG Thank you for your attention

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 GSAP community, I'm working on an image reveal animation where each image is split into 9 sections using clip-path. While the animation sequence works, the final state shows misalignment in the top 6 sections (only bottom 3 sections align correctly). Here's my Codepen: https://codepen.io/adhikari-dikshant/pen/pvzKpOB The animation should: Start with each section at a point (0 width/height) Reveal in a sequence from top-left to bottom-right End with 9 perfectly aligned sections forming the complete image Relevant code snippets: const finalClipPaths = [ "polygon(0% 0%, 33.33% 0%, 33.33% 33.33%, 0% 33.33%)", // Top left "polygon(33.34% 0%, 66.66% 0%, 66.66% 33.33%, 33.34% 33.33%)", // Top middle // ... rest of the paths ]; // Animation const tl = gsap.timeline({ scrollTrigger: { trigger: wrapper, start: "top 75%", }, }); Current behavior: Animation sequence works Bottom 3 sections align correctly Top 6 sections appear distorted/misaligned after animation completes No issues during the animation, only in final state What am I missing in the clip-path calculations or GSAP animation setup that's causing this misalignment? Any help would be greatly appreciated! Tech stack: GSAP 3.12.5 ScrollTrigger plugin Lenis Smooth Scroll 0.19.0 Bootstrap 5 Vanilla JS SCSS

Hey. I've got a rough draft of a hero section of a site and it's sort of working but it breaks if I scroll up and down too quickly. Is there anything that can be done to improve that? I appreciate it's pretty complicated, which I guess is the likely reason it breaks if I scroll too quickly. At the moment it's only styled for bigger screens so you'll need to open it up on codepen to see it working properly.

gsap.to(".snappingSection", { xPercent: -100, ease: CustomEase.create( "custom", "M0,0 C0,0 0.002,0.985 0.047,1 0.086,1.012 1,1 1,1 ", ), scrollTrigger: { trigger: section.current, start: "bottom bottom", end: "bottom top", snap: 2, markers: true, onEnter: () => { document.body.style.overflow = "hidden"; }, onLeave: () => { document.body.style.overflow = "auto"; // update the end of the scroll trigger dynamically }, toggleActions: "play none complete reverse", }, }); How can we dynamically update the end of the scroll trigger so that after leaving the scroll area, the end gets updated to the value needed.

Hello, I want to create a horizontal scroll animation with GSAP, like on this site: https://vantage.ava-case.com/work. I’m wondering if there are any resources I could consult, as I haven’t been able to find them. I found this CodePen: https://codepen.io/GreenSock/pen/BaQXjWw, which seems like a good starting point, but I can’t quite implement it correctly. See my GSAP starter template. Thank you in advance

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

Hi all, in my project where I instantiate lenis in a container and not in the body as by default, when I resize the window it seems that scrolltrigger is unable to calculate the new start & end correctly, did I do something wrong in the scrollerProxy configuration?

Hello friends! I wanted to create an animation using GSAP and ScrollTrigger, but I can't. The essence of the animation is that when scrolling, the large picture is fixed in the center of the screen and decreases. Then, when the user scrolls to the section with the slider, by default these slides are transparent. As soon as the user scrolls to the slider, this fixed picture should decrease to the size of the pictures from the slider, and then from 1 fixed picture, 3 others should move out from under it to take the place of the pictures of the sliders, after that the title and description should appear in the slider. I was able to fix the picture, but I can't do anything further. Tell me how to do it. Thanks in advance! That is, when the user scrolls the page and sees a large picture in the middle of the screen, the picture itself should be fixed. Then, when scrolling down, it should decrease (I think it should decrease to the size of the pictures that are located in the slider) Then the user scrolls down and sees the section with the slider. Initially, the slides are transparent by default. But we see a fixed picture in the center (which we fixed earlier). And as soon as it becomes at the level of the pictures in the sliders, 4 pictures should come out of this picture (possibly under 1 large one, place 3 more that will be transparent). And these pictures should be placed in the place of the slide pictures, after that the title and description should appear in the slides.

Hello guys new to GSAP here, i am trying to make a scroll carousel like these are the feature: 1. When user scroll the section card stack in top 2. the background is set from another section also follow the scroll base on which section card is in view 3. when the user scroll really fast it only snap to one section 4. it also have a pagination when user click it automatically scroll to the index section my approach 1. make a timeline for section 2. from the section i extract the image and append it to another section 3. have 2 TIMELINE for section and image 4. in Pagination i did try to get the scroll value but it very cluncky Please have a look into the below pen and guide me where I'm going wrong. Thank you...

Hi everyone, I’m working on a layout where I need to pin a section title at the top of the viewport while allowing the content inside that section to scroll vertically if it overflows. Once the content has finished scrolling, the next section should come into view ("layered pinning"), with its title pinning in the same way. The issue arises when the content height is too large. Instead of scrolling through the content, the section gets “stuck” with the title pinned and the overflowing content not behaving as expected. Thanks in advance!

I am using ScrollTrigger with Svelte. On my main page I have registered ScrollTrigger and attached it to a timeline, in which I have also set up snapping to Labels. I don't have ScrollTrigger on any other pages, but if I visit my home page and switch to some other page, ScrollTrigger apparently does not get cleared and it starts snapping if I scroll down on a page I did not even include it. Is there any way I can clear all of the previous GSAP stuff on switching pages? Svelte does provide an onMount callback, so maybe via that.

Hi GSAP Community, I'm working on a site using Lenis Smooth Scroll, GSAP Scroll Trigger, React-Three-Fiber, and Drei. While the animations look great but the site is extremely laggy and sometimes non-functional on many mobile and desktop devices. I've optimized where I can but still can't pinpoint the issue. Here's the live site: https://codeencoders.vercel.app/ GitHub Repo: https://github.com/Waqas786ali/codeencoders Details: I've implemented GSAP animations alongside Three.js objects. Performance on Desktop and Mobile devices is the primary concern (lagging, slow interactions). Any advice on optimizing GSAP or handling Three.js in mobile environments would be greatly appreciated! Thank you in advance for your help. Best regards, Waqas Ali

Hello, I'm trying to create a diagonal scrolling effect on a large div. I have a wrapper div that is pinned and hides the overflow, and a grid div to diagonally scroll over. My problem is that despite setting pinSpacing to false, if you scroll down to the end of the animation pinspacing is suddenly set to true, and the page is doubled in length. This spacing does not appear before reaching the bottom of the animation, as indicated by the scroll bar. Any help is appreciated.

Hello, can you help me, I have a little problem I need to advance the with the scroll, but I tried individually or in a group, this was my best result currently it appears one by one but it does not advance the horizontal scroll https://codepen.io/kmytor/pen/GgKELvN

I would like to know how to continue moving up and down in sync with scrolling even after the end has passed. I couldn't think of a way to do this. If there is a good way, please let me know. Thank you in advance. I would like to achieve a movement that follows the scroll, rather than the smooth movement . https://codepen.io/name-the-sans/pen/jENwjwr gsap.to(".element", { y: -100, ease: "none", scrollTrigger: { markers: true, trigger: "body", start: "top top", end: "top+=50 top", scrub: true, } }); https://codepen.io/name-the-sans/pen/xbKrvZB let lastScroll = 0; ScrollTrigger.create({ trigger: "body", start: "top top", end: "bottom top", scrub: true, markers: true, onUpdate: (self) => { const delta = Math.abs(self.scroll() - lastScroll); if (self.direction === 1) { gsap.set(".element", { y: gsap.getProperty(".element", "y") > -100 ? gsap.getProperty(".element", "y") - delta : -100, }); } else { gsap.set(".element", { y: gsap.getProperty(".element", "y") < 0 ? gsap.getProperty(".element", "y") + delta : 0, }); } lastScroll = self.scroll(); } });