Rodrigo

Hi, Sorry for the late response, this fell through the cracks 🙏 There are several issues in your setup. The first one is this: * { transition: all 0.5s ease; } This is a big NO-NO in web development and also when using GSAP. This tells the browser that every element in the DOM has a transition for every property that gets updated. That is going to create problems one way or the other, even if you don't use GSAP. I strongly recommend you against doing that. Then you have some GSAP instances that are creating some animations while at the same time you are changing the same properties of some elements on hover with the CSS. This for example: &:hover { .hoverCard__body { transform: translateY(-75px); .hoverCard__showOnHover { opacity: 1; visibility: visible; display: block; height: auto; transform: translateY(75px); } } } You are changing the height of the element to auto while using GSAP to animate the height of the same element, while having the rule that gives every element in the DOM a transition for every property. Unfortunately we can't debug complex and tangled-up examples like this, we just don't have the time resources for that. I cleaned up your code, removed some CSS that IMO is unnecessary and came up with this: https://codepen.io/GreenSock/pen/gOBoQxM I'm not sure if this is what you're after or not, but as I mentioned I'm having a hard time following what you're trying to achieve here. If this doesn't help, please be as specific as you can about how the animation should work, describe it in simple words and if possible provide a link to an site where this works in the way you intend. Hopefully this helps. Happy Tweening!

Hi @fantaz and welcome to the GreenSock forums! The link you're providing is to this thread so that takes us on an infinite loop! I recommend you to fork one of our starter templates in Stackblitz in order to reproduce your issue: https://stackblitz.com/edit/nextjs-5cm4qn Also this could be related to proper cleanup. You should take a look at GSAP Context: https://greensock.com/docs/v3/GSAP/gsap.context() Also take a look at the resources in this page: Hopefully this helps. Happy Tweening!

Hi @selfspirit and welcome to the GreenSock forums! Yeah, it seems that the calculations are getting a bit off in this case. On top of that animating position properties like margin, top/left, etc., is not very performant. One alternative is to use transform values like X. Another is to use the Flip Plugin: https://codepen.io/GreenSock/pen/NWOXENd Hopefully this helps. Happy Tweening!

Hi @Tom_S and welcome to the GreenSock forums! This most likely has to do with the fact that you're not properly cleaning up when a specific route gets unmounted. Normally you should use the onMount hook by Svelte and in the return function at the end cleanup your GSAP Context: onMount(() => { const ctx = gsap.context((self) => { }, scopeEl); // <- Scope! return () => ctx.revert(); // <- Cleanup! }); Unfortunately I'm not very familiar with Svelte so I can't tell you much based on the code you posted. That seems like a function that is being used somewhere else in your app, but I couldn't tell. If you keep having issues, please create a minimal demo by forking this starter template we have on Stackblitz: https://stackblitz.com/edit/sveltejs-kit-template-default-unljf6?file=src%2Froutes%2F%2Bpage.svelte Hopefully this helps. Happy Tweening!

Hi, I understand, but that is what actually causing the issues in your case. First always use markers when developing or debugging, if you do you would've seen the problem you have before posting the thread here in the forums: In the image you can see that the start point of the second instance is before the end point of the first instance, which will pin an element that is already pinned. That's causing all the problems here. This is the best I can come up with right now: https://codepen.io/GreenSock/pen/LYgeNeJ Unfortunately we don't have the time resources to provide custom solutions to all our users. Maybe there is better and/or simpler way to do this, but hopefully is enough to help with your project. Happy Tweening!

Hi, SVG is not something I have a lot of experience with, but my guess is that you're looking for SVG Origin: svgOrigin [Only for SVG elements] Works exactly like transformOrigin but it uses the SVG’s global coordinate space instead of the element’s local coordinate space. This can be very useful if, for example, you want to make a bunch of SVG elements rotate around a common point. You can either define an svgOrigin or a transformOrigin, not both (for obvious reasons). So you can do gsap.to(svgElement, {duration: 1, rotation: 270, svgOrigin: "250 100"}) if you’d like to rotate svgElement as though its origin is at x: 250, y: 100 in the SVG canvas’s global coordinates. Units are not required. It also records the value in a data-svg-origin attribute so that it can be parsed back in. svgOrigin doesn’t accommodate percentage-based values. You can read more about it in the CSS Plugin docs (scroll about the middle of the page) https://greensock.com/docs/v3/GSAP/CorePlugins/CSSPlugin Hopefully this helps. Happy Tweening!

