Marco Rodrigues

Hello. About this issue, I'm having the exact same problem. The stackblitz example works fine, there is just the small problem mentioned above that on a hard refresh the watcher doesn't get triggered and therefore the animation doesn't execute (only on refresh, if you navigate away and come back, th en the watcher will trigger with the animation). One way to solve it would be to do something like op said, having a function that will execute onMounted and use that same function inside the watcher. It just doesn't feel right to do and I wish there was a workaround. I tried using nextTick with the app.vue 'toggleTransitionComplete' but the problem is the same.

Thanks, both answers seem to solve the problem and make total sense!

Hello. I'm currently facing a challenge where I have Lottie path for desktop and a different one on mobile. The main point is to use lottie with scrolltrigger, so I went with the helper function. Problem is, if I follow matchmedia syntax on the lottie helper function, when I resize, the lottie doesn't get replaced but instead keeps appending new elements with the path for the current screen width. I'm assuming a way to solve this would be to somehow kill/destroy the previous element before adding the new one, but having some trouble doing that. Thanks

Yes, managed to solve it using the approach shown on that thread. Thanks a lot! My bad for creating a new thread about this, was using the wrong keywords to search in the forum, should've looked for "combining scrubbed and non-scrubbed animations/scrolltrigger"

Hi. Been having some trouble creating an animation sequence without scrub. My idea of the animation on the codepen above, is that the on-scroll animation should fade-in/out headlines, zoom-in (into screen) the last arrow, and then sequently in the future show more headlines. Problem is about timing and when one or the other should fade-out for the next one to fade-in. This would be the ideal sequece: First headline fade-out once the 3rd arrow reaches center of screen; Second headline fade-in right after; Second headline fade-out when about to reach the last arrow; Fade-in third headline once the last arrow is already zooming; With scrub I managed to do it using position parameter, but I want the animation to be triggered at once without scrub.

Managed to make it work using this approach, which was better for my use case. Thanks a lot! Thanks for the reply. Also works but there is just a small problem. If you run the demo and don't scroll, you will se the ellipse will end up with the value of "scale: 1.6" by inspecting the element. If you scroll after the animation is complete and go back to the top of the page, the value will go back to 1.6, which is the minimum. If you run the demo again, this time you scroll down *while* the animation is playing and scroll back up afterwards, you will see that the "scale" value of the ellipse will not be 1.6 but instead will be the value saved when you first scrolled. Don't think I was explicit enough on the thread about this.

Thanks for the codepen and reply. Your solution seems to solve it to some extent, but you can still see a bit of a jump if you scroll too soon on the page. The codepen I provided is not accurate compared to the real case I will be using this animation, but the circle will be, after page load, animated into the first section of the page, showing just a bit of it (first tween), and then, if you scroll right after, the circle will be animated into fullscreen making the page full dark background. That's why the circle jump conflict is pretty noticeable at first.

Hi. I'm trying to animate a circular shape on scroll that sometimes might happen while a previous Tween with the same element is still animating. If you take a look at the codepen, once the page is loaded, the circular shape is being animated, but if you scroll while it's still animating, it causes a jump on the circle. The espected behaviour is that if you scroll while the Tween is animating, the animation should continue from the previous Scale value. I have already tried "overwrite: true" but that doesn't seem to help in this case.

Even by calling ScrollTrigger.refresh() it seems to not work. It might actually be something related to Nuxt 3 onMounted hook that for some reason is being called before the DOM is ready, but I'm not completetly sure. Came across this github thread if anyone also seems to have the same issue: https://github.com/nuxt/framework/issues/3587

Hi. I have been recently started working on Nuxt 3 projects and was trying to implement GSAP ScrollTrigger on it. Everything was working fine until I realized that sometimes, after navigating routes, the ScrollTrigger start/end positions were wrong. I looked on the forum and found similar topics, but nothing came up for Nuxt 3 and I have been stuck with this for a while. I'm a aware this is a problem caused by Nuxt 3 spa hooks, but even after killing a simple scrolltrigger on the unmount hook, it does not work properly once I come back to the same route. Here's a simple StackBlitz Nuxt 3 + GSAP demo I created. The animation is pretty simple, the ball in the center is supposed to scale on scroll, which it does, but if you change routes quickly, or after a couple of times, you will see that the markers will be on top of the viewport and not work anymore. ( Seems pretty random since if you keep spamming and switching routes, it will eventually start working again) StackBlitz: https://stackblitz.com/edit/nuxt-starter-yjdl5s I know Nuxt 3 is pretty recent and is not even released yet, so there isn't much information about it yet, but any potential help or guide on how to solve this is greatly welcomed.

