Leaderboard

Indeed without a minimal demo seeing the code in action it is hard to help you debug. That said have you seen my post on how to animate all types of different clip masks? Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/jOdJGQq

Yeah that is an easy fix, check out the video below if you need any help

GSAP is highly optimised and will get it's initial values on page load, but because you tween the same element twice they both get the same starting position and because you want the second (ScrollTrigger) animation to wait for the first one to end you have to tell it to that tween some how. Luckily GSAP has you covered with immediateRender: false, if you put that on the second tween everything works as expected. Hope it helps and happy tweening! https://stackblitz.com/edit/stackblitz-starters-cgdvlq?file=components%2FBanner.tsx

Welcome to the forum. I'd probably use a yoyo and repeat:1 for the opacity in/out. Also making sure the ease is set to none as this is a scrub:true situation. https://codepen.io/PointC/pen/dyLwoej Hopefully that helps. Happy tweening and welcome aboard.

Yep, same issue - you're creating things out of order, thus they refresh in the wrong order. For example, let's say elementA is 100px from the top of the screen, and there's a ScrollTrigger that triggers when that hits the top of the screen ("top top"). So normally, the start would be 100. But what if there's another ScrollTrigger that pins an element above that one for 1000px - that'd push everything down, thus that element should trigger at 1100px instead of 100px. If ScrollTrigger calculates them in the wrong order, it'd set the first one to a start of 100px (because the pinning one hasn't been factored in yet). Here's a helper function that you can call after all of your elements are in place, and it'll order things based on their proximity to the top of the viewport: function verticalSort() { let scroll = window.pageYOffset; ScrollTrigger.getAll().forEach(t => t._sortY = t.trigger ? scroll + t.trigger.getBoundingClientRect().top : t.start + window.innerHeight); ScrollTrigger.sort((a, b) => a._sortY - b._sortY); } https://codepen.io/GreenSock/pen/ZEZPqyd?editors=0010 Better? Of course you could solve everything by explicitly stating the unique refreshPriority for each, but the above function seemed easier and it should work in most cases.

I'd also recommend using a unique class as @Rodrigo suggested. You can, however, make it work with the original HTML by using a child combinator to choose only the direct descendants of the header-icons class. gsap.to('.header-icons > div', { Happy tweening.

Hi @spotipre welcome to the forum! The angled black part you can do with a clip-path animation, see simple demo below https://codepen.io/mvaneijgen/pen/MWLxyPp And the weird image effect you can probably do with something like Pixi.js. Keep in mind that this question is kinda outside of the scope of these forums, we like to focus on GSAP specific questions, so if you still need help be sure to post a minimal demo focused on an issue with one of the GSAP tools. Hope it helps and happy tweening! https://pixijs.com

Are you sure you've updated your pen? It is always best to relink the pen or even fork, so that in the thread we can see the progress of the current version of that time. To me it seems like you've removed the functions from the parameters, this is importent, because it indicates to GSAP that is can recalculate the values, if you leave this out you tell GSAP get the value once and never update it! // From height: gsap.utils.random(10, 100, true), // Is already a function width: gsap.utils.random(0, 100) + "%", // not a fucntion // To height: () => gsap.utils.random(10, 100, true), // Better save and also convert it to a function width: () => gsap.utils.random(0, 100) + "%", // Convert to function Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/XWQOGpa?editors=0010

Oh yes, that's exactly what i was looking for ... wouldn't have guessed i could morphSVG from a class name to another class name. Best library ever! (I promise to learn to use codepen ... it's just firefox obfuscates referrers and these embeds cause all kind of warnings, so i'm somewhat reluctant, but that's my problem to solve.)

hi @alexr8 maybe these 2 demos help 1 with draggable and 1 without https://codepen.io/GreenSock/pen/BaQXjWw?editors=0010 https://codepen.io/GreenSock/pen/RwKwLWK

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

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

Hi, I think the main issue here is the fact that you're using the same element as the scroller (the document element). ScrollTrigger allows you to define a scroller which is the element where ScrollTrigger will look for the scroll position in order to update any Tween/Timeline you pass to it. From the ScrollTrigger docs: scroller String | Element - By default, the scroller is the viewport itself, but if you'd like to add a ScrollTrigger to a scrollable <div>, for example, just define that as the scroller. You can use selector text like "#elementID" or the element itself. https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object Here are a couple of demos that use a similar approach: https://codepen.io/GreenSock/pen/yLRQozy https://codepen.io/GreenSock/pen/OJBvBjB Hopefully this helps. Happy Tweening!

Although this didn't feel intuitive to me in this scenario, autoScroll did fix the issue. Thanks a lot!

Hi @Sikriti Dakua welcome to the forum! What is the part you're having trouble with? In your example you have different coloured sections which each there own text, but in the example you share all the text is all just stacked right on tof of each other. If that is what you want check out my card stacking tutorial of course swap out the cards for just text, but the logic should be the same. With CSS make all the text stack right on top of each other and then just animate them in and out one by one. Also keep in mind 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. Hope it helps and happy tweening, but if you still need help be sure to post back here with what you've tried!

We have several mouse follow effect threads. Here are a couple that should point you in the right direction. Happy tweening.

Mhh... Why are you using intersection observer for something that can be done with ScrollTrigger? I think you are overcomplicating this quite a bit. If I was you I'd create an extra prop for ScrollTrigger and if that prop has a ScrollTrigger configuration, you just need to check if is not falsy, instead of using just SplitText use ScrollTrigger to handle when the animation plays, something like this: https://codepen.io/GreenSock/pen/abxMRgp I updated the demo I posted before so it uses ScrollTrigger https://stackblitz.com/edit/nuxt-starter-vzsxyp?file=app.vue The only detail is that this check is not needed with ScrollTrigger: completed && tween.progress(1); Hopefully this helps. Happy Tweening!

Yes, like @Rodrigo said, you're creating your ScrollTriggers out-of-order. You're supposed to create them in the order they would be encountered (top to bottom). You're creating the top and bottom first, then the middle, so the refreshing order goes: 1, 3, 2 instead of 1, 2, 3. For relatively simple setups, it could be adequate to just call ScrollTrigger.sort() which will order them by whatever their "start" is calculated to be. But you can explicitly control the order of things by setting a refreshPriority on each one so you have total control of the order. https://codepen.io/GreenSock/pen/PogLyGO?editors=1010 And here's a verticalSort() helper function that'll sort them by their proximity to the very top of the viewport: https://codepen.io/GreenSock/pen/ExJMdXj?editors=0010

No problemo! Also in these forums there are no stupid questions 👍 That's just the Logical AND operator: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Logical_AND Basically it checks if timer is truthy, if it is it'll clear the timeout. By default the timer variable is undefined which will return falsy and the clearTimeout won't be executed, same with the completed boolean. I want to set the progress of the tween to 1 only if the tween has run completely. Hopefully this clear things up. Happy Tweening!

hello @mvaneijgen your are a super star, thank your help todayif we meet in the future, beers on me

Many Thanks, @mvaneijgen Though it is a little fast now I think I can manage to fix that myself Thank you very much for answering my doubts. Have a good day!

Unfortunately it's just not feasible to make ScrollToPlugin accommodate that automatically. There's no way it could understand which elements are affected by which ScrollTriggers. It's essential that you, as the builder of the page, provide that information. But here's a helper function you could try - it lets you create several lookups that get added together into one big lookup. Splitting them up like this allows you to segregate elements according to whether or not they're in a containerAnimation and/or pinnedContainer: function getScrollLookup(targets, {start, pinnedContainer, containerAnimation}) { targets = gsap.utils.toArray(targets); let initted, triggers = targets.map((el, i) => ScrollTrigger.create({ trigger: el, start: start || "top top", pinnedContainer: pinnedContainer, refreshPriority: -10, onRefresh(self) { if (initted && Math.abs(self.start) > 999999) { triggers[i].kill(); triggers[i] = ScrollTrigger.create({ trigger: el, start: start || "start start", pinnedContainer: pinnedContainer, refreshPriority: -10, }); } }, containerAnimation: containerAnimation })), st = containerAnimation && containerAnimation.scrollTrigger, lookups = [], lookup = target => { let t = gsap.utils.toArray(target)[0], i = targets.indexOf(t); if (i < 0) { for (i = 0; i < lookups.length; i++) { if (lookups[i].targets.indexOf(t) !== -1) { return lookups[i](t); } } return console.warn("target not found", target); } return triggers[i].vars.containerAnimation ? st.start + (triggers[i].start / containerAnimation.duration()) * (st.end - st.start) : triggers[i].start; }; lookup.targets = targets; lookup.add = (targets, config) => { lookups.push(getScrollLookup(targets, config)); return lookup; }; initted = true; return lookup; } So you'd use it like: let lookup = getScrollLookup("section.project", { containerAnimation: tween, pinnedContainer: el }); lookup.add("section.other", {}); // no containerAnimation or pinnedContainer lookup.add("section.pinned", {pinnedContainer: el}); // just a pinned container // then later... let position = lookup(".any-of-the-above-elements"); Hopefully that helps.

I use scrolltrigger and observer for an animation in my website, for mobile it created a problem of not pinning accurately so I used normalizescroll. It does work great but, when I scroll, it scrolls really fast. is there any solution for it?

Hello @Rodrigoyes I will try to do it I just have to take the time given the work I have at the moment thank you

Hi @stectix, Sorry to hear about the troubles. Based on your latest posts I assume that you're trying to deploy a Next app on Vercel using Yarn? Correct me if I'm wrong about this assumption. I created a new Next app using Yarn and successfully installed the bonus package. Here is the repo: https://github.com/rhernandog/next-gsap-bonus-yarn-vercel Here is the live preview on Vercel (you can inspect the console in devtools to check the version of a bonus plugin): https://next-gsap-bonus-yarn-vercel.vercel.app/ I installed using the shockingly package since the plugins are the same: yarn add gsap@npm:@gsap/shockingly Is important in this case to install the @gsap/react package before installing the bonus plugins to avoid any issues with Yarn/NPM asking for the token as well. Hopefully this helps. Happy Tweening!

Thanks I was stuck on doing it with gsap.from and this is simpler 😅 Sometimes you are so deep into something and you don't see that the solution is simpler

That seems a little more verbose than necessary: // LONG width: () => gsap.utils.random(0, 20, true)() + "%" // SHORTER width: () => gsap.utils.random(0, 20) + "%"

Does it? Honestly I can't think of a simpler way to achieve this. You can do it by hand but the calculations will become far more complex, I can tell you that. I you remove the ScrollTo Plugin from the equation, you'll have to find the height of the document element, to that you have to subtract the height of the screen and then use the same calculation in the Draggable instance to factor the current Y position of the element being dragged to the boundaries of the Draggable instance, translate that into a scroll position and finally use the scrollTo method to update the actual scroll position. If you ask me it's quite simpler to let GSAP and the ScrollTo Plugin to handle all the math of that for you. What exactly are you struggling with about this code? onDrag:function() { tnProgress = this.x / limit; logDiv.innerHTML = tnProgress.toFixed(4); t.progress(tnProgress); gsap.set(dragBar, {width:this.x + 10}); }, That's all there is to it. I see you updated your demo and you're using ScrollTrigger, you can definitely use the same approach to update the scroll position of a ScrollTrigger instance: https://gsap.com/docs/v3/Plugins/ScrollTrigger/scroll() But I still recommend you to use the ScrollTo Plugin and leverage everything with the native scroll, updating this with ScrollTrigger will involve even more calculations actually. Happy Tweening!

Thanks, If others may need I m currently using import gsap from "gsap"; export class LifecycleManager { public ctx: gsap.Context | null; private boundAfterSwapHandler: () => void; private boundPageLoadHandlers: Map<string, () => void>; constructor() { this.ctx = null; this.boundAfterSwapHandler = this.onChangePage.bind(this); this.boundPageLoadHandlers = new Map(); document.addEventListener("astro:after-swap", this.boundAfterSwapHandler); } /** * Initialize the context */ initializeContext(): void { if (this.ctx === null) { this.ctx = gsap.context(() => {}); } } /** * Check if the component with the given ID exist in the DOM * @param id id of the element * @returns boolean */ elementExists(id: string): boolean { if (!id) throw new Error("ID cannot be null"); return document.getElementById(id) !== null; } /** * Execute the callback when the page is loaded and the component is visible * @param id id of the element * @param callback callback function */ onElementLoaded(id: string, callback: (ctx: gsap.Context | null) => void): void { if (!this.boundPageLoadHandlers.has(id)) { const handler = () => this.onPageLoad(id, callback); this.boundPageLoadHandlers.set(id, handler); document.addEventListener("astro:page-load", handler); } } /** * Callback for the page load event * @param id id of the element * @param callback */ onPageLoad(id: string, callback: (ctx: gsap.Context | null) => void): void { if (this.elementExists(id)) { this.initializeContext(); callback(this.ctx); } } /** * Revert the context */ revertContext() { if (this.ctx !== null) { this.ctx.revert(); this.ctx = null; } } /** * When changing page revert the context * and remove the event listeners */ onChangePage(): void { this.revertContext(); } /** * Cleanup all event listeners */ cleanup(): void { this.revertContext(); document.removeEventListener("astro:after-swap", this.boundAfterSwapHandler); this.boundPageLoadHandlers.forEach((handler, id) => { document.removeEventListener("astro:page-load", handler); }); this.boundPageLoadHandlers.clear(); } } export default LifecycleManager; usage <script> import gsap from "gsap"; import { ScrollTrigger } from "gsap/ScrollTrigger"; import { SplitText } from "gsap/SplitText"; import { LifecycleManager } from "@/services"; gsap.registerPlugin(ScrollTrigger, SplitText); let manager = new LifecycleManager(); manager.executeWhenVisible("hero", () => { manager.ctx?.add(() => { 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", }); }); }); }); </script>

Example: CustomEase.create("in-out", "0.42,0,0.58,1") And then: gsap.to(".box", { ease: "in-out", ... });

Hi, In your original demo you had both toggleActions and scrub in your ScrollTrigger configuration. It has to be one or the other, but definitely not both, since they pretty much don't work together. From the ScrollTrigger docs: https://gsap.com/docs/v3/Plugins/ScrollTrigger/#config-object scrub Boolean | Number - Links the progress of the animation directly to the scrollbar so it acts like a scrubber. You can apply smoothing so that it takes a little time for the playhead to catch up with the scrollbar's position! It can be any of the following Boolean - scrub: true links the animation's progress directly to the ScrollTrigger's progress. Number - The amount of time (in seconds) that the playhead should take to "catch up", so scrub: 0.5 would cause the animation's playhead to take 0.5 seconds to catch up with the scrollbar's position. It's great for smoothing things out. toggleActions String - Determines how the linked animation is controlled at the 4 distinct toggle places - onEnter, onLeave, onEnterBack, and onLeaveBack, in that order. The default is play none none none. So toggleActions: "play pause resume reset" will play the animation when entering, pause it when leaving, resume it when entering again backwards, and reset (rewind back to the beginning) when scrolling all the way back past the beginning. You can use any of the following keywords for each action: "play", "pause", "resume", "reset", "restart", "complete", "reverse", and "none". I'd assume that Jack picked scrub over toggleActions, since your demo was scrubbing, but most definitely I can't read his mind! 😉 Hopefully this clear things up. Happy Twening!

Hi, Yeah this is not the easiest thing to achieve. Luckily @ceribbo was super kind to share a solution for a similar situation with the community in this thread: Hopefully it helps you and if it does, remember to thank @ceribbo for it. Happy Tweening!

Thanks @Toso i did actually explore those a little while back - but they both seemed intrinsically tied to scrolling which i want to avoid. All the calculations seemed to be based off of scroll amounts which i had a stab at unpicking but couldn't separate out the logic. The other thing that tripped me up was when I looked at their code i couldn't see where z-index was being set - it seems to be set once on each element to 100, but actually interacting with the demo the z-index sometimes gets set in increments and sometimes switches to auto. I think maybe its not noticeable as only the front 3 overlap in those demos.

Hi, Is great to hear that you were able to solve it! 🥳 The site looks amazing, really nice animations and story telling, excellent job 👏 Happy Tweening!

Yes this is what I was looking for!!! I never knew about the immediateRender: false! Just one question: you removed toggleActions, but As I scroll back it it moves in reverse, why? Thanks for solving my problem!

ah i see! i would have to create instance variables for each of the parts, and then retrieve their height values onMount. Ok i'll give that a go. Many thanks!

Hi @Sandeep Choudhary welcome to the forum! You just needed to scope the pin: ".right" element eg pin: galleryObj.querySelector(".right"), otherwise it would always gets the first .right element. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/ExJGMed?editors=0011

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

Thank you so much @PointC for your prompt and helpful response! Your suggestion to use yoyo makes perfect sense. I really appreciate your guidance and warm welcome to the forum. I'll be sure to implement your advice and continue exploring the exciting world of GSAP. Thanks again for your support! Best regards,

Hi, Sorry to hear about the issues but unfortunately if we can't see it on the demo there is not a lot we can do. That also means that there is something else in your setup that could be interfering with this. A lot of performance problems are down to how browsers and graphics rendering work. It's very difficult to troubleshoot blind and performance is a DEEP topic, but here are some tips: Try setting will-change: transform on the CSS of your moving elements. Make sure you're animating transforms (like x, y) instead of layout-affecting properties like top/left. Definitely avoid using CSS filters or things like blend modes. Those are crazy expensive for browsers to render. Be very careful about using loading="lazy" on images because it forces the browser to load, process, rasterize and render images WHILE you're scrolling which is not good for performance. Make sure you're not doing things on scroll that'd actually change/animate the size of the page itself (like animating the height property of an element in the document flow) Minimize the area of change. Imagine drawing a rectangle around the total area that pixels change on each tick - the bigger that rectangle, the harder it is on the browser to render. Again, this has nothing to do with GSAP - it's purely about graphics rendering in the browser. So be strategic about how you build your animations and try to keep the areas of change as small as you can. If you're animating individual parts of SVG graphics, that can be expensive for the browser to render. SVGs have to fabricate every pixel dynamically using math. If it's a static SVG that you're just moving around (the whole thing), that's fine - the browser can rasterize it and just shove those pixels around...but if the guts of an SVG is changing, that's a very different story. data-lag is a rather expensive effect, FYI. Of course we optimize it as much as possible but the very nature of it is highly dynamic and requires a certain amount of processing to handle correctly. I'd recommend strategically disabling certain effects/animations and then reload it on your laptop and just see what difference it makes (if any). Check if you have any CSS transitions to any of the elements you're animating with GSAP. Ultimately there's no silver bullet, like "enable this one property and magically make a super complex, graphics-heavy site run perfectly smoothly even on 8 year old phones" I hope this helps!

Happy to share my solution: https://codepen.io/ceribbo/pen/ZEZmqvL By editing the one found on this post:

You'll want to put all the tweens on a timeline and move the scrollTrigger to the timeline rather than the single tween. https://codepen.io/PointC/pen/gOyQWqY Hopefully that helps. Happy tweening.

Hi @Fullerfort, Right now you have a logic issue since you're running your code only for the first page: PAGES.forEach((page, index) => { set(page, { z: index === 0 ? 13 : -index * 1 }); if (index === 0){ to(page, { rotateY: `-=${180 - index / 2}`, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 2) * (window.innerHeight * 0.25), markers:true, }, }); to(page, { z: index === 0 ? -13 : index, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 1.5) * (window.innerHeight * 0.25), }, }); } else return false; }); That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO. If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN: https://developer.mozilla.org/en-US/docs/Web Happy Tweening!

This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷‍♂️ From what I can tell, the solution would be to use a shallowRef() instead of ref(): https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue Does that clear things up?

Welcome to the forum. If I understand you correctly, I think you'd want to tween the drawSVG path from 0% 10% → 90% 100%. That way you're always showing 10%. You could also add a tween at the beginning or end to make it appear/disappear too. Happy tweening and welcome aboard. https://codepen.io/PointC/pen/vYMQXWe

@gaggo I believe this problem is caused by the pnpm not handling package name aliases properly. Unfortunately this problem is a bug in pnpm at the moment. I'll try to find a workaround, will comment here if successful.

Thanks for the demo. In the future please add new information to new replies. Editing the first post repeatedly makes it difficult for us and others to follow the conversation. I don't know enough about swiper in react to help you with this, particularly how to reference the Swiper inside the onChange callback. However, this bare-bones example shows how to animate the active slide (change it's scale) and animate something inside it (rotate the number div) Hopefully you can find a way to apply something similar to your project https://codepen.io/snorkltv/pen/WNmzezX?editors=0011

run into similar issue using the app directory in NextJS 13. I'm using ScrollTrigger and ScrollSmoother plugin and managed to fix it by moving the gsap.registerPlugin(ScrollTrigger, ScrollSmoother) inside of useEffect/ useIsomorphicLayoutEffect hook. hope this helps

If I'm not mistaken @Dipscom has some experience with Svelte in production, chances are that He has used it with GSAP as well.

Hey @GeS I have been using Locomotive on a few projects and recently switched them all over to the GSAP Scroll Trigger plugin. Once I understood how it all worked the change over was fairly easy. I can achieve the same effect, and more, with so much more control. And it's all in the same comfy GSAP ecosystem This is a very basic (and ugly) test I put together to create the Locomotive smooth scrolling effect for an entire web page using the new Scroll Trigger plugin. https://codepen.io/andystent/pen/XWXbMLo You can then combine this with something like Jack shared above to get the horizontal scrolling panel. I'm going to be doing this on a new project starting next week. Can't wait! https://codepen.io/GreenSock/pen/1e42c7a73bfa409d2cf1e184e7a4248d Good luck!