Hi, The approach you're following is quite odd IMHO. I don't see the need for this: React.useEffect(() => { preloadImages(); renderCanvas(); window.addEventListener('scroll', handleScroll); return () => window.removeEventListener('scroll', handleScroll); }, []); If you have ScrollTrigger in the mix, it just doesn't make sense to listen for the scroll event. If you want to do stuff based on the scroll event, then you could use the Observer Plugin (also available in ScrollTrigger as ScrollTrigger.observe()) https://greensock.com/docs/v3/Plugins/Observer https://greensock.com/docs/v3/Plugins/ScrollTrigger/static.observe() Also this looks odd as well: React.useEffect(() => { if (!canvasRef.current || images.length < 1) { return; } const img = new Image(100, 100); const context = canvasRef.current.getContext('2d'); let requestId; const render = () => { img.onload = function () { context.drawImage(images[frameIndex], 0, 0); }; requestId = requestAnimationFrame(render); }; render(); return () => cancelAnimationFrame(requestId); }, [frameIndex, images]); Finally you have this for getting the images: function getCurrentFrame(index) { return `assets/frames/process_0${index.toString().padStart(4, '0')}.jpg`; } But there is no assets folder in your example, so there are no images to work with. I strongly recommend you to try to learn more about react and study Blake's codepen in order to try to emulate it as it is right now on React, before start creating and adding your own sequence of images. Unfortunately we don't have the time resources to build that for you right now, but it shouldn't be too complicated. You should forget about ScrollTrigger and just get the sequence working first, then add ScrollTrigger to the mix. Happy Tweening!

Hi @Nikhil17 and welcome to the GreenSock forums! Normally we don't provide custom solutions based on requirements list from our users. In your case this was quite simple (simple enough that you should've been able to solve it by investigating a bit ) https://codepen.io/GreenSock/pen/zYmpmGN As I mentioned above we normally don't provide custom solutions so please don't make a habit of posting a list of requirements in order to get a working solution. Also always include a minimal demo in codepen or other sandbox service (like Stackblitz) that shows what you already have. Hopefully this helps. Happy Tweening!

Hi, Your content is shifting because of the justify-content property you're giving to your flex element: .header { display: flex; flex-direction: column; justify-content: space-between; /* <- THIS ONE */ min-height: 100vh; padding-top: 7.5em; height: 100%; background: #ffab91; } Also the delay comes from here: Flip.from(state, { absolute: true, // uses position: absolute during the flip to work around flexbox challenges duration: 0.5, stagger: 0.1, ease: "power1.inOut", delay:3 // <- Delay here!! // you can use any other tweening properties here too, like onComplete, onUpdate, delay, etc. }); Maybe you're looking for something like this: https://codepen.io/GreenSock/pen/gOBoKzN Hopefully this helps. Happy Twening!

Hi, In order to expand one row at a time you need to wrap your cards accordingly in your HTML or use some logic in order to shift the start position of each card. Something like this: const cards = gsap.utils.toArray(".card"); cards.forEach((card, i) => { gsap.fromTo( card, { height: "20px" }, { height: "300px", scrollTrigger: { trigger: card, start: (self) => "top+=" + (window.innerHeight * Math.floor(i / 2)) + " top", end: "+=100%", scrub: true, ease: "elastic", } } ); }); Here is a working example of that: https://codepen.io/GreenSock/pen/oNapywy As for expanding from the bottom, that requires a bit more work in the setup. Maybe use flex to move everything to the bottom so it looks like the cards are expanding from the bottom. Unfortunately we have limited time resources in these free forums and we can't provide fully working solutions for every user's request. Hopefully this is enough to get you in the right direction. Happy Tweening!

