Leaderboard

Is this the one you meant?

I've loaded your path in this SVG tool to see what is going on https://yqnn.github.io/svg-path-editor/#P=M_0_0_L_1708_0_L_1708_1330_Q_830_633_0_1330_Z And when manipulating the path and comparing to the other path it was easy to see what values where changing. I don't know how the path is build, that is really important when working with MophSVG so I couldn't tell you what is going wrong. I've used the attr object and target the d attribute directly. When working with SVG masks via clip-path (maybe also other methods) the SVG is as big as it is and it can not conform to the element you're loading it on. I've written a guide which walks you to several solutions and workflows. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/rNbBmwO?editors=0010

Aha, for anyone finding this. Updating the transform on resize with gsap instead of native resolves it. gsap.set(nav, {x: getInPoint()});

@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.

Actually that‘s an absolutely great answer Jack. It‘s good to have an „official“ reply to this. Thanks for posting!

You can set pinnedContainer: '.pin-gallery', to you imageReveal ScrollTrigger. from the docs https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/JjVPZGX?editors=0010

I got a similar error after installing the business package. You'll need to run this command to wipe the old gsap libs from pnpm store and then reinstall your repo. pnpm store prune && pnpm install I'm assuming the packages are under the same namespace or something like that. Here is a thread about it: https://github.com/pnpm/pnpm/issues/4724

Hi, In Next you have to import the UMD modules for the plugins: import gsap from "gsap"; import { DrawSVGPlugin } from "gsap/dist/DrawSVGPlugin"; import { useGSAP } from "@gsap/react"; if (typeof window !== "undefined") { gsap.registerPlugin(DrawSVGPlugin, useGSAP); } Finally in Vercel be sure to add an environmental variable for your token as shown in our installation docs: https://gsap.com/docs/v3/Installation/guides/Club GSAP & Vercel Finally be sure to not push your token to a public repo in the .npmrc file. Hopefully this helps. Happy Tweening!

hmmm... the only other ones that come to mind off the top of my head are these:

Hi, The simplest way I can think of this is to use a call method and a loop: https://gsap.com/docs/v3/GSAP/Timeline/call() https://gsap.com/docs/v3/GSAP/Timeline#positioning-animations-in-a-timeline Here is a simple demo showing that approach: https://codepen.io/GreenSock/pen/KKYKKpp Hopefully this helps. Happy Tweening!

Hi @ashirrr welcome to the forum! As far as I know, this is not possible, but you can use gsap.delayedCall(0.5, myFunction) https://gsap.com/docs/v3/GSAP/gsap.delayedCall()/ and then then in myFunction call ScrollTrigger.refresh(); If you still need help please provide a minimal demo and also explain what you're trying to do, so that we can prevent the classic xyproblem.info Hope it helps and happy tweening!

As you've stated that is indeed how ScrollTrigger works. But there is another plugin that sounds like what you're looking for have you seen the Observer plugin https://gsap.com/docs/v3/Plugins/Observer/ With the plugin you can watch for scroll events and then do some logic based on that. Here is a example that tweens to labels on a timeline and it just animates the previous of next label on a timeline. To implement this in your project you'll just have to put labels in your timeline where you want the scroll to stop. Hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/GRzrPPy And here an example that mixes normal scroll with the Observer plugin https://codepen.io/GreenSock/pen/oNQPLqJ Just going to put this here: https://codepen.io/mvaneijgen/pen/dyLbBom?editors=0011

Instead of absolute make the container display: grid with one cell having all elements in that one cell. With absolute the elements get removed form the from the document flow, and with grid they all stay in the flow, which is much easier to handle. This all is explained in the post I've linked, so I highly recommend taking a look at that.

Hi @Tony_ton and welcome to the GSAP Forums! Nothing wrong with the code you're posting, GSAP is doing what's supposed to, the issue stems from not understanding exactly how from() and fromTo() instances work. A from instance takes the element you're tweening from the value you're passing in the config to the value it has before that instance is rendered. So if you have an element with opacity: 1 as is current value and you use a from instance with opacity: 0, GSAP tweens the opacity value from 0 to the value it had before, that is 1. But if you have an element with opacity 0 and you create a from() instance with opacity 0, GSAP takes the element from the value you passed in the config (0) to the value it had before (also 0). GSAP is doing what is supposed to, the problem is that you're telling GSAP tween the opacity value from 0 to 0, so nothing happens visually but GSAP is actually doing that. If you want your element back to opacity 1 then just use another to instance: hideSearchTl.to(elements, { width: someValue, autoAlpha: 1, padding: someValue, }); Hopefully this clear things up. Happy Tweening!

