destro014 Posted July 30, 2023 Share Posted July 30, 2023 I have 3 rows of horizontal loops with the second one in reverse order. At the first page load, it works perfectly fine. But, when I navigate to another page and get back to the page where the horizontal marquee all the texts are not in the loop. Here is the demo link https://stackblitz.com/edit/nuxt-starter-vnwqlx?file=components%2FMarquee.vue Link to comment Share on other sites More sharing options...
GSAP Helper Posted July 30, 2023 Share Posted July 30, 2023 Hi there! I see you're using Nuxt - Proper animation cleanup is very important with frameworks. In GSAP 3.11, we introduced a new gsap.context() feature that helps make animation cleanup a breeze. All you need to do is wrap your code in a context call. All GSAP animations and ScrollTriggers created within the function get collected up in that context so that you can easily revert() ALL of them at once. Here's the structure: onMounted(() => { ctx = gsap.context((self) => { const boxes = self.selector('.box'); tl = gsap .timeline() .to(boxes[0], { x: 120, rotation: 360 }) .to(boxes[1], { x: -120, rotation: -360 }, '<') .to(boxes[2], { y: -166 }) .reverse(); }, main.value); // <- Scope! }); onUnmounted(() => { ctx.revert(); // <- Easy Cleanup! }); Take a look at the structure in this example and try giving your demo a refactor. If the problem persists then pop back and we'll take a lookhttps://stackblitz.com/edit/nuxt-starter-khrgsj?file=pages%2Findex.vue Link to comment Share on other sites More sharing options...
destro014 Posted July 31, 2023 Author Share Posted July 31, 2023 I did wrap code in a context call, but I am still having a problem with the row that is reversed. Did I miss something? https://stackblitz.com/edit/nuxt-starter-vnwqlx?file=components%2FMarquee.vue Link to comment Share on other sites More sharing options...
Solution Rodrigo Posted July 31, 2023 Solution Share Posted July 31, 2023 Hi @destro014 and welcome to the GreenSock forums! I believe the issue resides in your CSS more than anything else. I created this simple example on Vue3 and works as expected:https://stackblitz.com/edit/vitejs-vite-hyaxkd?file=src%2Fmain.js&terminal=dev Same setup in Nuxt3: https://stackblitz.com/edit/nuxt-starter-9qwh7n Unfortunately your demo has over 1200 lines of CSS and we don't have the time resources to comb through all that trying to find the problem, I'm afraid you'll have to do that. Hopefully this helps. Happy Tweening! Link to comment Share on other sites More sharing options...
destro014 Posted August 1, 2023 Author Share Posted August 1, 2023 12 hours ago, Rodrigo said: Hi @destro014 and welcome to the GreenSock forums! I believe the issue resides in your CSS more than anything else. I created this simple example on Vue3 and works as expected:https://stackblitz.com/edit/vitejs-vite-hyaxkd?file=src%2Fmain.js&terminal=dev Same setup in Nuxt3: https://stackblitz.com/edit/nuxt-starter-9qwh7n Unfortunately your demo has over 1200 lines of CSS and we don't have the time resources to comb through all that trying to find the problem, I'm afraid you'll have to do that. Hopefully this helps. Happy Tweening! Hey @Rodrigo, thanks for helping me out here. I kind of solved the problem by dynamically rendering the words (getting words from script and using for loop) as you did. But when the words are static (hardcoded in the template), it is still the problem. Link to comment Share on other sites More sharing options...
Rodrigo Posted August 1, 2023 Share Posted August 1, 2023 Yeah, I couldn't tell you about that. Hardcoded or dynamically generated it should work in the same way. Maybe use the nextTick method in order to be sure that the DOM is properly rendered before running the GSAP part of your code. Now if generated through an array works, which is not extremely demanding or leads to performance issues, I don't see an issue in keeping it that way: if it ain't broken don't fix it Happy Tweening! 1 Link to comment Share on other sites More sharing options...
Recommended Posts
Create an account or sign in to comment
You need to be a member in order to leave a comment
Create an account
Sign up for a new account in our community. It's easy!
Register a new accountSign in
Already have an account? Sign in here.
Sign In Now