nuxt.jsvuejs3gsappinianuxt3.js

GSAP master-timeline not working correctly when shared via Pinia in Vue/Nuxt


I'm relatively new to Vue and GSAP, and I'm running into a problem that I'm not sure is related to Vue or GSAP. I have created a simplified example on StackBlitz to demonstrate the problem: example.

Master timeline -> stores/AnimationStore.ts
Usage & Child timeline -> app.vue


Here is the problem I'm facing: I'm trying to share a GSAP timeline called master via Pinia in my Nuxt 3 project. Components in the project can create their own child timelines and add them to the master timeline. In the example, the child timeline is correctly added to the master timeline, but when I play the master timeline, it just starts (console.log('Master started')), but doesn't update or finish. Also, the child timeline doesn't run.

I would appreciate any guidance or suggestions on how to solve this issue. Thanks in advance for your help!


Solution

  • in your stores/AnimationStore.ts change reactive to shallowRef