Hi @Amal_ks and welcome to the GSAP Forums! This doesn't look right to me: return { Animcontainer }; The return statement in a React functional component should be JSX right now you're returning a ref and that's why you're getting a scope warning, because nowhere in your code that ref is being set to an actual DOM node. Hopefully this clear things up. If you keep having issues then create a minimal demo that clearly illustrates the problem. Happy Tweening!

Cool! Yep that's the great thing about @Carl's teaching it doesn't matter what he is building, but the logic you can gleam from it is important to add to your own projects. A week a go I made a post that also might help in your journey. At least it helps me to stop getting stuck and always create a path forward. Nogmaals veel geluk met je project!

I've managed to make this now. The full animation is two tweens with no easing in the first tween the arc point gets played to 75% of its total value and then the second tween moves it the rest of the way. The easing is set to none, so that it is just a linear movement. Then we control those tweens with another timeline, so that we can ease the full length of the timeline we've created. I've got this logic from @Carl awesome tutorials. You'll want to create another set of tweens that animates this in reverse and then make the point lag behind, you might want to look in to this tutorial again from @Carl, even beter maybe you just want o sign up for his course, which I would highly recommend! Here is the full moving in animation now. Hoop dat het helpt en veel geluk met je project. https://codepen.io/mvaneijgen/pen/NWmKOZZ?editors=0010 couldn't help myself https://codepen.io/mvaneijgen/pen/poBzQJg?editors=0010

Thankyou @Rodrigo, the solution you provided is quite awesome. I solved my issue with invalidateOnRefresh and function based value for dynamic updating of offset. invalidateOnRefresh: true I will definitely like to try this solution on FLIP, if i get more time on this to checkout.

It looks to me like it's working as expected. Why are you setting autoRemoveChildren: true anyway? Let's say you've got a 1-second tween in a timeline with autoRemoveChildren: true and then you do a setTimeout() so that 1 second later, you add more tweens to that timeline. Well at that point the first tween has completed and been REMOVED, thus the duration of that timeline is 0, so you add new stuff in there but the startTime of that timeline was 1 second ago (meaning the global playhead would be 1 second past the start of that timeline), so when you add a new 1-second tween into that timeline, it'd simply render at its very end because the new timeline's duration expanded out to 1 second, but the global timeline playhead is already at the end of that. Of course you could simply call restart() on that timeline if you want it to adjust its startTime such that its very start is wherever the global timeline's playhead currently is.

What is it you're trying to do? I understand your question, but what is the underlaying animation your are trying to build? If I disable all JS and remove some CSS, so that the page can scroll normally the effect looks almost the same, the only thing your animation does now is add some stagger and some smoothness, but that is much easier to make with our https://gsap.com/docs/v3/Plugins/ScrollSmoother/ plugin, easier to manage and has much more options so to can set elements faster and slower. If you're set on making this work I would restructure your layout, have all the text stacked on top of each other and move them in and out via an animation, they can come just from off screen, so that it looks like you're scrolling. I've written a card stacking guide, but the logic will also apply to this effect. Hope it helps and happy tweening!

Yeah, that'd only happen if you've got a "style" property on the targets and the properties that you're animating are transform-related (like x, y, etc.). I've made a tweak to the core that should resolve that. You can preview it here: https://assets.codepen.io/16327/gsap-latest-beta.min.js (you might need to clear your cache) Better?

Hi @lofka welcome to the forum! The issue is that your elements are in these locations and then with an animation you move them up. You do this with transforms (which is great), but this leaves a 'ghost' location of the original element. I've written a guide how you can go about creating stacking cards animations with some simple steps, there are a lot of examples in that post and even more in a codepen collection linked in the post, so there is probably something you can use as a starting point. But be sure to read the post because it goes over some key points which will allow you to make any card stacking animation. Hope it helps and happy tweening!

Hi @gaggo Yeah, I apologize but I don't really know what the issue could possibly be with pnpm or how to resolve it. Our private repo expert has said that yarn itself also has some bugs related to private repositories that they haven't fixed in a long time. Unfortunately we don't have control over yarn or pnpm. I really wish I had a great answer for you. 🤷‍♂️ If anyone has suggestions, we're all ears of course. Thanks for being a Club GSAP member! 💚

