Horizontal Loop with reversed true doesn't work properly after revisiting the page second time (Nuxt js)

[destro014]

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

 

 

[GSAP Helper]

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 look

https://stackblitz.com/edit/nuxt-starter-khrgsj?file=pages%2Findex.vue

[destro014]

 

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

 

 

[Rodrigo]

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!

[destro014]

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. 
 

[Rodrigo]

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!