Leaderboard

Hi, These demos by @mvaneijgen can definitely help: https://codepen.io/mvaneijgen/pen/BabrJyv https://codepen.io/mvaneijgen/pen/xxBjbNW Also this is a good starting point as well: https://codepen.io/GreenSock/pen/gOEaEoa Happy Tweening!

Hi, Maybe something like this? https://codepen.io/GreenSock/pen/bGZKWjp Hopefully this helps. Happy Tweening!

It's showreel time! 2023. What a year. As always, blown away by the creativity and skill in this community. Here's to another amazing year of animation magic in 2024. ✨

Thank you

My sincere apologies! I found the issue. We worked out the start/stop frames from our mp4, which is at 25 FPS. When the mp4 was converted to stills, it was exported at 30 FPS, meaning the sequence had way more frames than the mp4 and that's why things didnt line up! So all sorted now, thanks!!!

Thanks @Rodrigo this is what I needed but yeah I did update the animation a little bit to fit my requirements. Here is the updated codepan if anyone is really interested in checking the codes. https://codepen.io/nafiul09/pen/qBvyEMr

Hi, The problem with your demo is that you have two different ScrollTrigger instances, no need for that as far as I can see, just one should suffice for what you want to do. Also you're pinning the menu bar but not setting pinSpacing to false, that creates some padding in the bottom which makes it work in an odd fashion. I forked your demo: https://codepen.io/GreenSock/pen/ExMpxPe Hopefully this helps. Happy Tweening!

Have you checked the docs? See the once property in ScrollTrigger https://gsap.com/docs/v3/Plugins/ScrollTrigger/

I haven't been able to simplify the code and do any testing yet, but for now thank you all for your input, I think that's not really gsap related issue.

You mean the transform origin? transformOrigin: "right center" https://codepen.io/GreenSock/pen/abMKPPp?editors=1010

NotFoundError: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node. I have made this GSAP animation in react which works really well, when i try to navigate to another i get this error: I have wrapped all of the gsap inside of a context and then reverted on return but still get this issue Thanks J

Yep, sometimes error logs are cryptic and not really useful, not just a React thing. The issue is that everything in your code was good, you were using GSAP Context and reverting it appropriately in the cleanup phase, so it had to do with something on the DOM. React fragments can be useful in certain situations but I try to avoid using it as much as possible because of errors like this. When working on a SaaS project a few years ago I had my personal encounter with this error and it took my several hours to get to the problem. So my next try on your demo was to remove that and see how it works. If possible move your links to a container that is placed in the layout file, it saves you from re-rendering them everytime. If the links should go on every page, then avoid using fragments. Clearly there is a problem when a node is being removed after the cleanup phase (most likely the next link component, which is causing this, but I can't tell you for sure. Happy Tweening!

Hi, This seems more related to the fact that you're using a react fragment rather than a GSAP related problem. Adding this (or any other valid DOM node) to wrap your elements makes it work as expected: <main> <Link href="/test">test</Link> <div className="fullPageSection yellow white"> <div className="video"> <div className="canvas-container"> <canvas id="hero-lightpass" /> </div> </div> <div className="cta_section"> <h2 className="w-[65%] text-center block mx-auto leading-[1.5] font-normal "> test{" "} </h2> </div> </div> <div style={{ height: 100 + "vh" }} className="fullPageSection white" ></div> </main> Hopefully this helps. Happy Tweening!

Hi, Direct DOM manipulation in React is not always recommended, because at some point the component could re-render and based on the current state the element that was manually removed will be rendered again, regardless of the logic you employed to remove the element. Is better and safer to use the traditional conditional rendering approach in these type of frameworks (not just React). Finally I recommend you to take a look at the resources in this page to learn more about the integration of GSAP in React projects: https://gsap.com/resources/React Hopefully this helps. Happy Tweening!

You can set the global timeScale. gsap.globalTimeline.timeScale(0.5); // plays everything at half speed Seems like it should be super easy. Just export your variables from a single file. variables.js const debugMultiplier = 0.5; ... export { debugMultiplier }; foo.js import { debugMultiplier } from "./variables.js"; gsap.to("div", { x: 100, duration: 1 * debugMultiplier });

You can build a timeline like that, you just need a reference to the timeline. var tl = gsap.timeine().from(the code here) if (some condition == false) { tl.from(code1) } if (another condition == true) { tl.from(code2) }