Leaderboard

It looks like your artwork is using an extremely small range. By default, MorphSVG rounds to the closest 2 decimal places to keep strings from getting crazy long. So for example, numbers like 100.02145632 would become 100.02. But in your case, you've got all the numbers crammed into very small ranges so that the rounding makes the jumps noticeable, like if all your values are between 0 and one, then the difference between 0.01 and 0.02 might visually look pretty big. So just set the precision to a higher value: https://codepen.io/GreenSock/pen/zxBPwdP?editors=1010 Does that help?

I think this is not possible, but that is more to do with how browsers render things then it is has to do with GSAP. SplitText split the words, so now they are no longer the child of your .parent-div and thus the background clip effect is on the wrong element. A way of doing it is a bit of a fake out, but you can give each letter a color that is between your two gradients, it is not a real gradient because each letter will just have a solid color, but it looks almost the same. This is how I have done it once. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/WbxZpKe?editors=0010

Hey hey! So SVG animation with GSAP is great fun and nice and easy if you chop your elements up into bits and use transforms. https://codepen.io/cassie-codes/pen/VwZLrRR However, depending on the result you're going for, you may want to reach for Rive (not Lottie imo) When to reach for Rive 1) You need to morph lots of SVG shapes and don't want to have to mess about with lots of asset prep and trial and error 2) You have a lot of joints or more complex movement that would benefit from rigging Here's a workshop on rigging. If you can keep the movement simple and the shapes simple, GSAP will do the job, and be less heavy on load. Rive is good fun and great for complex rigging though and you can render to canvas which is also great for runtime perf.

I made it work. I just added some CSS to the content of the iframe. Now there is one div that has height:100vh and overflow:auto. That I use as scroller. Now it works like on the frontend.

Hey, don't worry about it! I've been on this forum for 5 years now and I had no idea of that property as well 😅

Please accept this as a declaration of my undying love for you. No but seriously, I've been trying to solve this for 2 days – actually feel kind of stupid for missing that property in the documentation hahah.

Thanks for the assist! There were two click events being fired. I'm still confused why both touch and pointer events are firing (I have "Device-based" selected in the Dev Tools touch settings, not "Force enabled") and why NormalizeScroll made a difference, but the second block of code helps at least prevent any issues while using DevTools. And the first block of code was extremely helpful in debugging the double-clicking accordion issue, which turned out to be a separate problem entirely. Going to keep that in my back pocket for future use. Thank you!

All good thanks!

Sorry about the confusion there, @Matt DD! This was a very tricky bug that'd only show up if you load the UMD version of ScrollTrigger AFTER loading the core GSAP file (the order of loading was critical). That should be fixed in the next release of ScrollTrigger which you can preview here: https://assets.codepen.io/16327/ScrollTrigger.min.js This fixes it for you in the demo, right?: https://codepen.io/GreenSock/pen/pvbNoye?editors=0110 Another fix for the current (or older) version would be to add this: window.addEventListener("resize", () => gsap.set("html", {scrollBehavior: "auto"})); ScrollTrigger.addEventListener("refresh", () => gsap.set("html", {scrollBehavior: "smooth"}));

Are you just trying to do this?: https://codepen.io/GreenSock/pen/vEKKxQj?editors=1010

That was a missunderstanding. I wasn't asking anything more. I just wanted to explain, what the problem was. And your hint with the order of the scrolltriggers brought me to the solution. So thanks again.

Yeah, without a minimal demo it's almost impossible to troubleshoot but here are a few ideas off the top of my head: I wonder if you're setting up the ScrollTriggers in the wrong order. You should either create them in the order they actually occur on the page -OR- use refreshPriority to determine their order (see the docs). Do you have scroll-behavior: smooth on the page? Definitely avoid that because it's sorta like applying a CSS transition to something that GSAP is animating; when GSAP tries to set a value, the browser is like "NOPE! I'll do that gradually over time". ScrollTrigger needs to temporarily (and invisibly) set the scroll position of the page to 0 when refreshing, so if you've got scroll-behavior: smooth, that'll cause the browser to refuse to change the scroll when ScrollTrigger tells it to. Other than that, if you want more help you'll need to provide some kind of minimal demo so we can see exactly what's going on and tweak the code ourselves to see the results (CodePen or Stackblitz are perfect for this).