Hi @peter. welcome to the forum! I've used the smooth origin helper function and one tween on a timeline that gets its transformOrigin updated on each repeat. I'm not sure what you want to do with the rest of the animation, but this show you how you can update the origin (smooth) on each tween. You can also set an onComplete: on each subsequent tween (not on the timeline) and do the same logic. Hope it helps and happy tweening! Edit: I’ve placed some comments in your JS to better explain things, please be sure to read through them! https://codepen.io/mvaneijgen/pen/ZEZzeWj?editors=0011

Maybe @Rodrigo can spot something. I'm out of ideas here, unless you can swing me your repo?

Heya! A few questions, Are you using React or Next? (If you're using Next, try this) // Register the plugin only in the client side if (typeof window !== "undefined") { gsap.registerPlugin(ScrollTrigger); } Can you try adding useGSAP to your plugin registration? gsap.registerPlugin(useGSAP); If you use this import instead of /all - does it change anything import { DrawSVGPlugin } from "gsap/DrawSVGPlugin"; Let me know!

Stop optimising your code before it is even working! I have to preface this with I do this all the time, but knowing helps me get out of this thought process. I see so many questions on this forum “how do I do this in a for loop, but then not for the third item in the loop…”, you're making it way to complex. I know we all have learned Don’t Repeat Yourself (DRY), but there is nothing wrong with a little repeating if you know you're going to optimise it later. When I feel I’m banging my head against the wall and can’t see how the get something to loop the way I want, I take a step back and just manually write it out by hand. Literally writing out what each element should do, this of course can be insane if you need to have more then a hundred elements to do something, but then I just pick the first few, eg .item:nth-child(1), .item:nth-child(2), … .item:nth-child(5),ect. If you do this a few times you’ll probably see a pattern emerging, but try to resist the urge to start optimising, just keep writing out the animation until you have a solid base that represents the animation you want to have. That is why I love working in Codepen, first I don't have to worry about my real projects dependancies, or my framework throwing weird errors, I can just worry about the demo I’m building and making it the best I can and when I think I’m ready for the next step I fork my pen and start moving the code around. Get some of the repeating code and try adding it to a for loop, then test if it is still doing what it was doing when it was written out by hand. Below some code examples from a real world project of mine, where I was “I don't even know how this would work!” and you can see my first demo was no where finished, I had over a hundred lines of animation code! https://codepen.io/mvaneijgen/pen/YzgVKRo Then I forked the first version and started to optimise a few things, swapping out fixed values for dynamic once, but still going on writing each tween out by hand, there even more lines of code now! https://codepen.io/mvaneijgen/pen/gOEWYZp In version 3 I finally found that I had the animation down like I want it, it could still use some fine tuning, but all the logic was there. Two hundred lines of code! https://codepen.io/mvaneijgen/pen/dyrRrvL And finally reducing that amount of code to just fifty lines by optimising what was already working and removing the duplicated code and adding it to a for loop. This is just an example, it might not even be the final code, but it is working! So now I can worry about accessibility making it responsive and making it fancy. But it's to illustrate that I could never come to the same conclusion that I’ve come to now if I had started with trying to optimise the code from the start. Personally I need to get a feel for what the code needs to do. Working in Codepen and forking your work is such a life saver, because you can fall back at earlier versions when you inevitably brake something, not to talk about GSDevTools what an awesome tool to debug an animation (🫢 did you know you could just use that paid plugin, even if you’re not a member on Codepen for free!) If you can do this at your first go writing out a project, why are you even reading this?! And we love to have you helping around here on the forum, it is great to have such a keen eye help out!

Hi @limbo After pondering this thread I figured it was worthwhile to explain why 2 timelines doesn't work so well and also show a "single timeline" solution. I made a video that premieres pretty much now... Here are some demos Simple https://codepen.io/snorkltv/pen/MWJVWwy More Complex https://codepen.io/snorkltv/pen/12598b629fa6d41468fdc8e60ee896ba Multiple https://codepen.io/snorkltv/pen/MWJVYeQ?editors=0010 Enjoy!

The question reminds me of my old 2,000 post demo. It's still in GSAP 2 syntax, but maybe it'll give you some ideas. https://codepen.io/PointC/pen/RyaJmj