xperator

Hey @GreenSock Thanks for the reply. I'm actually in no rush by any means. As I've already deployed the project that I was working on when I reported the issue and I've used different solutions to get around it (such as using Intersection Observer api directly instead of ScrollTrigger). As for the demo, I've already provided @OSUblake one which he managed to run and reproduce the issue as far as I remember ( we talked in DM back then ). Unfortunately I don't have enough time at the moment to produce another demo. So excuse me for that. The reason I revived this few months old topic was solely because I was curious if there was any updates in regards to this issue ( or just any fixes/updates on the ScrollTrigger since then ) Either way thanks for your great work!

@OSUblake Hey buddy, sorry to ping you! Any updates on this ?

Hey @OSUblake I've sent you the repo link. Check your DM. I think it's better if you see the codebase yourself and also see the demo in action, rather than me trying to describe it in dozens of posts ?

Hey @OSUblake, I've tried the beta version and I can confirm only the `from` opacity issue still exist, I'm not 100% sure about the ScrollTrigger issue because I still haven't managed a way to replicate the situation where the error happens. But I did not encounter that one when testing the current beta. Thank you very much for sticking with me on this matter even though I provided no demo to work with. At least now I have some clues. Since this seem to be more specific to ScrollTrigger not playing well in my SPA environment, and also I'm guessing some possible other internal issues are happening with GSAP, so I'm gonna try few things (workarounds) : I've replaced all my from() to fromTo()` and the opacity issues are gone ✅ I've replaced all my ScrollTrigger with a manual Intersection Observer to start the animations which works now ✅ Although obviously this is not an optimal solution and this means more code + lack of ScrollTrigger plugin convenience and features, but at least the animations themselves will work. Not to mention I've spent too much time on this subject (almost a week). I seriously lost hope on the usage of GSAP plus the fact there no active libraries/tools out there that are powerful as GSAP. I even went out of my way during these past few days to try to rewrite the app in a React ecosystem so I could use Framer Motion and possibly have better time with the animations. But that fall short quickly for many reasons.

Thanks for the beta version links but I'm not entirely sure how to import them since I'm using the esm method to import them: import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) Here is the link. The OP also seem to use similar setup and have the issue where ScrollTrigger does not trigger when navigating to different pages. I've tried killing them by id, and also per page. It doesn't work. As I mentioned in my previous post "update", adding lazy: false to every from and also removing all once: true doesn't fix the issue. Then that could be an internal gsap issue that happens under certain circumstances.

@OSUblake Thank you for your welcome ? and thanks for your great and detailed response! Killing all the ScrollTrigger on route change will cause every animation that relies on ScrollTrigger to fail to start. // Navbar component ( which is a persistent component ) onMounted(() => { Inertia.on('navigate', (event) => { ScrollTrigger.getAll().forEach(t => t.kill()) }) }) I'm not pinning anything in any place that's why I'm confused on why the error is pointing to the `pin` method. So do I need to apply lazy: false to every place where I have from() and opacity ? Does this also affect autoAlpha as well ? I will try to remove once: true from every ScrollTrigger and see how it goes. Btw I read this comment on StackOverflow regarding the "Vue-Router and Gsap ScrollTrigger" topic, and I wonder how much of this is true ? Update : I tried adding lazy: false and also removed all once: true and the problem still persist.

Hey, First of all thanks for your great work with this great tool! I'm gonna try to keep it short so bear with me if this ends up a long post. So my dev stack is Vue + Vite + Inertia + Laravel and I've used gsap here and there in few projects and I never had any issues with it so far ?. But I just started working on a new demo website for a client where I'm using gsap almost everywhere. And the problem is I'm seeing some weird behavior which I can summarize in 2 points: Some animations that are supposed to start by ScrollTrigger, won't work. This happens only sometimes and it happens randomly and I cant pinpoint it to an exact component. For instance an element that has initial opacity of 0 and should change to opacity of 100 when it's in the viewport, it does not work. Sometimes this throws an error saying Cannot read properties of undefined (reading 'pin') and sometimes it doesn't even throw this error. But here is how the error looks like :And below image is the code related Some timeline animations act weirdly when I navigate away from the page and come back to it. Like after the initial playback, when you navigate to a different page and go back to try to see the component with the timeline animation again, it start from a certain point of the timeline as if it was cached somewhere, I even noticed some of the element styles from the first playback are still applied ( Even though I double checked the DOM element does not exist when I navigate to a different page, and I also checked Vue Devtools to make sure the component isn't there either. But still somehow ) I'm not sure why these problems are happening. Maybe it's my "heavy" usage of GSAP, which I doubt because I'm sure there are tons of websites out there that totally surpass my usage and are probably doing fine. Or maybe the problem is that GSAP does not play well with SPA apps. Or maybe It's my code. I know you're gonna ask for a replicate demo so you can look into, but trust me I cannot even replicate the problem myself because it happens randomly under unknown circumstances. Also I have a custom setup which I think will be a hell of a job to duplicate in an online code sandbox tool. But I can DM you the URL of the demo that I'm working on ( sorry can't share it here for privacy reasons ) Here are the things that I've tried : I've tried adding gsap to the optimizeDeps.include of my vite.config.ts file I've tried killing the gsap timeline instance during component unmount : onBeforeUnmount(() => { productsTimeline?.clear() productsTimeline?.kill() productsTimeline = null }) I've tried different combinations of to , fromto and from but no luck I've tried using ScrollTrigger.refresh() in places where I thought there should be one, like after initializing a Swiper instance : products_swiper.value = new Swiper('#products-swiper', { on: { init: () => { ScrollTrigger.refresh() } } } A bunch of other things I don't quite remember ( like using an id on ScrollTrigger, etc... ) And this would be an example how I use gsap in my Vue components : import { gsap, ScrollTrigger } from '@/js/utils/gsap' onMounted(() => { gsap.fromTo('#why-section .gsap-why-title', { scale: 1.2, autoAlpha: 0, }, { scrollTrigger: { trigger: '#why-section .gsap-why-title', once: true, start: 'top center+=300px', end: 'bottom bottom', }, scale: 1, autoAlpha: 1, duration: 1, ease: 'power3.out', delay: 0.5, }) }) // And in my '@/js/utils/gsap' file I have : import gsap from 'gsap' import ScrollTrigger from 'gsap/ScrollTrigger' gsap.registerPlugin(ScrollTrigger) export { gsap, ScrollTrigger } Any ideas ? Thanks in advance!