All Activity

Your video is around 15 seconds long, so I've split it up in three sections of each 5 seconds. First of the best thing to do when working with ScrollTrigger is to remove it! This seems counter intuitive, but ScrollTrigger is just animating something on scroll, so just focus on the animation at first and only when you're happy with the animation add ScrollTrigger back in. This way you can focus on one part at a time and it will save a lot of headache when debugging. I've enabled GSDevTools for the animation, so we can first fully focus on the animation and create what we want to happen on scroll. I've modified your HTML and CSS, I've created a .trigger element and have everything stack right on top of each other with CSS (please disable all the JS to see what it looks like) I've taken this logic from my stacking cards post I encourage you to read through it, see below Then on the timeline I've put all the tweens, frist the video tweens to 5 seconds over a duration of 5 seconds, then the video tweens to 10 seconds over a duration of 5 seconds and at the same time the first card animates in from of screen, and them the same for the next card. This is probably not fully correct, but it shows you how you can create a timeline and have things happen at the same time. I've add some ScrollTrigger code but this is commented out, but you can enable it to see what this would do on scroll, but be sure to disable it again when you want to tweak the animation. If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ and check out this awesome tutorial how to work with ScrollTrigger. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/bGJOQzq?editors=1010

Total noob here Consider the following using sveltekit (svelte-5) and tailwindcss: <div class="flex flex-col justify-center items-center gap-8 w-[350px]" bind:this={instance}> <img src="/logo/logo-web.svg" alt="" class="max-w-[64px]" /> {#if loginUserStore.step === 'login'} <EmailPassword /> {:else if loginUserStore.step === 'reset'} <Reset /> {:else if loginUserStore.step === 'confirm'} <Confirm /> {/if} </div> When loginUserStore.step changes, the content of the modal changes. The modal height is set to auto (its not actually defined) and has a fixed width. How can I use GSAP to animate the height of the modal when the dynamic content changes ?

My intention is that the video is managed with scrolling, and that when it ends the next article appears. And also being able to decide at what point in the progress of the video those messages/paragraphs appear, instead of them appearing in their order in the HTML. I tried to pin the video to his article (I may have done it wrong). But I keep getting this point where the video takes up the entire page. I am trying to replicate this page: https://www.nytimes.com/interactive/2020/09/09/world/middleeast/beirut-explosion.html

Thank you, the revertOnUpdate seems to fix the issue. Can't say I understand why this works tho, as the useGSAP is reverted when the component is unmounted? The Refresh is because I have ScrollTriggers on elements below the feed that don't work without it. And removing the Refresh doesn't fix the issue in my full project. Another thing I tested is adding tweens without ScrollTriggers to the feed, and that doesn't cause any errors.

Hi all! I'm trying to make a sortable vertical list, but when i try to move a row to the bottom and autoScroll activates, the row becomes out of sync. I tried this.update(false, true) but that didn't seem to help. Am I missing something, or do i need a different approach? TIA, Jens

I have tested locally and GSAP ScrollTrigger is working perfectly, but one I place the code in ODOO Online it stops working, If it is possible, I can share with you the URL of Odoo online and the login details so you can check.

Hi @kevin.dev welcome to the forum! By default GSAP renders all the logic it needs on page load and because you're targeting the same element multiple times they all get the same start point en thus will not flow like you want to. What you can do is in your later tweens set immediateRender: false, so that they will wait until it is needed to calculate their animations. Personally for such a simple animation I would create one timeline with one ScrollTrigger, this is much easier to debug and maintain in the future. I've also tweaked the logic a bit. There is no need for a .fromTo(), the default scale of an element is 1, so setting .from() 0.75 will automatically scale to 1, if you use a timeline it will see in the next tween it is 1 and then animate .to() 0.75. Also if you want to have scale in both direction, you can just set scale. I've add two ScrollTrigger because from your question I get you want the pin to happen later then the scale up, so one handles the scale and the other the animation. In the animation I've add a pause twen for 1 second where the animation does nothing, to me this looks good, but be sure to tweak it if you want. Check out this tutorial how to work with ScrollTrigger if you want some more tips! Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/eYobPKB?editors=0010

I am using gsap in ODOO Online, I have placed the cdns of gsap and scrollTrigger in "Web Layout" file and it is showing that odoo has picked the cdn which is fine, but when I write gsap code i.e gsap.to(".char", { y: 0, stagger: 0.05, delay: 0.2, duration: 0.05, scrollTrigger: { trigger: "#top_brands_tag_two", markers: true, start: "top 80%", end: "bottom 50%", scrub: true } }); .char being the class provided from "Split-type" another javascript library for splitting text for animation. Issue is that markers appear on screen but the element markers which should interact with the big markers are stuck. The element markers when crosses the right side markers will animate the text, but as of now the element markers are stuck and not moving with the scroll.

Sorry, but I have only a 2014 iPad air 2 avaiable. The IOS version is 15.8.1. And there I can see the error. Good news knowing that on newer supports it works correctly. My problem with this iPad consists also in the fact that I don't know how to debug (I think is impossible directly on the iPad). For sure JS is working well, because some functions act correctly (but not all of them evidently). Anyway, I can consider that the error is limited only to some support, and is not generelized to the Mac system. I'm trying to learn more about this. Thanks for your answer, for now.

You where almost there! I've move your timeline outside the loop and add the ScrollTrigger logic to the one timeline, then I've add all your tweens to that one timeline and let ScrollTrigger control it. Does that make sense? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/qBwLJXX?editors=1010

Thank you very much. This is exactly what I needed. Your help has solved my long-standing problem. Now I can achieve the effect I need. Now I just need to integrate it into the Vue framework. Thanks again. https://codepen.io/sw355498/pen/ExJGpQe

I have my page where every section needs to be 100vh height and have a `scroll-snap` effect, but the footer needs to be `fixed overlapping` from the bottom. I added minimal reproduction, but when you want to stop scrolling the footer, the page jumps on top; sometimes, it just stops on the footer and only scrolls on the footer. Something magical is happening here, please help me) Also, I tried to move the snap effect to GSAP (based on this codepen — https://codepen.io/GreenSock/pen/NWxNEwY ), but it started lagging very hard (maybe because of the Three.js model in the background), and on iPhone, scrollAnimation started to be limited to only 60fps (on Pro versions, where we have ProMotion 120Hz, it is very ragged). Will be very grateful for some help with this ☺️

Hey, I am running into some confusion in trying to set-up an animation. I have a div that I want to scale up to 100%, then pin for some scrolling, and to finally scale down. I have it close, but the issue I am running into is having it pin, then after some scrolling having it scale down. I seem to get stuck between having it not pin at all and scale-down immediately or have it pin, and when it comes time to scale-down, it jumps and does not look good. I think it is stemming from the start/end points of the 2nd and 3rd ScrollTriggers. Perhaps, the element position is changing so the start/end points become stale. I tried to use ScrollTrigger.refresh() to address this in onLeave or onEnter options but that did not seem to help. I am questioning if this is the correct way to set this up and how I should be approaching the start/end points for my triggers. (I am using react so the codepen is pretty close, I think it accurately, displays my issue).

I noticed two problems: You nested ScrollTriggers inside a timeline. That's logically impossible to accommodate - the playhead of a tween can't be controlled by BOTH a timeline's playhead AND the scroll position simultaneously. You've got multiple tweens of the same element controlled by ScrollTriggers. By default, animations with ScrollTriggers are rendered immediately. So in your case, you just need to set the 2nd and 3rd to immediateRender: false so that they don't step on each other. Is this what you're looking for?: https://codepen.io/GreenSock/pen/QWPzBXO?editors=1010 And alternative might be to create a timeline that has ONE ScrollTrigger applied to the timeline itself (not nested ones), and have all your animations in there. That'd assume you can just make that one timeline span across the entire scroll area that you need. If not, then just stick with the individual tweens. I hope that helps.

As u see my start point disturb as i navigate to other page that the main problem any solution u know attachment add as video ?? function SlideCards({ data }) { const tElem = useRef(null); useGSAP(() => { const rwd = gsap.timeline({ scrollTrigger: { trigger: ".s-block", pin: true, pinSpacing:true, // pinnedContainer: ".rwd-area", markers: true, start: "top 15%", end: "bottom+=2000 top", scrub: 2, pinReparent:true, onRefresh: (e) => { console.log('erefresh', e); }, }, }); rwd.fromTo(".rwd-box:nth-child(2)", { xPercent: 93 }, { xPercent: 7 }); rwd.fromTo(".rwd-box:nth-child(3)", { xPercent: 100 }, { xPercent: 14 }); }); const rewardContainer = useRef(); const Ctext = (str, sClass, sText = ["yore", "Yore"]) => { let sT = str.includes(sText[0]) ? sText[0] : str.includes(sText[1]) ? sText[1] : false; if (sT) { let spD = str.split(sT); return ( <p> {spD[0]} <span className={sClass}>{sT}</span> {spD[1]} </p> ); } else return <p>{str}</p>; }; return ( <div ref={tElem} > <div className="s-block" > <div className="container" > <div className="rwd-area" > {data.map((card, ind) => { return ( <div className="rwd-box absolute" key={card} > <div className="rd-titl "> <h6>{card[0]}</h6> </div> <div className="d-lg-flex align-items-center"> <div className="rd-img"> <img src={card[3]} className="img-fluid animated bobo" alt="" /> </div> <div className="rd-cont"> <h4>{card[1]}</h4> {Ctext(card[2], "blue-tx")} <a className="btn-default" href={card[4]}> Learn more </a> </div> </div> </div> ); })} </div> </div> </div> </div> ); } recording (1).mkv

I saw this codepen where when you scroll down on a page the 3D picture moves with the page as it scrolls down. It also grows and rotates depending on which section in. I Copied the code and change it so it would work on a div element in html. When I tried it, the div would only move in the first section, not the rest. How would I be able to move a div element along the page as I scroll to the bottom, the EXACT way as the codepen below? This code does not use the motion path plugin only the scroll Trigger plugin which is okay since its free. The animation I want: Custom Keyboard Landing Page with Spline 3D and GSAP Scroll Animations (codepen.io) The animation I made: Relocate on Scroll (codepen.io)

Hi, Yeah having small elements (not enough height) will definitely be an issue because the way browsers handle wheel event the amount of pixels of each wheel event is more than the height of those elements. Maybe you should consider the Vertical Loop helper function in combination with the Observer Plugin, as shown in this demo: https://codepen.io/GreenSock/pen/KKYbeKL You can set an onComplete callback to add the active class to the target element. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues but it shouldn't be anything GSAP related. We haven't published any updates in over 3 months so if you haven't changed the GSAP/ScrollTrigger versions you're using I can't think of anything on our end that could be causing this. If that would be the case we'd be flooded with threads in that regard and a horde of angry users complaining about it 😉. If possible remove some CSS elements, other plugins you could have in your Wordpress app or maybe check some styles of your theme. Unfortunately there is not a lot we can do without a minimal demo and I have very little experience with wordpress in order to be able to identify this as an issue I've seen before. Sorry I can't be of more assitance. Happy Tweening!

Sure! Keep in mind that everything in GSAP (with the exception of our useGSAP hook and PIXI Plugin) is framework agnostic, so we thrive in performance, KB size and flexibility. We don't aim to put constraints for our users or make them code through a bunch of hoops in order to make their code work, we want that they can write their code and that it just works. That's why GSAP Context has the add() method. You can create your context and if you want to create a GSAP instance in a method that you need outside the scope of the GSAP Context instance you can add that instance using the add method: let ctx; ctx = gsap.context(() => {}); const myMethod = () => { // Some logic here ctx.add(() => { // More GSAP instances here }); }; // Then later on your code ctx.revert();// Easy cleanup of EVERYTHING If you want to have some custom logic outside GSAP Context is fine, no problem there. Happy Tweening!

Yeah the issue could be that the fact that the boolean on your state is updated that doesn't necessarily means that the elements are rendered yet, especially when you run that ScrollTrigger.refresh() method. Any particular reason for that? I don't really see any reason for having that code in that component. Removing that single line seems to fix the issue. As far as I can tell there is no real need to have that refresh call there, since when that component is unmounted the useGSAP hook will revert everything inside of it, so there shouldn't be any reason to globally refresh ScrollTrigger, unless there are other ScrollTrigger instances in your parent component, but still if you need it you can add the revertOnUpdate option to the useGSAP hook to revert everything: useGSAP( () => { if (feedLoaded) { ScrollTrigger.refresh(); // rest of your code } }, { scope: curatorContainer, revertOnUpdate: true, dependencies: [feedLoaded], } ); Hopefully this helps. Happy Tweening!

Hi @Justice, Thanks for sharing your solution with the community, very generous of you! 🥳 Just as an FYI @Cassie crafted this great demo: https://codepen.io/GreenSock/pen/ExEOeJQ Happy Tweening!

Great to hear that you were able to fix it! 🥳 Happy Tweenig!

Hi, You seem to be using Lenis, you have a business license, why not use ScrollSmoother? The issue here seems to be that something is getting cached and interfering with ScrollTrigger calculations, that's why a hard refresh fixes the issue. Maybe wrap all your code in a load event in order to be sure that everything is loaded: window.addEventListener("load", () => { // GSAP code here }); Unfortunately without a minimal demo there is not much we can do. If possible try to create a demo that recreates the problem so we can have a better look. Sorry I can't be of more assitance. Happy Tweening!

Hi, Jack is right, the issue is that in a Nuxt app you can access the runtime context with the useNuxtApp hook, but for using something from the app's context it has to be there first. In your demo I don't see any composable neither in the composables folder or in our package.json indicating that you installed a composable that abstracts GSAP's import statement: https://nuxt.com/docs/guide/going-further/nuxt-app https://nuxt.com/docs/guide/directory-structure/composables I think Jack's final suggestion is the best, just import GSAP in the files you need it and that should work. Happy Tweening!

Thanks, can I do something like this, where inside the component I add custom logic which is not related to gsap directives? <script> import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { SplitText } from "gsap/SplitText"; gsap.registerPlugin(ScrollTrigger, SplitText); let ctx: gsap.Context | null = null; function componentVisible() { return document.getElementById("hero") !== null; } document.addEventListener( "astro:page-load", () => { if (componentVisible()) { // Initialize all animations and add all to the current gsap context ctx = gsap.context(() => { // Text + buttons reveal const childSplit = new SplitText( "[data-hero-text-reveal]", { type: "lines", linesClass: "split-child", }, ); const parentSplit = new SplitText( "[data-hero-text-reveal]", { // type: "lines", linesClass: "split-parent", }, ); gsap.timeline() .set("[data-hero-text-reveal]", { opacity: 1 }) .from(childSplit.lines, { yPercent: 300, skewY: 7, stagger: 0.2, }) .to( "[data-hero-reveal]", { opacity: 1, stagger: 0.1, }, "<=", ); const pathsToAnimate = document.querySelectorAll( '[wb-element="path-to-animate"]', ); pathsToAnimate.forEach((path) => { const finalPath = path.getAttribute("wb-final-path"); gsap.timeline({ scrollTrigger: { trigger: path, start: "top bottom", end: "bottom top", scrub: 1, }, }).to(path, { attr: { d: finalPath || "" }, ease: "none", }); }); }); } }, { once: false }, ); document.addEventListener("astro:after-swap", () => { // Before switching to the new page check and clean the current context if (ctx != null) { ctx?.revert(); ctx = null; } }); </script> Also in my case is there any advantage in scoping the context to a specific component? Thanks