Hi, Sure thing, with Draggable you can use the hitTest and update methods in order to update the bounds of specific elements. You'll have to write the collision logic on your own though in order to move other elements as you drag another. Is worth noticing that Draggable does not work on canvas elements due to the nature of how canvas works, so if you want to use canvas you can definitely use GSAP for the animations, but collision detection, collision logic and physics and other stuff will require a different library. Unfortunately I know nothing on this subject so I can't help you or point you in any direction. There is a good chance though that @OSUblake has something that does something like this so you could comb through his codepen examples and see if there is anything or make a google search and see what comes up. Good luck with your project! Happy Tweening!

Hi @Cas van Grunsven and welcome to the GreenSock forums! First, thanks for being a Club GreenSock member and supporting GreenSock! It's great to hear that you were able to solve your issue. Just in case I forked your codepen (thanks for creating a minimal and simple demo, we love those around here 🥳) https://codepen.io/GreenSock/pen/JjmMLqo Hopefully this helps. Let us know if you have any other question. Happy Tweening!

Hi, I'm still not sure if I follow you correctly on this one, but I think you're overcomplicating things quite a bit IMHO. I think this works the way you intend and is far simpler using the position parameter: https://codepen.io/GreenSock/pen/eYPyMrQ Hopefully this helps. Happy Tweening!

Hi @Xenex122, It's really hard for us to debug without a minimal demo. On top of that as far as I can tell the d attribute is not something that the Attribute Plugin can parse and tween that easily. Complex strings are not that simple to tween, also that's what the MorphSVG Plugin is for: Finally since you're using React I strongly recommend you to use GSAP Context, since you're not doing proper cleanup in your effect hook: https://greensock.com/docs/v3/GSAP/gsap.context() Have a look at the resources in this page as well: Hopefully this helps. Happy Tweening!

Hey Graham! Have you tried running ScrollTrigger.refresh() after everything is ready? Another option is to force the initial position of the biker at startup. You can check the examples in this thread: Hopefully this helps. Happy Tweening!

Hi, The issue here seems to be related to the starting position of the element. If you remove all the GSAP part of your JS code you'll get this: What you have to do is set the initial position of your camera according to that and then set your Motion Path so it ends in the position you want. I'd recommend you to set a regular animation from the start point to the end point, something like this: https://codepen.io/GreenSock/pen/LYgeZvG Based on that, the path you pass to the Motion Path Plugin should start in -190, -140 and end in 110, 19 so the camera ends in the position you seem to want. Unfortunately I don't have a lot of time now to dig into the example and create a path that emulates the motion you want, but hopefully the codepen and the values are a good starting point for your project. Let us know if you have more questions. Happy Tweening!

Hi @Bus1n and welcome to the GreenSock forums! First thanks for being a Club GreenSock member and supporting GreenSock! If you answer "yes" to any of the following, you'd need the special commercial license that comes with "Business Green" Club GreenSock memberships: Does your GSAP-enhanced website/game/product require the user to pay a fee to use? (like netflix.com) Are you selling a GSAP-enhanced product to multiple end users? (like a website template, theme or game) Are you using GSAP in a game/app with optional paid features/upgrades? If your website sells products that aren't GSAP-enhanced like clothing, widgets, food, etc., that doesn't require the commercial license. It only matters if the thing for which a fee is collected uses GSAP in some way. The standard "no charge" license even covers usage in projects where only a one-time development fee is charged, like an agency that's paid to build a fancy web site that's free for everyone to use. We like to think that a Club membership pays for itself very quickly when you consider all the time it’ll save, the added capabilities that the bonus plugins deliver...and of course that sense of having animation superpowers is priceless 🙂 Club memberships support all the ongoing development here as well, so it can be a smart way for you to help ensure that the tools continue to get nurtured in the years ahead just like they have been for the past 15+ years. Let us know if we can help with anything else. We look forward to seeing you on the membership roster soon. Hopefully this helps. If you have any other question regarding this subject let us know. Happy Tweening!

