Rodrigo

Hi, Why are you attaching an event handler like this in React? ref?.current?.addEventListener('click', contextSafeClick); That is most definitely not the way to do this, use onClick on the element and use contextSafe to wrap that event handler outside the scope of the useGSAP hook, like this: const { contextSafe } = useGSAP(() => {}); const clickHandler = contextSafe(() => { gsap.timeline(); // ... }) as React.MouseEventHandler; Then in your JSX <div {...props} className={classes} ref={ref} onClick={clickHandler}> <div className="line w-full h-[2px] bg-slate-400"></div> <div className="line w-full h-[2px] bg-slate-400"></div> <div className="line w-full h-[2px] bg-slate-400"></div> <div className="line-wrapper absolute top-0 left-0 flex items-center h-full w-full"> <div className="line hidden w-full h-[2px] bg-slate-400"></div> </div> </div> Using your current approach the event handler is being added twice as well since you have to remove the event handler manually, that is why is better to use the attributes React offers to do this: https://react.dev/learn/responding-to-events https://react.dev/reference/react-dom/components/common#react-event-object Hopefully this helps. Happy Tweening!

Hi, I'm afraid that even using vector-effect as an attribute still causes the same problem, here is a fork of the last demo without it: https://codepen.io/GreenSock/pen/VwNGXZL Beyond that and dynamically adjust the path on screen resize (as suggested in the thread @PointC linked) I don't know what else can be done TBH. Sorry I can't be of more assitance. Happy Tweening!

Hi, Everything looks OK to me, the only thing you might want to check is the type definition you're using for contexSafe in this case: const handleMouseMove = contextSafe((e: React.MouseEvent) => { const rect = buttonRef.current.getBoundingClientRect(); const { top, left } = rect; xTo.current(e.clientX - left); yTo.current(e.clientY - top); }); This thread and the link in it can help you if you run into any issues when typescript is compiling: Happy Tweening!

This is about type casting as explained in this thread Hopefully this helps Happy Tweening!,

Hi, Is better in this cases to just clear the inline styles before creating the Flip animation and store everything in a GSAP Context instance in order to easily revert everything: https://gsap.com/docs/v3/GSAP/gsap.context() Here is a fork of your demo that actually uses Flip.from() instead of to(), also is a good idea to not add ScrollTrigger configuration to a Flip instance but rather to store the Flip animation in a constant and then use that in a ScrollTrigger config, because of the way Flip instances work internally: https://codepen.io/GreenSock/pen/vYMzKZx Hopefully this helps. Happy Tweening!

Hi, Yeah that sounds like a more convoluted thing to do and a bit beyond the scope of these free forums. Unfortunately we don't have the time resources to create custom complex solutions for our users, sorry. We do offer paid consulting services and you can post in the Jobs & Freelance forums to get help there. The one advice I can give you is to forget about React and ScrollTrigger right now, the reason? Super simple you just want to animate some elements horizontally, nothing more. Sure the animation and HTML/CSS setup is the complex part here but both React and ScrollTrigger will be adding an extra layer of complexity to this that you don't have to focus on at this point. Try to move the elements to the left, maybe give the panels a position relative and the cards position absolute, and then as the panels move to the left move those elements to the right using the container animation feature: https://gsap.com/blog/3-8/#containerAnimation Also you can translate the cards to the right using just regular animations as part of the same timeline as well. As you can see there are options but what you're trying to achieve is not the simplest thing. Not the most complex one but definitely not simple. This is more about taking it one step at a time and build from there. If in that process you have some GSAP related questions, don't hesitate to post either in this thread or create a new one if you prefer. Happy Tweening!

Hi, You shouldn't have to worry about scoping with contextSafe because the scope being used for the selectors you passed in the useGSAP hook is the same. Take this for example: const { contextSafe } = useGSAP(() => {}, { scope: container // React ref }); So we're passing a scope that is actually a ref. Then in a specific method you do this: const myHandler = contextSafe(() => { gsap.to(".box", { x: 200, duration: 1, stagger: 0.1, }); }); That will basically target all the elements with the class box inside the scope you passed in the useGSAP hook, so it would be like this: gsap.to(container.current.querySelectorAll(".box"), { ... }); Finally you're right about contextSafe and recording GSAP instances for cleaning up. Under the hood what the useGSAP hook is doing is creating a GSAP Context instance, so contextSafe adds the GSAP Tweens/Timelines and other instances to that particular GSAP Context instance, so that's why it uses the same scope and everything gets reverted when the component is unmounted. Hopefully this clear things up. Happy Tweening!

Hi, I'm far from being an expert in CSS grid but I believe the problem here stems from the fact that the gap between the elements, given by the margin bottom property they have, just triggers the mouse leave event. What you could do is add an extra element and give that element some padding bottom instead of the margin bottom and add the colored elements inside this parent. With that you can trigger the mouse enter/leave events in that parent. Is worth noticing that even with this approach the mouse leave element will trigger before the mouse enter one on the next element as you can see in this fork: https://codepen.io/GreenSock/pen/oNOPxdr Unfortunately I don't have time right now to create a fully working solution for you, especially since this is mostly a JS logic issue and not really a GSAP related one and we aim to keep these free forums focused on GSAP related issues. There are definitely other options, for example my approach would be to show/hide the base video with the letters by triggering the mouse enter/leave events on each column and not each block and use the blocks to show/hide the corresponding videos for each one. IMHO that is the simplest approach here. Hopefully this helps. Happy Tweening!

Hi @lrc and welcome to the GSAP Forums! The first thing I notice is that you have toggleActions and scrub on every ScrollTrigger instance. Those are not compatible at all since they do completely different things at it's core. Scrub will update the tween/timeline's progress based on the scroll position, so is a gradual update. On the other hand toggleActions will do something on each event (for lack of a better word) on the start and end points, as mentioned in the ScrollTrigger docs: 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". Also is super weird that you have this: toggleActions: 'play play play play', That will basically play the instance in all those situations. Also it seems that you're misunderstanding how snap works and the fact that you're creating a single ScrollTrigger instance for each element. This should be as simple as creating a single ScrollTrigger instance that just snaps the scroll position of the scroller, something like this: https://codepen.io/GreenSock/pen/jORvqaL I made some changes in the HTML and CSS since I don't think your current setup will work since it doesn't create the needed scrolling to move the list. Hopefully this helps. Happy Tweening!

Sorry but is not clear at all what is wrong/off here, since you haven't specified what is not working after a screen resize. Unfortunately vague descriptions like not working, is broken, wrong, off, etc. Don't tell us exactly what to look at. Happy Tweening!

Hi @Studio Soaked and welcome to the GSAP Forums! Yes, you can use the bonus tools in as many projects for as many clients as you want. Is important to note that after your club membership expires nothing will break, your sites will keep working since we don't inject phone home scripts in the files, as Jack mentioned above. You just won't have access to any updates on the bonus tools, that's all. If you have further questions on this subject let us know. Happy Tweening!

Hi, If I understand you correctly you can use the invalidateOnRefresh config option ScrollTrigger has. From the ScrollTrigger docs: invalidateOnRefresh Boolean - If true, the animation associated with the ScrollTrigger will have its invalidate() method called whenever a refresh() occurs (typically on resize). This flushes out any internally-recorded starting values. You have that in your latest code snippet but not in your demo 🤷‍♂️ Finally I'd try to have everything at a large size at the start and then use a from instance that takes the element from a smaller scale to the natural scale/size Hopefully this helps. Happy Tweening!

Hi @Vilas and welcome to the GSAP Forums! You're using the invalidate method AFTER restarting the timeline, it has to be BEFORE: const runAnimation = (currentColorName) => { currentColor = currentColorName; tl.invalidate(); tl.restart(); }; Another option is to use the call method: https://gsap.com/docs/v3/GSAP/Timeline/call() const tweenFill = () => { gsap.to(circles, { stagger: { each: 0.05 }, ease: "none", fill: function () { return `#${currentColor}`; } }); }; tl.call(tweenFill); tl.to( circles, { stagger: { each: 0.05, repeat: 1, yoyo: true }, scale: 1.05, ease: "sine.inOut", transformOrigin: "center center" }, "<" ); Here is a fork of your codepen: https://codepen.io/GreenSock/pen/bGJxEJd Hopefully this helps Happy Tweening!

Kind of, this is not a CSS limitation is a logic limitation. If you go to the gas station and tell one of the people there to fill your tank to half, then you change your mind and tell a different person, fill it up to 3/4, the second person will fill it to half, stop give you the invoice and then fill the remaining 1/4 of it? Most likely will fill it to 3/4 in one go and give you that invoice. Is not a problem, issue, limitation or any other term you want to use, is a matter of instructions that's all. Is not something related to GSAP, JS, CSS, HTML, etc. is just logic, order to instructions and optimizing their execution. Same as my explanation above. You could create something like that, but you'd have to make every plugin and every instance aware of other instances and create the code to accommodate that which end up being super expensive in terms of KB and performance. GSAP is all about giving you the best performance in the market with the lowest possible KB size for that performance, plus all the capabilities it has. There are some libraries that are smaller KB wise but don't have all the features GSAP has and performance wise GSAP is at the top of the list. Again you're telling two different GSAP instances (one using the Flip plugin and another using MotionPath) to animate the same properties on the same element at the same time, you'll have that issue regardless of the tool you use. One of the many optimizations GSAP has under the hood is that it records the initial and final values at startup, so after that it just iterates between those in order to give you better performance, again making every GSAP instance and plugin aware of the ones created before would be costly. Sure if you have three or four is not a lot, but there are sequences out there that have hundreds of tweens, what happens then? See where I'm going with this? Hopefully this clear things up. Happy Tweening!

Hi, Without a minimal demo is hard for us to see what could be the issue, but based on your first demo, this seems more related to your SVG rather than something else. Keep in mind that even if your SVG tag is resized to use the entire height and width of it's parent, the content of the SVG has it's own coordinates system based on the viewbox attribute and the path you have in it. If I was you I'd start backwards, get the SVG scaled up working in different scree sizes and then add GSAP and ScrollTrigger to the mix. Happy Tweening!

Hi, This is not a GSAP related issue but something else related with your path. IDK if the preserve ratio setting has something to do or not TBH. I made this quick screen recording and you can see that the DrawSVG Plugin is doing it's work https://i.imgur.com/Sd8Wz4R.mp4 As I mentioned this seems more related to your path rather than a GSAP specific issue. I'd look into that first and try to isolate just that path and take it from there. Happy Tweening!

Hi, As mentioned before without a minimal demo is hard for us to get a clear idea of what you're trying to do and what exactly could be the issue you're facing. Maybe this demo can provide a good starting point: https://codepen.io/GreenSock/pen/xxepaeV As GSAP Helper mentioned is not that they can't coexist is just a fundamental concept of how animations work, that's all. Is just logically impossible to have two different instances animating the same property(properties), of the same element at the same time. Is not a limitation of GSAP, if you try this with CSS animations you'll see the same behaviour, if you add two different classes to an element, that both update the same properties with different values the animation will only reflect the value of the last class that was added to the element, is just a fight for control and normally is the last one that is created, takes precedence, nothing more. Hopefully this clear things up. Happy Tweening!

Hi, In this thread @akapowl and @nico fonseca go into a lot of detail on how to create that type of effect and provide some good resources as well: Hopefully this helps. Happy Tweening!

Hi @nyldev, You already created a thread here: There is no need to create or post in multiple threads in order to get an answer, we try to answer every to every post in less than 24 hours. I already answered in that thread so let's keep our focus in that one so it makes it easier for everyone to track this. Happy Tweening!

Hi, Horizontal pinning is not supported for logic reasons, keep in mind that you are using native vertical scrolling to move elements horizontally while pinning the parent, nothing more. Pinning horizontally would require a lot of custom logic and even in that case I'm not 100% sure that is possible. The key here is the horizontal movement of the elements, what you can do is emulate pinning by stopping that movement for some time like in this demo: https://codepen.io/GreenSock/pen/NWzgrQQ You can check this thread for more information and details: Finally I see that you're using React but you're not doing cleanup in your effect hook. Proper cleanup is very important with frameworks, but especially with React. React 18 runs in strict mode locally by default which causes your useEffect() and useLayoutEffect() to get called TWICE. Since GSAP 3.12, we have the useGSAP() hook (the NPM package is here) that simplifies creating and cleaning up animations in React (including Next, Remix, etc). It's a drop-in replacement for useEffect()/useLayoutEffect(). All the GSAP-related objects (animations, ScrollTriggers, etc.) created while the function executes get collected and then reverted when the hook gets torn down. Here is how it works: const container = useRef(); // the root level element of your component (for scoping selector text which is optional) useGSAP(() => { // gsap code here... }, { dependencies: [endX], scope: container }); // config object offers maximum flexibility Or if you prefer, you can use the same method signature as useEffect(): useGSAP(() => { // gsap code here... }, [endX]); // simple dependency Array setup like useEffect() This pattern follows React's best practices. We strongly recommend reading the React guide we've put together at https://gsap.com/resources/React/ Hopefully this helps. Happy Tweening!

Hi @Caine and welcome to the GSAP Forums! Nothing wrong with the DrawSVG Plugin here actually. The issue, for lack of a better word, is that you're using the default easing function which is power1.out, that means the animation starts faster and then slows down at the end, you can check how easing functions work on our ease visualizer: https://gsap.com/docs/v3/Eases The other problem you're encountering is that even with a linear ease is that your path is not completely vertical and lineal, it has curves and a part that is horizontal, so what you need is to adapt the easing function to the shape of your path. Jack created a Path ease function that takes care of that, I forked your demo only with the green path to show you how easy it is: https://codepen.io/GreenSock/pen/abxaoma Is worth mentioning that in order to make the helper function work, you have to include the MotionPath Plugin as well. Hopefully this helps. Happy Tweening!

Hi @Dumbldrr and welcome to the GSAP Forums! I believe your first demo is working the way you want right? Anyways I made some adjustments to your demo in order to use the data attributes and a common selector for the sections that trigger the animation and came up with this: https://codepen.io/GreenSock/pen/eYojqEB Hopefully this helps. Happy Tweening!

Hi @AlbertaElder and welcome to the GSAP Forums! Is worth noticing that this thread is in the Jobs & Freelance forum. The OP needs someone to create that effect on a paid basis, he's not asking for a demo or guidance on the subject. If you want to offer your services, I'd suggest you to send a DM to the user that created this thread. If you're looking to resolve some issue or you have any GSAP question, you can search or post in our main forum: https://gsap.com/community/forums/forum/11-gsap Happy Tweening!

Hi, Maybe this demo can help: https://codepen.io/GreenSock/pen/eYPwZZb The point of GSAP Helper's post is to indicate that this requires some custom logic and that is beyond the help we provide in these free forums. Unfortunately we don't have the time resources to provide free general consulting and creating custom complex solutions for our users. You can also extract some logic from this demo as well: https://codepen.io/GreenSock/pen/MWXPgKm Hopefully the demos get you in the right direction. Happy Tweening!

Hi, You can nest your loops and create some custom logic to know if there are child instances opened and if the last child instance should reverse the parent one, something like this: https://codepen.io/GreenSock/pen/OJGwLzp I didn't had the time to go through everything in your setup so I came up with a simpler approach, but the logic is basically there and it should be re-usable without major issues. Hopefully this helps. Happy Tweening!