jandorn

I've got a scrollTrigger animation working that breaks as soon as I switch the tabs inside my tabs vue component. That component is based on the vue port of the UI library shadcn ui that is built on top of radix ui. The project is built using Astro and I use the Astro island architecture to make certain (vue) components interactive. Here is the stackblitz I created that shows the issue: https://stackblitz.com/edit/gasp-problem?file=src%2Fanimations%2FscrollTrigger%2Fpinning.astro The 4 relevant files are: @/pages/index.astro (importing Card component and animation) @/components/AnimationCard.vue (building card using shadcn ui, receives animation through a slot element) @/animations/scrollTrigger/pinning.astro and @/animations/scrollTrigger/pinning.vue (where the GSAP animation is defined) In this example there are shown 2 different Card components. One that implements the GSAP animation within an astro component and one within a vue component. Both work just perfectly fine upon initial page load but both break differently when I change to the code tab within the card and back to the animation. It's very odd that it doesn't even break conistently. The astro animation would just not play at all and freeze. The vue animation seems to get the start and end state of the animation right but the animation itself is all over the place. In very few instances it even seemed to work fine after changing tabs. I can't figure out where exactly the problem lies and I've tried a couple of different approaches that didn't work. I've tried resetting the animation upon tab change using the watchEffect callback function and also setting clearProps to "all" (not entirely sure what that does exactly as I couldn't find proper docs for that). clearProps made the animation reappear but it's still broken. I would be really grateful if someone could give me ideas about what the issue could be so I know where to look at. I'm new to gsap and am struggling to figure this one out. Thanks a lot Jan