Rodrigo

Hi @Renson Ralph Bitara and welcome to the GSAP Forums! There is a lot of code in your demo and we don't have the time resources to comb through all that and find what the issues could be. After a quick glance I can see some issues in your code though. What is this actually doing? What's the purpose of this? window.addEventListener( "load", function (e) { init(); setInterval(function () { ScrollTrigger.refresh(); }, 100); }, false ); A setInterval will keep executing over and over. That doesn't look right to me, to be refreshing every ScrollTrigger instance every 100 milliseconds. I don't see the use of that particular code. Then you have this: gsap.fromTo( ".services-content-heading-inner", { yPercent: 100 }, { yPercent: 0, autoAlpha: 1, duration: 2, ease: easeInOut } ); ScrollTrigger.create({ target: ".services-content-heading-inner", start: "top top", end: "bottom bottom", markers: true }); You are creating an animation, then you create a ScrollTrigger instance, but what's the objective of that ScrollTrigger? What is actually controlling? For what I can see nothing really. Finally this: ScrollTrigger.create({ start: 0, end: "max", onUpdate: updateValues }); By default this ScrollTrigger instance will work with the window element and scroll position, so that means everytime the user scrolls that function will be called. Again I don't see the use of this. If you want to know if something is in the viewport, why not create a ScrollTrigger instance for that specific element that can tell you whether or not that element is in the viewport? I think you are overcomplicating things quite a bit and you should take a few steps back and go for simpler things first and then start adding more animations and complex stuff to your app. Finally I suggest you to take a look at our getting started guide: https://gsap.com/resources/get-started and a closer look to the ScrollTrigger docs and demos in order to get a better grasp of how ScrollTrigger works: https://gsap.com/docs/v3/Plugins/ScrollTrigger/ Happy Tweening!

Hi, Sorry about the issues but the demo URL is not really working, I see a lot of previews but I keep getting a 502 error in them. It seems that the dev server is exiting with an error so you might want to check that. If possible create a demo in Stackblitz and not use a git repo since that doesn't really allow us to fork the demo, since we need to fork the entire repo as well and that further complicates things. Happy Tweening!

You might want to use localStorage instead of sessionStorage then: https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage Maybe the demo in this post can help: Happy Tweening!

Hi, Great to hear that you were able to solve this and thanks so much for sharing your solution with the community! I'm 100% sure that many users will benefit from your knowledge and generosity! 🥳 Happy Tweening!

Hi, I don't see any ScrollSmoother in your demo and neither an element with position: fixed One of the caveats of ScrollSmoother is that elements with position fixed should be outside the smoother wrapper: https://gsap.com/docs/v3/Plugins/ScrollSmoother/#caveats But since ScrollSmoother is integrated with ScrollTrigger you can use pinning like you'd do in any other normal setup, so there is no need for position fixed inside the wrapper. We have this demo that uses ScrollSmoother in a SvelteKit app: https://stackblitz.com/edit/sveltejs-kit-template-default-dvnud9 I'm not really well versed in Svelte/SvelteKit yet, but for what I've seen and played with it, I really like it. Hopefully in the future we'll be adding more demos to our collections in order to better help our users. Happy Tweening!

Ideally every GSAP instance you created Tween/Timeline/ScrollTrigger/Draggable/SpiltText, etc. That's why I suggested the GSAP Context route, you can create/add all those to a GSAP Context instance and when you navigate to another page just use the revert method: const ctx = gsap.context(() => {}); // Throughout your code add GSAP instances to the GSAP Context one // Before changing to a new route ctx.revert(); // BOOM!!! // All the GSAP instances added to that context are killed and reverted // Super simple and easy cleanup, you just worry about writing your code // and create awesome animations, GSAP does the heavy lifting for you. But once again, if what you're doing right now works and makes the most sense to you, then keep it. Happy Tweening!

Hi @hebert lima and welcome to the GSAP Forums! Is always better to use the reversed() method to toggle a GSAP Tween/Timeline instance: https://gsap.com/docs/v3/GSAP/Tween/reversed() https://gsap.com/docs/v3/GSAP/Timeline/reversed() Then you can use the browser's sessionStorage to keep the value: https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage Here is a fork of your demo: https://codepen.io/GreenSock/pen/GRLwEQq Hopefully this helps. Happy Tweening!

