Rodrigo

Hi, Your demo has only one Draggable instance. You can definitely control the position of one Draggable instance with another Draggable instance. You can update the other Draggable instance using the update method: https://gsap.com/docs/v3/Plugins/Draggable/update() Hopefully this helps. Happy Tweening!

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, This demo could help https://codepen.io/GreenSock/pen/NWzxaJv Happy Tweening!

I believe that it can't be done. Duration is a read only value on every GSAP Tween, so a quickTo shouldn't be any different as far as I can tell. This seems to work in this codepen demo (open it in a new tab and open the console): https://codepen.io/GreenSock/pen/WNWaBxb Once again, without a minimal demo we can't really tell what the issue actually is. Happy Tweening!

Hi, Unfortunately a code snippet and a live site doesn't tell us the issue you're having. We need to see it live on a demo that we can fork and tinker with in order to make it faster to identify. That's why we offer a set of stackblitz demos that allow you to fork and create your demo. React Next Please don't create a stackblitz demo that includes your entire project, just a few colored divs that clearly illustrates the problem. Happy Tweening!

Great to hear that it actually helped! Thanks for sharing your demo with the community! The only thing I would point about it is that you don't need to store the timer in a ref if you're using it inside the useGSAP hook's scope. Also this is not going to do what you expect: timer && timer.current.pause(); Because timer never will be falsy, because since is a react ref, by default react will add the current property to it, so timer won't be undefined, will always have the current property because it will be an object. That's why I suggest to keep everything in the useGSAP scope and set the timer as a constant. Hopefully this helps. Happy Tweening!

Yeah, that's basically how it works. When you call a function and a variable has been updated the function will reflect the updated value, just the way most programming languages work, as far as I know at least, I can speak for JS and PHP, but it would make sense that it works like that in every language. Happy Tweening!

Hi, I think the issue is in your CSS actually but not the transition: all property that was being added, but in some of the media queries you have. I'm testing this on a screen that is 1600x900 pixels and the issue is not when you change the width of the screen but the height. In this distribution everything works great regardless of the screen width: The reported height of the result container in codepen is 516 px. But in this disposition it doesn't work and the markers are at the top of the document: The reported height in this one is 388 px, so you should look into the media queries you have in your setup and how that is affecting the document's flow. Hopefully this helps. Happy Tweening!

Hi, Sorry about the issues, but as mentioned without a demo that clearly reproduces the problem there is not a lot we can do. The only advice I can give you is to keep looking into anything that could change the height of the document when resizing, maybe images with src set, maybe different screen sizes will use different images with different heights, that could load the image after the ScrollTrigger instance is created. Happy Tweening!

Hi, For what I can see you're not using GSAP Context for cleaning up and reverting the ScrollTrigger instance when you close the modal: https://gsap.com/docs/v3/GSAP/gsap.context() This demo shows how to use the onMounted and onUnmounted hooks for that: https://stackblitz.com/edit/nuxt-starter-aih1uf Is not the same as your approach, but it should give you a solid start point. Hopefully this helps. Happy Tweening!

Hi, This demo uses the useGSAP hook with GSAP MatchMedia: https://stackblitz.com/edit/vitejs-vite-pfhzkf?file=src%2FApp.jsx Here you can see the docs for MatchMedia: https://gsap.com/docs/v3/GSAP/gsap.matchMedia() Hopefully this helps. Happy Tweening!

Hi @BennyBatta and welcome to the GSAP Forums! Unfortunately there is not a lot we can do without a minimal demo, a live site doesn't give us the opportunity to edit the code and see what could be the issue. If possible setup a minimal demo forking this: https://codepen.io/GreenSock/pen/aYYOdN Happy Tweening!

Hi @Ahlecss and welcome to the GSAP Forums! Yeah without a minimal demo is not really easy for us to see what could be the problem. Keep in mind though that GSAP can tween any numeric value of any object. A GSAP instance is an object and progress is a numeric value so you can tween the progress of a GSAP Tween! const t = gsap.to("#circle", { width: 100, ease: "none", paused: true, }); // Then tween the progress const clickHandler = (value) => { gsap.to(t, { progress: value, // between 0 and 1 of course, duration: 0.5, ease: "power1.inOut", // Any easing function you want here }); }; Doing this without creating a new GSAP instance is just not possible. Maybe you could look into creating a re-usable quickTo instance: https://gsap.com/docs/v3/GSAP/gsap.quickTo() const t = gsap.to("#circle", { width: 100, ease: "none", paused: true, }); const pTo = gsap.quickTo(t, "progress", { duration: 1, ease: "power2" }); // Then tween the progress const clickHandler = (value) => { pTo(value); }; Hopefully this helps. Happy Tweening!

Hi, I think this is a better approach: https://codepen.io/GreenSock/pen/JjVmWKb I wasn't able to create a react version of it for technical issues on my end (ISP is super slow and creating a codepen is not as slow as a react demo on stackblitz), but porting this to react shouldn't be a really complicated task. The heart of this is on the doSlide method that takes a specific value (+1 or -1) which updates the index value. Also the difference with your approach is that this uses a fromTo instance for the next slide, regardless of the direction so that takes the clip path of the next image from the bottom to the top which makes looping possible. Hopefully this helps. Happy Tweening!

Hi, Unfortunately there is not a lot we can do without a minimal demo. If you have your ScrollTrigger instances in different components, be sure to use the right selectors and scoping. Try to create a minimal demo on Stackblitz that clearly replicates the issue, please don't use the full project or a git repo since that makes it more difficult to fork and find the issues since we have to go through a lot of files and lines of code, the simpler the better. Happy Tweening!