You're asking what to use on a GSAP forum, so the answer you'll be getting would be GSAP 😅 I would start by doing some small scale tests, but creating the SVGs with some joints where you know you want to move things (eg the legs) and creating different stats of your 'creatures' so that you can use the morphSVG plugin, would be the route I would be choosing. Hope it helps and happy tweening!

Thank you so much! That was much simpler than I thought 😅

I see two problems: You've got scroll-behavior: smooth (that's like applying a CSS transition to something animated with GSAP - the browser basically refuses to set values immediately, so when GSAP recalculates positions and temporarily sets the scroll position to 0 invisibly, the browser is like "NOPE!"). You're using a pretty old version of GSAP. I'd strongly recommend updating to the latest version (3.14.2 right now).

Yeah, understand. Tested, works. That's really great. Thanks a lot. Now I'm hoping I'm able to implement this into my WordPress environment, too. But I think this should work either. The only thing that's not working, are the markers. There are non at all. But that's not really a problem. If they are working in the frontend, I can test the animations there. Thanks again for the support.

Yeah a minimal demo (emphasis on minimal, please do not create a copy/clone of your entire project, just a few elements that clearly illustrate the issue) is really needed if possible. Perhaps instead of using position sticky you can use ScrollTrigger and pinSpacing: false https://gsap.com/docs/v3/Plugins/ScrollTrigger/#pinSpacing Again, perhaps try using ScrollTrigger for controlling how it works and shows/hides. Check these demos: https://demos.gsap.com/demo/directionally-aware-header/ https://codepen.io/GreenSock/pen/vYWMOPz Be sure to create your ScrollTrigger instances in the order they appear in the screen as the user scrolls down: https://gsap.com/resources/st-mistakes/#creating-scrolltriggers-out-of-order You can use the refreshPriority config option: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#refreshPriority And/or the sort method: https://gsap.com/docs/v3/Plugins/ScrollTrigger/static.sort() Hopefully this helps Happy Tweening!

Hey @iDVB, @cbravo, and @Rodrigo, I've been dealing with a very similar React + GSAP orchestration challenge in my projects—getting nested animations to sequence properly after top-level ones without relying on manual positions or lifting all refs up. The state management angle you mentioned is key, and I agree it's more of a React communication issue than GSAP-specific. Building on the ideas here (like using context for a master timeline and something akin to shiftChildren for dynamic insertion), I experimented with a queue-based approach: It collects animation functions from parent and children during their useGSAP effects, sorts them by an assigned order (auto-incrementing or overridden), and then executes them sequentially on the shared timeline once everything's mounted. This way, you can "inject" out-of-sequence tweens that shift others automatically, avoiding hard-coded times and handling the child-before-parent render order. Here's a quick demo in CodeSandbox adapting your setup: https://codesandbox.io/p/devbox/p4p7fp It ensures the second top-level animation waits for the nested one without magic numbers. You can tweak the order overrides for more control, and it plays nice with deeper nesting too.

Hi @rajavat welcome to the forum! What have you tried already? We love to see what you can come up with, that way we can see your thought process and thus better help you understand the tools! If you're new to GSAP check out this awesome getting started guide https://gsap.com/resources/get-started/ For this effect our Flip plugin might help check out out https://gsap.com/docs/v3/Plugins/Flip/ https://codepen.io/GreenSock/pen/MWdVyop Here is a starter template which loads all the plugins https://codepen.io/GreenSock/pen/aYYOdN Hope it helps and happy tweening!

I tried to make a RAW version of toggle animation. This includes only methods and library files fetched from GSAP. Anyone can copy this code and apply in their RAW projects. Note: This will only work in raw HTML, CSS and JavaScript. No framework included.

I would start by taking a look an our Flip pluign https://demos.gsap.com/demo/simple-grid-flip-modal and take it from there. If you get stuck please post a minimal demo with what you've tried and we'll be happy to give you some pointers. Hope it helps and happy tweening!

Dude you are awesome! I see that you are very very active on this forum, thanks for helping out!