Hi, I'm not sure I follow what you're trying to do, but right now in your codepen example you have a relative value: shapeTL.to( shape_2, { left: `-=${shape1Width}`, bottom: "0" }, "+=1" // offset ); That is subtracting 185 pixels (the width of shape 1) from the current left position shape 2 has. If you want the element to have a left position of 185 pixels, use an absolute value: shapeTL.to( shape_2, { left: `${shape1Width}`, bottom: "0" }, "+=1" // offset ); Hopefully this helps. Happy Tweening!

Hi @damsodemso and welcome to the GreenSock forums! First thanks for being a Club GreenSock member! The main problem is the duration you have on the onLeave callback is longer than the delay you have in the onEnter callback: onEnter: (elements) => { const layers = elements.map((el) => el.querySelector(".layer")); return gsap.fromTo( layers, { scaleY: 1, transformOrigin: "center bottom" }, { scaleY: 0, duration: 1, delay: 0.5 } ); }, onLeave: (elements) => { const layers = elements.map((el) => el.querySelector(".layer")); return gsap.fromTo( layers, { scaleY: 0, transformOrigin: "center top" }, { scaleY: 1, duration: 1 } ); } You have to set both to 1 second: https://codepen.io/GreenSock/pen/poxpbaK Hopefully this helps. Happy Tweening!

Hi @Marcus Ayers and welcome to the GreenSock forums! Is really hard for us to debug issues without a minimal demo. There are two things I can see from the snippet you posted. You're not using GSAP Context: https://greensock.com/docs/v3/GSAP/gsap.context() The other thing is that this could be a Flash of Unstyled Content (FOUC) issue as mentioned here: Finally I recommend you to take a look at the resources listed in this page: You can create a minimal demo by forking one of the starter templates in this collection: https://stackblitz.com/@GreenSockLearning/collections/gsap-react-starters Hopefully this helps. Happy Tweening!

Hi, I'm not completely sure about all the internals that goes into this, but the thing is that GSAP is somehow detecting that getTl1 is a function and even you're just passing a reference to that function: gsap.timeline() .add(getTl1) It gets executed and the timeline created in the function runs, but the GSAP instance is not added to the timeline's playhead, so if you inspect that timeline you'll see that it's duration is zero, that's why the console is called immediately. While if you inspect the timeline where the function is executed: gsap.timeline() .add(getTl1()) You'll see that the duration of that timeline is 5 seconds, the duration of the instance created by the getTl1 method. In this case the console gets called once the animation is completed. As I mentioned I don't know all the ins and outs, but that is the way it's working soto speak. Hopefully this helps. Happy Tweening!

Hi, The problem here seems to be the element you're pinning more than anything else. I would recommend you to pin the farthest possible parent in order to avoid layout issues. Pinning is a tricky situation and when the element is pinned it creates some padding in order to accommodate the pin space required. I forked your codepen and pinned the columnar elements instead of the element you were pinning: https://codepen.io/GreenSock/pen/LYgeNeJ Hopefully this helps. Happy Tweening!

Hi, ScrollSmoother doesn't work properly with position fixed as stated in the docs: Caveats position: fixed should be outside the wrapper - since the content has a CSS transform applied, browsers create a new containing block and that means position: fixed elements will be fixed to the content rather than the viewport. That's not a bug - it's just how CSS/browsers work. You can use ScrollTrigger pinning instead or you could put any position: fixed elements OUTSIDE the wrapper/content. I forked your example and I used ScrollSmoother with ScrollTrigger and pinning instead of using the add/remove class methods you were using in your original setup: https://codepen.io/GreenSock/pen/abRENNL I removed some of the templating stuff you had in there. Hopefully this helps. Happy Tweening!

Hi, I've been looking at your codepen example and I can't figure exactly what is not working and how. I see all the text elements transitioning. Please isolate your example to show just those elements and remove everything else. Same in your javascript code, just keep the code you need for those particular elements to animate. Happy Tweening!

Hi @4mander and welcome to the GreenSock forums! I tested both links on Ubuntu 20 & 22 on the latest Chrome and Firefox and I can't see the issue you're mentioning. I cleared the cache and I never see the issue. What you could do is preload the images and create the ScrollTrigger instance once the image has loaded. Another option could be that you're lazy loading the images thus creating a problem with the calculations ScrollTrigger makes. Unfortunately is really hard for us to debug a live site and since this doesn't happens on your codepen, it could mean that something else in your setup is causing this behaviour. Sorry I can't be of more assistance. Happy Tweening!