Hi, The issue here is that you're not considering pinning. Pinning creates vertical space to allow the element to stay pinned so if you create a ScrollTrigger instance for an element that is after the pinned section, of course those calculations will be off because that extra space. Even though the recommendation is to create your ScrollTrigger instances in the order they appear on the screen, in this case is better to create all of them (especially since they're not pinned) after every pinning ScrollTrigger before any of those sections, has been created. This seems to work the way you intend: theme.animations = function () { const ColorChange = function () { ... }; // Horizontal Lock Scroll const horzScroll = gsap.timeline(); const horzScrollEl = document.querySelector(".horz-scroller"); var wrap = document.querySelector(".scroller__list"); if (horzScrollEl) { horzScroll.to(".scroller__list", { x: -horzScrollEl.scrollWidth + window.innerWidth + "px", ease: "none" }); ScrollTrigger.create({ pin: true, // markers: true, trigger: ".horz-scroller", // scroller: "#main", start: "center center", end: "+=" + (horzScrollEl.scrollWidth - window.innerWidth), scrub: 1, animation: horzScroll }); } ColorChange(); }; Hopefully this helps. Happy Tweening!

Hi @Rohit Pathak and welcome to the GSAP Forums! Mixing ScrollTrigger with Observer is a bit more complicated than just use the Observer Plugin. If I was you I'd try to solve everything just with the Observer Plugin alone (like the website you linked). I think most of your problems could stem from this: onUp: () => { if (timeLine1.totalProgress() < 1) { timeLine1.play(); console.log(timeLine1.totalProgress()); } else if (timeLine1.totalProgress() == 1 && timeLine2.totalProgress() < 1) { timeLine2.play(); console.log(timeLine2.totalProgress()); } else if (timeLine2.totalProgress() == 1 && timeLine3.totalProgress() < 1) { timeLine3.play(); console.log(timeLine3.totalProgress()); } }, Now I wouldn't use that approach at all. What I would do is to track the amount of steps each timeline has and if the amount of taken steps of a particular section are completed (4 out of 4, if a section requires 4 wheel events to complete a timeline for example) just move onto the next section. I would approach this as a user controlled content slider where each slide has some specific internal animations that should complete (in any direction) before going to the next/previous slide (if any of course). Also instead of checking for progress I would just use a simple boolean that should be toggled to true when the user scrolls and toggle it back to false after that particular section is completed, in order to use that as something that prevents the user from keep scrolling and perhaps triggering the animations of other sections. Right now I don't have the time to dig into this and create a minimal demo for you that illustrates the approach I described above, but hopefully this gives you an approximate idea of what I think should be the best course of action for something like this. Hopefully this helps. Happy Tweening!

Hi, I don't have any experience with Astro, but maybe you might want to have a look at GSAP Context as it could provide a simpler solution for this: https://gsap.com/docs/v3/GSAP/gsap.context() Now if this approach is not too convoluted (it doesn't really seems like that), does what you need and works well in production, then just use it: "if it ain't broken, don't fix it" 🤷‍♂️ Happy Tweening!

Hi @Fullerfort, Right now you have a logic issue since you're running your code only for the first page: PAGES.forEach((page, index) => { set(page, { z: index === 0 ? 13 : -index * 1 }); if (index === 0){ to(page, { rotateY: `-=${180 - index / 2}`, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 2) * (window.innerHeight * 0.25), markers:true, }, }); to(page, { z: index === 0 ? -13 : index, scrollTrigger: { scrub: 1, start: () => (index + 1) * (window.innerHeight * 0.25), end: () => (index + 1.5) * (window.innerHeight * 0.25), }, }); } else return false; }); That code block is running only when the index is 0, so the first page. May I ask why you changed the JS logic jh3y created? If is not broken don't fix it. Just changing the content of the pages should be enough IMHO. If you want to study and learn what is being done and why, then that is mostly related with JS logic and not really a GSAP issue. I'd recommend you to have a peak at MDN: https://developer.mozilla.org/en-US/docs/Web Happy Tweening!

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!