Rodrigo

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!

Hi, I'm afraid I can't help you with this. Honestly I've never been n such position. My guess is that you could tell Vite to ignore certain packages in your build and still compile that, but type checking will be a pain point for sure. Maybe create some kind of custom configuration in your build system that first does the type checking and then runs a completely different command that creates the bundle ignoring GSAP. As you mention this sounds more like a question for the folks at Vite rather than these forums. Hopefully other users can chime in and help. Happy Tweening!

Hi, I think in theory this could be done but would require quite some bit of custom logic, which is beyond the scope of what we do in these free forums. One alternative would be to mix Observer and ScrollTrigger like in these demos: https://codepen.io/GreenSock/pen/ExEOeJQ https://codepen.io/GreenSock/pen/oNdNLxL Hopefully this helps. Happy Tweening!

Hi @1PM and welcome to the GSAP Forums! I think the problem here are the values you're passing and how they're calculated based on the dimensions they have. I've been looking for a bit at your demo and one of the things I think (emphasis on the I THINK part) is the fact that your SVG has a specific width in pixels based on the screen size and it's parent, but then you have the viewbox in your SVG which creates a whole new coordinates system that doesn't really matches the one outside of it. In that particular case a 100 pixels motion in the DOM is not the same as inside of the SVG. For example I'm looking at this in a 1920x1084 pixels screen so moving something 192 pixels on the X axis is 10% of the screen, right? But your SVG has a viewbox of 9000 units width, 192 units in that frame is only 2.1333% of that, see the problem? On top of that you have to figure a way to move each element (right now you're moving each group of kids individually) a specific amount of units inside the SVG so they become visible in a specific window size (that's why you have different end positions in different screen widths). I think you should start by completely removing ScrollTrigger from this and focus just on getting the animations to work as expected, nothing more. Once the animations do what you want (I strongly recommend you to have everything in a single GSAP Timeline) you can plug in ScrollTrigger back into this. Also I'd recommend you to group all the kids playing in one layer and move that, same with the trees and rocks, it would be far easier to move this elements if they reside in a single group rather than move them one by one. There are a lot of moving parts in this and a lot of things that need to be taking into consideration and that's beyond the scope of what we can do for our users in these free forums. Unfortunately we don't have the time resources to start fiddling with your demo and get it working. Maybe there is a simple way to do this that is eluding me, but SVG is not something I particularly excel at. As I mentioned I'd take it one step at a time and one layer at a time with just a single animation for each layer/group inside a timeline, make sure is responsive and then add ScrollTrigger in order to control everything with the scroll position. Happy Twening!

Hi, You could check the Horizontal Seamless Loop helper function: https://gsap.com/docs/v3/HelperFunctions/helpers/seamlessLoop Here are a couple of demos: https://codepen.io/GreenSock/pen/ZELPxWW https://codepen.io/GreenSock/pen/gOvvJee Hopefully this helps. Happy Tweening!