Hi @LmaoBoomBoom and welcome to the GSAP Forums! Yep, that definitely can be done with GSAP. One approach could be to duplicate the paths where you want the pulse to travel and use the DrawSVG Plugin to simulate the pulse: https://gsap.com/docs/v3/Plugins/DrawSVGPlugin That if the case is that you want the pulse to be a line as shown in this demo: https://codepen.io/GreenSock/pen/ZYOJGvj But if you want the pulse to be a dot or something else like a small image, you can use a single path and use the MotionPath Pugin: https://gsap.com/docs/v3/Plugins/MotionPathPlugin With the MotionPath plugin you can duplicate the paths and move an element along the path that masks one of the paths and that simulates the impulse. These articles by @PointC are great to learn the basic of these approaches: https://www.motiontricks.com/svg-masks-and-clippaths/ https://www.motiontricks.com/svg-calligraphy-handwriting-animation/ Hopefully this helps Happy Tweening!

It looks like that's due to the CSS animation you've applied and the fact that in order to pin anything, ScrollTrigger must create a pin-spacer <div> wrapper element around the element you're pinning (to keep its placement in the document flow while it's in position: fixed which removes it from the document flow...according to CSS/browser/layout rules, not GSAP-specific). Each time the window gets resized, it must do a ScrollTrigger.refresh() to recalculate all the positions, etc. which also means it must remove/add the pin-spacer element. That's what triggered your CSS animation. And remember that on mobile devices, the showing/hiding of the address bar creates a window resize. So in order to avoid the auto creation and adding/removing of the pin-spacer element, you can just create your OWN and tell ScrollTrigger to use that one instead. That way, it won't have to change anything in the DOM structure. Here's what it'd look like in your demo: https://codepen.io/GreenSock/pen/jErYxXR?editors=1010

Hello @Rodrigo! I just discovered this amazing tool, so I’m still figuring out where everything is. Thanks for the link, and kudos to the GSAP team! 💝

Hi, Just an FYI, if you want to use a more complex gradient you can use an image for the gradient and blend mode in order to achieve that: https://codepen.io/GreenSock/pen/GgqyJZw Hopefully this helps Happy Tweening!

Hi Everyone, Its a paid task, I need this on urgent bases probably till tomorrow, I want two animations in my Reactjs projject. One is Blue Hero Banner that give waves effect and ripple wave effect on mouse interaction. Reference example https://www.chooseplasticfreewipes.com/ Second animation is 3D Text Slider example that change it text onscroll. I am rferening WHAT, HOW, WHERE section, Only need text slider animation. Reference Example https://immersive.altitude101.com/ Whatsapp me for more details. Best of Luck

We’re looking for a high-level designer to collaborate on a single, standout landing page for a growing platform. This is not a generic web redesign. The goal is to create a visually striking, modern landing experience that communicates the product clearly while feeling futuristic, clean, and emotionally engaging. The landing page will serve as the core brand touchpoint, so we’re aiming for quality, clarity, and originality—without overloading the page or hurting performance. Project Scope -Design one main page - Focus on strong visual storytelling through layout, typography, color, and motion - Collaborate closely on the concept and creative direction - Balance creative impact with fast load times - Help define a distinct visual identity that can scale into future brand materials If you love crafting memorable first impressions and want to help shape a brand’s visual direction from the ground up, this project will be a great fit. Thank you.

