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

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. 
 

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

 

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

 

 

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

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