Marquee Border implementation issues with Vue SSG

[a-rossman0825]

After days of work and teamwork with my FE friends, we built this marquee "border" that moves a copied phrase clockwise around the border of a div. We hoped to implement it in our current project, but moving it from codepen ->  a static vue/Nuxt SSG site (with typescript) has proven too much to handle. Our implementation isn't even rendering the text in their correct starting positions (see image, text is not animating, either). I assume I'm missing something with load/Mount timing, but I have yet to find a solution. If anyone has any tips for implementing/debugging similar GSAP animations into a vue static/nuxt ssg project, I am all ears. Thank you so much for your time! - A struggling junior FS dev

See the Pen JoKNgdp by arossman0825 (@arossman0825) on CodePen.

[Rodrigo]

Hi,

 

You could try using nextTick inside the onMount lifecycle handler in order to be sure that the DOM is properly rendered before creating and running the animation:

https://vuejs.org/api/general.html#nexttick

onMount(async () => {
  await nextTick();
  
  // Create your GSAP animations here
});

Also we always recommend using GSAP Context in frameworks to simplify the cleanup phase and be sure that all the animations are completely reverted when the component is unmounted or the route changes:

import gsap from "gsap";

let ctx;

onMount(async () => {
  await nextTick();
  
  ctx = gsap.context(() => {
    // Create all your GSAP animations here
  });
});

onUnmount(() => {
  ctx && ctx.revert(); // cleanup, revert all the GSAP animations
});

Also I'm curious to know if you can see any errors or warnings in the devtools console currently, those could give you an idea of what could be the problem.

 

Finally we have collections of starter demos for Nuxt/Vue on stackblitz so you can check out the pattern I posted above:

https://stackblitz.com/@gsap-dev/collections/gsap-vue3-starters

https://stackblitz.com/@gsap-dev/collections/gsap-nuxtjs-starters

 

If possible create a minimal demo in Nuxt that clearly demonstrates the problem you're having.

 

Hopefully this helps

Happy Tweening!