Thank you, I somehow ended up solving the issue. Here is the code for anyone <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>SVG Path Animation with Bending Trail (Terminal-style)</title> <style> body { margin: 0; padding: 40px; background: #0a0a0a; display: flex; justify-content: center; align-items: center; min-height: 100vh; } .container { width: 100%; max-width: 1248px; } svg { display: block; width: 100%; height: auto; } </style> </head> <body> <div class="container"> <svg width="1248" height="1100" viewBox="0 0 1248 1100" fill="none" xmlns="http://www.w3.org/2000/svg"> <defs> <clipPath id="clip0_965_963"> <rect width="1248" height="1100" fill="white"/> </clipPath> <filter id="smoothBlur"> <feGaussianBlur in="SourceGraphic" stdDeviation="0.5"/> </filter> <linearGradient id="trailGrad1" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#FFCD1C" stop-opacity="0.06"/> <stop offset="15%" stop-color="#FFCD1C" stop-opacity="0.15"/> <stop offset="35%" stop-color="#FFCD1C" stop-opacity="0.3"/> <stop offset="55%" stop-color="#FFCD1C" stop-opacity="0.5"/> <stop offset="75%" stop-color="#FFCD1C" stop-opacity="0.75"/> <stop offset="100%" stop-color="#FFCD1C" stop-opacity="1"/> </linearGradient> <linearGradient id="trailGrad2" gradientUnits="userSpaceOnUse" x1="0" y1="0" x2="1" y2="0"> <stop offset="0%" stop-color="#FFCD1C" stop-opacity="0.06"/> <stop offset="15%" stop-color="#FFCD1C" stop-opacity="0.15"/> <stop offset="35%" stop-color="#FFCD1C" stop-opacity="0.3"/> <stop offset="55%" stop-color="#FFCD1C" stop-opacity="0.5"/> <stop offset="75%" stop-color="#FFCD1C" stop-opacity="0.75"/> <stop offset="100%" stop-color="#FFCD1C" stop-opacity="1"/> </linearGradient> </defs> <g clip-path="url(#clip0_965_963)"> <path id="mainPath" d="M624 0C624 0 624 268.405 624 440.386M624 440.386C609.488 555.302 336.877 621.285 250.844 794.029C250.844 889.669 250.844 942.691 250.844 1037.95M624 440.386C638.512 555.302 911.123 621.285 997.156 794.029L997.156 1037.95" stroke="#F5F5F5" stroke-opacity="0.1"/> <path id="pathLeft" d="M624 0C624 0 624 268.405 624 440.386 C609.488 555.302 336.877 621.285 250.844 794.029C250.844 889.669 250.844 942.691 250.844 1037.95" stroke="none" fill="none"/> <path id="pathRight" d="M624 0C624 0 624 268.405 624 440.386 C638.512 555.302 911.123 621.285 997.156 794.029L997.156 1037.95" stroke="none" fill="none"/> <path class="trail1" d="M624 0C624 0 624 268.405 624 440.386 C609.488 555.302 336.877 621.285 250.844 794.029C250.844 889.669 250.844 942.691 250.844 1037.95" stroke="url(#trailGrad1)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#smoothBlur)"/> <path class="trail2" d="M624 0C624 0 624 268.405 624 440.386 C638.512 555.302 911.123 621.285 997.156 794.029L997.156 1037.95" stroke="url(#trailGrad2)" stroke-width="4" fill="none" stroke-linecap="round" stroke-linejoin="round" filter="url(#smoothBlur)"/> <circle class="dot1" r="2.5" fill="#FFCD1C"/> <circle class="dot2" r="2.5" fill="#FFCD1C"/> </g> </svg> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/gsap.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.12.5/MotionPathPlugin.min.js"></script> <script> gsap.registerPlugin(MotionPathPlugin); const pathLeft = document.getElementById("pathLeft"); const pathRight = document.getElementById("pathRight"); const trail1 = document.querySelector(".trail1"); const trail2 = document.querySelector(".trail2"); const grad1 = document.getElementById("trailGrad1"); const grad2 = document.getElementById("trailGrad2"); const dot1 = document.querySelector(".dot1"); const dot2 = document.querySelector(".dot2"); const TRAIL_LENGTH = 80; const DURATION = 7; // Setup trails with strokeDasharray technique function setupTrail(path) { const length = path.getTotalLength(); path.style.strokeDasharray = `${TRAIL_LENGTH} ${length}`; path.style.strokeDashoffset = TRAIL_LENGTH; } setupTrail(trail1); setupTrail(trail2); // Update gradient to follow the trail function updateGradient(path, grad, progress) { const len = path.getTotalLength(); const headPos = progress * len; const tailPos = Math.max(0, headPos - TRAIL_LENGTH); const head = path.getPointAtLength(headPos); const tail = path.getPointAtLength(tailPos); grad.setAttribute("x1", tail.x); grad.setAttribute("y1", tail.y); grad.setAttribute("x2", head.x); grad.setAttribute("y2", head.y); } const tlLeft = gsap.timeline({ repeat: -1 }); tlLeft .to(dot1, { duration: DURATION, ease: "none", motionPath: { path: "#pathLeft", align: "#pathLeft", alignOrigin: [0.5, 0.5] }, }, 0) .to(trail1, { duration: DURATION, ease: "none", strokeDashoffset: -trail1.getTotalLength() + TRAIL_LENGTH }, 0); tlLeft.eventCallback("onUpdate", () => { const prog = tlLeft.time() / DURATION; updateGradient(pathLeft, grad1, prog); }); const tlRight = gsap.timeline({ repeat: -1, delay: 3.5 }); tlRight .to(dot2, { duration: DURATION, ease: "none", motionPath: { path: "#pathRight", align: "#pathRight", alignOrigin: [0.5, 0.5] }, }, 0) .to(trail2, { duration: DURATION, ease: "none", strokeDashoffset: -trail2.getTotalLength() + TRAIL_LENGTH }, 0); tlRight.eventCallback("onUpdate", () => { const prog = tlRight.time() / DURATION; updateGradient(pathRight, grad2, prog); }); </script> </body> </html>

This sounds related to this thread:

Is this ONLY happening while you've got Dev Tools open? I bet that's because when the browser is emulating like that (and I assume you've got "Force enabled" in the touch settings of Dev Tools), it actually fires off BOTH touch AND pointer events. Here's a quick test you can run: ["touchend","pointerup","mouseup","click"].forEach(t => window.addEventListener(t, e => console.log(t, e.pointerType || ""), true) ); You're seeing TWO "click" events dispatched by the browser, right? (one for touch, one for non-touch) So as far as I can tell, that's a browser issue related to firing off both touch and pointer events (duplicate), but I guess you could work around that by adding this: if (ScrollTrigger.isTouch) { window.addEventListener("click", (e) => e.pointerType !== "touch" && e.preventDefault(), true); } Does that clear things up?

That fixed it! Thanks for the catch, I have a better understanding of things now.

Hello fellow GSAP users, I am a Swedish frontend developer, currently featured in the GSAP Showcase with my Folio, https://www.thomasthorrstensson.com I know GSAP inside out, but also use libraries such as Curtains.js, Pixi.js, Three.js, and Lenis. I have over 15 years with JavaScript, and quite a few with TypeScript. Can build sites and landings front to back in Vue, Nuxt and Svelte. Interaction, motion coding, is my speciality. Here are some recent labs: https://nasa-apods.vercel.app/ https://mp3visualizer.thomasthorstensson.com/ https://atictactoe.vercel.app/ https://palestine-awareness.thomasthorstensson.com/ Open to collaborations and available, so feel free to get back to me here at any time to setup an e-meet. Many Thanks, 🧦 Thomas

Thanks a lot!

Hi, That is more related to the space between the final card and the bottom of the section that contains the cards. If you set markers to true, something that you should always do in development, you'll see that the end point is passed before the start point so the ScrollTrigger instance for the last card ends before it starts: In this case a simple fix is to increase the padding at the bottom of the cards container to this: .wrapper { padding-top: 100px; padding-bottom: calc(35vh + 100px); border-top: dashed 2px var(--color-surface50); border-bottom: dashed 2px var(--color-surface50); } That's basically half the height of the card plus the top padding. That is a more flexible and dynamic value than a fixed value in pixels. Hopefully this helps Happy Tweening!

Hi, thanks. 😀 I was digging in forum and I found one topic with changing pointer-events in similar problem, and I tried adding this to pinned section in Projects component: onLeave: () => { gsap.set(".projectsSection", { pointerEvents: "none" }); }, onEnterBack: () => { gsap.set(".projectsSection", { pointerEvents: "auto" }); } it seems to be working too 🤔

It can be really hard to tween the same property multiple times on the same element. Lets say you want to reveal an element on scroll base on the scale property, but then also want an hover effect, which also targets the same scale property, you then soon find out that these two tweens don't really play nice with each other. When you scroll just a bit and then hover, you’ll see weird jumps and when you then start scrolling again even more jumps. Don't even try to hover and scroll at the same time! this will be sure to give you a headache! https://codepen.io/mvaneijgen/pen/myEWWBe?editors=0010 How can we solve these issues? We could create the tween only on hover, but this will create new tweens each time you hover and will solve the issue only one way, as soon as we scroll again, things will break again. We could remove the scroll tween as soon as we hover, but then we’ll be missing features. Not really nice solutions, but what if I told you it is even simpler than that! Just split your tween over two elements! Wrap your element in another element and move one of the tweens to that element. This way, you split the logic over two elements, and you no longer have any conflicts This is not the only way to solve conflicting tweens, you could also use different properties. If you, for instance, want to tween things on the y-axis, you could combine y and yPercent on the same element without any issues. Also, scroll and hover are not the only ways to create conflicting tweens. It could rear its head anytime, so it is good to be aware of when you see weird jumps happening in your animations to see if you are animating the same property on the same element and if adding another element could solve these issues! Hope it helps and happy tweening!

@Rodrigo ah great stuff! Thanks so much for your help.

Hello, I have two problems/issues: 1. Google Chrome sometimes does not render well 1px solid borders - i have a list of three columns and within them there is a element that has 1px solid border, in two of them the border looks glitchy like thicker that it should be. In the other one "thiner" looks like it should be without any glitches. Additionally this is random.. its not always the same ones rendered wrongly.. The code set up for this is: .section__fade-in-group > * { opacity: 0; will-change: opacity, transform; visibility: hidden; transform: translateY(-20px); } if (section.querySelector(".section__fade-in-group")) { sectionTL.to( section.querySelector(".section__fade-in-group").children, { autoAlpha: 1, y: 0, duration: 0.75, stagger: 0.15, ease: "expo.out", }, section.querySelector(".section__content") ? "-=0.5" : "" ); } So the animation is pretty simple.. Does anyone know why is that happening? 2. The second problem is the Firefox, i have a lot of similiar animations like in point 1 but in Firefox they are a bit jittery - not as smooth as in Google Chrome. For example: I have this animation for full width hero image: const imgCover = heroBanner.querySelector(".img-cover"); heroBannerTL.fromTo( imgCover, {y: -20, scale: 1.1}, { y: 0, scale: 1, opacity: 1, duration: 1.5, ease: "power3.out", } ); I have tried will-change and stuff but nothing helps.. is there anything that could smoothen? UPDATE: I have tried this: // Fix: pixel-snapping that Firefox applies for some reason during rendering (totally unrelated to GSAP). rotation: 0.1, and seems like it helped. thanks guyz!

No you can not create nested ScrollTrigger. The best way I like to think about ScrollTriggers is that is is just animating something on scroll. So without any ScrollTrigger the animation should work how you expect and then all ScrollTrigger is doing is animating that specific animation tied to the scrollbar. This below part I find really important to understand how ScrollTrigger works I've also written a post with this logic in mind, maybe this will get you a better insight now ScrollTrigger works Hope it helps and happy tweening!

Hi, Maybe you can have a look at this: https://gsap.com/resources/fouc/ As for things being missing, as Cassie mentions if your site has a large amount of images and assets then a preloader could be needed, you'll have to be the judge of that. I made a fair share of loaders in my time and my approach was always to have a fixed number of assets and API calls, ie, know how many images and API calls your site has and create an array of those, preload the images and use async code for the API calls and create a callback to increase a number and when that number is equal to the array length means all the assets are loaded and you can remove the preloader screen. What you want to do as a preloader? There is no limit for that you can go from the basic bar and percentage indicator to logo animations with SVG to crazy shaders stuff. Happy Tweening!

Thanks, in the end I used draggable and implemented a service-based solution.

Hi, had the same issue - be sure to remove .npmrc file from the project root (or your user folder for development builds) and then reinstall the gsap package.

Not an Angular-specific response, but you might find it helpful to view this codepen below from the GSAP Draggable Collection. Although using Flip might be possible, I wouldn't say it's the best way to handle your issue. You're talking about dragging and re-organising elements, and so I reckon Draggable is probably a good place to start looking for that sort of solution. https://codepen.io/shunyadezain/pen/qBzJzQg

Hello Guys, i wanna recreate this section from the Moxion Power website. Has someone a clue how to build it, or maybe someone in in the forum already asked.

Hello, I've made an endless image slider based on the example from CodePen. It's working! The slider in the example is working continuous. Is it possible to modify it to slide one image, wait a certain time and then slide the next image? Thanks!

You probably need to use invalidateOnRefresh. And use functions to get values that might change on resize. tl1.to(layer, { y: (i, el) => -(el.offsetHeight * el.dataset.depth), ease: "none" }, 0)