Rodrigo

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!