Search the Community

I built a cinematic scroll-controlled experience using GSAP, ScrollTrigger and Lenis. The demo uses a pinned scrubbed timeline with a central Motion Orb, a 5-stage scroll progression, component convergence, and a final interface blueprint reveal. The goal was to make scroll feel like it controls a cinematic transformation, rather than simply triggering separate animations. I’d love feedback on: - ScrollTrigger pacing - scrub timing - pinned section duration - performance - the final convergence reveal Project page: https://jkimdd.gumroad.com/l/premium-scrollytelling

I’m trying to recreate the scroll-driven cards animation used on https://www.garcy.studio/ Target behaviour (reference attached via screenshot): Cards start offscreen (bottom / slight right). On scroll, the whole cards wrapper moves diagonally (up + left). Once the first card fully enters the viewport, the wrapper pins. While pinned, cards translate horizontally in a smooth, continuous way. No jumps, no resets, and no sudden position corrections after pinning. I’ve attached screenshots of the reference animation and shared a minimal CodePen demo showing the issue. Please help me here.

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.

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 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 })

Hello, I’ve been working on projects with GSAP ScrollSmoother for a long time. But lately, I’ve been noticing people using Lenis with GSAP. For my upcoming projects, do you think their compatibility is good enough at this point? Or are there still issues? Like, are we being misled by how projects with Lenis are performing? In short, can we say that GSAP works smoothly and stably with Lenis for all animations and functions? Thank you very much in advance!

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 everyone, As this is my first time using GSAP, I'm having quite a bit of trouble getting the scroll velocity logic for the marquee right. At the moment the logic sort of works but it doesn't really work as I intended as there is an abrupt stop as soon as you stop scrolling and then it continues the looping animation at a normal speed which sort of breaks the seamless speed scroll. Would also be happy to get any other feedback on improving my GSAP code, it feels like I'm just hammering away at the code while reading the docs and it just happens to work a little. Any other questions I would be happy to answer!

I’m trying to replicate the scroll animation in the Services section of Webisoft's website, using Lenis and ScrollTrigger. However, I can’t achieve the effect where the top part of each section remains partially stacked as you scroll. Here’s my CodePen link: https://codepen.io/Miffy402/pen/mdNLBBq. Any advice or tips would be greatly appreciated!

Hello, I am having some troubles making a scrolltrigger animation in a nuxt component. Basically I have a lenis script for a nuxt page and inside this page a scrolltrigger script for the projectItem.vue component. I installed gsap via npm and imported it both in the page and the component. I don't know why but the code seems to work because we enter in the onEnter() callback but there is no animation at all. Here is a link to the stackBlitz of my project, hoping someone can help me : https://stackblitz.com/~/github.com/Mitiss25/portfolioFinal Thank you !

I was building a website while integrating scrollTrigger with lenis, the animation was not coming in right, when I added marker and set it to true to see the the start and end positions, I saw they where not aligned properly. But If I let's say change one of the animating properties in the code it aligns itself correctly to the actual start and end position. And also no this is not the same issue with ScrollTrigger and Lenis Issue, because some section seem not to have this issue and this particular one does. here is the code on codesanbox. Check the contact component. THANK YOU

I'm trying to call a function inside GSAP - I'm using React, but I'm getting error in my console: App.jsx:59 Uncaught TypeError: Cannot read properties of undefined (reading 'scrollTo') This is the code: import gsap from "gsap"; import ScrollTrigger from "gsap/dist/ScrollTrigger"; import { ReactLenis, useLenis } from "@studio-freight/react-lenis"; gsap.registerPlugin(ScrollTrigger); const App = () => { const lenis = useLenis(({ scroll }) => { // called every scroll }); const [showSpan, setShowSpan] = useState(true); const mainTitleRef = useRef(null); const secondaryTitleRef = useRef(null); const wavingHandRef = useRef(null); const section1Ref = useRef(null); const section2Ref = useRef(null); useLayoutEffect(() => { pinSection(); animateTitles(); return () => { // Cleanup code when the component unmounts ScrollTrigger.getAll().forEach((trigger) => trigger.kill()); }; }, []); // Empty dependency array to run once after the initial render const pinSection = () => { // Pin the section when it enters the viewport ScrollTrigger.create({ trigger: section1Ref.current, start: "top top", end: "1200 top", pin: true, markers: true, onLeave: () => { gsap.to(section1Ref.current, { opacity: 0, duration: 1, onComplete: scrollToSection2, }); // Set opacity to 1 when entering the trigger // scrollToSection2(); // gsap.add( function(){ scrollToSection2(); } ) }, onEnterBack: () => { gsap.to(section1Ref.current, { opacity: 1, duration: 1 }); }, }); }; const scrollToSection2 = () => { lenis.scrollTo(section2Ref.current, { duration: 5 }); }; As you can see scollToSection2 is a React function. Thank you for your help upfront!

When I click on a navigation link to scroll to a specific section of the page using lenis.scrollTo, all scrollTrigger animations run, causing a poor scrolling experience due to the numerous animations in each section. To address this, I attempted to disable the animations using scrollTrigger.disable() when lenis.scrollTo runs and re-enable them when the particular section is reached. While the animations created with ScrollTrigger pause correctly during the scroll, the page jumps to the top when the scroll is complete. You can view the codepen demo here: see codepen demo here :

Hello there, I'm trying to animate the letters of a sentence. Letters need to appear when its right bound hits the right bound of my viewport (= when the letter enters the viewport). I'm almost there but I seem to be missing something. I'm using the containerAnimation parameter but maybe it's not the right thing to do here. Anyway I'm opened to suggestions, thanks for your help folks Olivier