Leaderboard

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

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.

The beauty of GSAP is that you can build anything you like. In compression to other 'plugins' were it does one specific thing GSAP is more a tool box in which you can build anything you like! The only thing holding you back is your own creativity. Personally I would start with a simple thing and start building from there, make demo's (make A LOT of demo's) and post back here when you get stuck at specific parts. Keep in mind that you're sharing a site of a design agency with as far as I can see a team with over 10 people who all have their own skill and experience, so I would adjust your goals until you've got some more experience with the tools and then you'll see you can build anything you like! If you're stuck for inspiration you can check out the GSAP collection page on Codepen with so many demo's. Hope it helps and happy tweening! https://codepen.io/GreenSock/collections/

Thanks for asking, @Marija1337! No, you don't need the special commercial license for that - the standard "no charge" license covers that type of usage. If you answer "yes" to any of the following, you'd need the special commercial license that comes with "Business" Club GSAP memberships: Do you have multiple developers that need access to the bonus plugins like SplitText, ScrollSmoother, MorphSVG, etc.? 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. So you should be all set with the free/public license. Enjoy the tools and good luck with the new business! 💚

Or you could just put the CustomEase inside your onMounted function. The fundamental problem is that you're trying to register CustomEase when window/document don't exist yet.

Hi @m__shum and welcome to the GSAP Forums! Sorry to hear about the issues. I created a new Nuxt3 app here in my local machine and this is working without any issues: import gsap from "gsap"; import { CustomEase } from "gsap/CustomEase"; import { onMounted } from "vue"; if (typeof window !== "undefined") { gsap.registerPlugin(CustomEase); } const myEase = CustomEase.create('myEase', 'M0,0 C0.29,0 0.311,0.268 0.35,0.502 0.423,0.951 0.756,0.979 1,1 '); onMounted(() => { gsap.to("h1", { x:200, y: 200, ease: "myEase", duration: 2, }); }); I would recommend you to use the onMounted hook in your setup. We have this starter template on stackblitz that you can use as a reference: https://stackblitz.com/edit/nuxt-starter-aih1uf Hopefully this helps. Happy Tweening!

Hi there. I assume you're talking about embedding the GSAP site? If so - I'm afraid that's been added as a security measure to stop clickjacking https://www.keycdn.com/blog/x-frame-options

https://codepen.io/GreenSock/pen/MWRPXMr?editors=0011

Hi @maoux welcome to the forum! Your in luck, it is even easier now. Check out useGSAP()!

This is mostly a structure question and hasn't really to do with GSAP. I would abstract out what are toggle and what are expended elements and then expand all the elements that are connected to the toggle. As you see in your example you don't want to expand elements that have them self content that also should expand, so the HTML structure (and CSS) is really important in this case. I've given each element data-toggle and data-expand with their respective key (eg the name on the link). Right now it doesn't close, personally I don't like it when toggles close them selfs and I think it is bad UX. What If I want to compare content one and three? You could could add a data-close and find all the elements that should close if some data-toggle is clicked, but agin this isn't really a GSAP question, but again more JS logic and is beyond the scope of this forum. Still hope it helps and happy tweening! https://codepen.io/mvaneijgen/pen/BaEqJOM?editors=1101

You can use scrollTo plugin to scroll to certain element, but because you are animating sections, you can't use them as reference. Instead, you need to wrap them in another wrapper so you can use this wrapper in scrollTo. https://codepen.io/SahilAFX/pen/jOReGmM

Not reallly, your method was making the calculations, but the value being used by GSAP wasn't being updated. GSAP records the initial value of the properties you want to tween and then iterates between that value and the final one you're passing in the config. In order to optimize this process GSAP doesn't do constant read/write operations, it does that once and then just iterates between the values. Invalidating a GSAP instances removes the initial values (the value the element currently has) but not necessarily the target value. If you want to update the target value that's when function based values come in handy, because that tells GSAP to update both the initial and final values in this particular case. Your method was updating the value of a variable, the approach I use is to call a function that returns a value. You could use other approaches to get the same result but using a function is always the cleanest one IMHO. Hopefully this clear things up. Happy Tweening!

Hi, I think this is a bit of an edge case. This is the best solution I was able to come up with and I can't guarantee you that it'll work 100% of the times, so you'll have to test and see what happens: https://codepen.io/GreenSock/pen/eYojqEB Here is the debug view: https://cdpn.io/pen/debug/eYojqEB Hopefully this helps. Happy Tweening!

Hi @Poylar, A component similar to Animate Presence is on our todo list, but we haven't been able to complete it just yet. One alternative is to use React Transition Group's Transition component as shown in this modal demo: https://stackblitz.com/edit/vitejs-vite-vlpbvk?file=src%2FModal.jsx Including React Transition Group does not imples a big impact on either KB size of your app or performance (as you can see in the demo), so is a good and reliable choice for that particular scenario. Hopefully this helps. Let us know if you have more questions. Happy Tweening!

Hey everyone! I've been working on a fun demo project called TweenPages to show how I do complex page transitions with GSAP in Next.js. I haven't shared it yet with anyone publicly until now. Would love to get some early feedback. Especially on the docs where I go into detail on the code side of things. Am I doing it right? Am I doing it wrong? Are there things I can improve? Fun! - https://tweenpages.vercel.app/ Docs - https://tweenpages.vercel.app/docs Code - https://github.com/johnpolacek/TweenPages Hope the project helps anyone who want to do GSAP animations like these on Next.js.