It works now. I think my problem was that I was setting the function that had to be run the same on every media query inside an "all" matchMedia. Once I added a min-width: 768px breakingpoint inside the matchMedia to execute the function, and a max-width:767 which also executes the same function, it worked. Thanks for your time and patience.

That's what I have tried before and without success. An approach like this makes the scrolltriggers out of order and bug: ScrollTrigger.matchMedia({ "(min-width: 600px)": function() { gsap.utils.toArray(".scroll-trigger").forEach(element => { if (element.classList.contains("text-fade-in-out")) { createFadeInOut(element); } if (element.classList.contains("text-animate")) { createTextAnimate(element); } }) }, "all": function() { createColor(".colors-section"); } }) Even if inside the "all" function I loop again through each ".scroll-trigger" it still doesn't work. Updated the pen with the code above.

Wouldn't that make the scrolltriggers to be created out of order since there will be multiple mixed on the page? That's why I was looking to loop through each ".scroll-trigger" element, because that's the class that is common on every single one of them, check if the element contains the class that identifies the scrolltrigger and then call it. Kinda what I'm doing here: gsap.utils.toArray(".scroll-trigger").forEach(element => { if (element.classList.contains("colors-section")) { createColor(element); } if (element.classList.contains("text-fade-in-out")) { createFadeInOut(element); } if (element.classList.contains("text-animate")) { createTextAnimate(element); } }) I don't think I'm supposed to use matchMedia inside the loop, and if I use it outside the loop that will make the scrolltriggers to be created out of order and bug. Sorry if I'm missing something obvious or understanding incorrectly.

Hello everyone, Based on the pen above, how would I disable, for mobile (767px), all the animations but keep only the createColor one? What I want for a website I'm making, is disable specific animations/scrollTriggers (mostly the text reveal ones) for mobile, but keep some others for every media query. Since I'm using functions for each animation and creating them in a for each loop for them to be created in order and not bug, I'm kinda lost how would I achieve responsiveness here. Using ScrollTrigger.matchMedia inside each function might work, but I feel like it's the wrong approach to do it. I have also tried using only 1 ScrollTrigger.matchMedia before the loop, but that would make the scrolltriggers to be created out of order and bug.

Totally forgot about passing the element in the function. It's now working as it should, thanks a lot! Also updated the pen with the solution.

Hi OSUblake, I updated the pen and created a function for two types of scrolltriggers in the example. Still doing something wrong as it is not giving the expected result. Also, is this the best approach to create every single scrolltrigger instance by DOM order? Or should I just do this for the pinned ones, which are the ones that get "bugged" if they are out of order. Asking this because I will be having multiple (5/10+) types of scrolltriggers on my website, some for text animations, some for columns reveals, etc, and was wondering if I should create a function for each and use the approach above.

Hello! Going straight to the point with the problem I'm having. I'm creating multiple pinned sections with the "text-fade-in-out" class that you can see on the codepen provided. I also will have somewhere on the website, other pinned colors sections, which is a different scrolltrigger. Problem is, if I add a fade in and out section below the colors one, the pin breaks in the end and the starting position gets all wrong for the last sections. I think this is caused because of the pin order, and I could use refreshpriority here to help me. The thing is, since I'm using toArray() to create the fade in and out pins, it makes me unable to use refreshpriority (maybe I'm wrong?). I could just duplicate the code multiple times for each fade in and out section and use refreshpriority, but I think that would be a bad practice, since I could just use the toArray() to help me here and simplify the code. Is there a workaround for this? Sorry if it's a simple answer, but I've looked everywhere and couldn't find much.