Rodrigo

This is the debug link on devtools: https://i.imgur.com/CvJDG6V.mp4 I'm seeing exactly the same on an android (chrome-firefox) phone and iPad (chrome-safari) 🤷‍♂️ Sorry but I can't seem to replicate the problem you mention. Happy Tweening!

Hi, I still think that this is related to something you're adding on the HTML/CSS of your project (or maybe wordpress is). I forked your demo and stripped all the CSS that wasn't need, the bare minimum, and is working as expected on my android phone on orientation change: https://codepen.io/GreenSock/pen/MWRzJJV Here is the debug view (no iframes, just like a regular website) https://cdpn.io/pen/debug/MWRzJJV If you check that link on a small screen and flip the orientation you'll see that the pinning works as expected. That gives me more ground to state that this is not a GSAP related issue, but something else in your setup that is causing this. Hopefully this helps. Happy Tweening!

Function based values mean that when the ScrollTrigger instance is refreshed that end value will be whatever number/string that function returns. If oyu're doing some sort of calculation whose result might change that calculation will be run again. In the particular snippet you added the end point is based on the height of an element, if a screen resize changes the height of that element then the end point will be recalculated as well. Hopefully this clear things up. Finally it seems that you have created two different threads for the same issue, please let's keep the discussion in just one thread. That will make easier to follow and focus our efforts, thanks! Happy Tweening!

Hi, You where using different versions of the ScrollTo plugin and the GSAP core. On top of that the versions of the core and ScrollTrigger were really old 3.3.4. On top of that there seems to be something else that is causing this. This demo uses a similar setup and is working as expected: https://codepen.io/GreenSock/pen/RwOqojv Most likely is the position sticky you're giving to the nav bar, better use ScrollTrigger to pin that. Hopefully this helps. Happy Tweening!

Hi Nick, The snap function only decides the final value the inertia plugin will land, nothing more. If you want to slow down the draggable side of this, you could customize the helper function's Draggable instance by playing with the dragResistance value. From the Draggable docs: dragResistance Number - A number between 0 and 1 that controls the degree to which resistance is constantly applied to the element as it is dragged, where 1 won’t allow it to be dragged at all, 0.75 applies a lot of resistance (making the object travel at quarter-speed), and 0.5 would be half-speed, etc. This can even apply to rotation. Another option could be to use the resistance config option in the Inertia Plugin: https://gsap.com/docs/v3/Plugins/InertiaPlugin/#config-object resistance Number - The amount of resistance per second (think of it like how much friction is applied). Hopefully this helps. Happy Tweening!

Hi What countdown? Where exactly on the page? This is not a short site. I just checked this on an iPad running iOS 17 on both chrome and safari and it works basically in the same way it does on my desktop (Ubuntu 22) on chrome and firefox 🤷‍♂️ More details would help, but again without a demo there is not a lot we can do TBH, we can't see the JS that leads to this, we can't see if the CSS is doing something or not, we can't see if the HTML structure is the cause or not, etc. That's why we ask for a minimal demo (emphasis on minimal) that allows us to tinker with all those elements. Normally that helps us find the problems faster and easiser. Happy Tweening!

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!