Search the Community

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

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.

Hey everyone, I’m trying to create a scroll-triggered text effect using GSAP, but I’m not sure where to start. Here’s what I want to achieve: Initial State: The text “ELEVATING PERSPECTIVES” should appear in solid white on a black background. Scroll Effect: As the user scrolls down, the video should start appearing inside the text from the bottom. The video should follow the scroll movement, meaning scrolling up/down should affect how much of the video is visible inside the text. Final Effect: Once the video completely fills the text, I want to add a zoom effect on the text for emphasis. I’ve attached reference images of what I’m trying to achieve. Would really appreciate any guidance, code snippets, or direction on how to achieve this effect.

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

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.

Hello People, I've using SplitType with ScrollTrigger on multiple text blocks but the markers are not showing on the right places. Here: https://charlie-number-five.webflow.io/hide-seek I also posted it on StackOverflow: https://stackoverflow.com/q/79390319/29383223 You can find more details there if you need. Can you please suggest what can be the possible issue?

I've got a horizontal accordion on a horizontally scrolling page. When the accordion changes size, calling ScrollTrigger.refresh() updates the sizes, but causes the scroll position to jump as the page is now longer. I've tried a work-around that stores the scroll position before the refresh and then applies it after refresh. This maintains the correct page position, but you can see the page slide into position after refresh (due to scrub = 1) What's the best way to handle this? I want the accordion to expand/contract without the page visually jumping.

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 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?

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, 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