Tweening fromTo progress only works once in Nuxt 3

[m__shum]

Hi all, 
I've got a Nuxt 3 project with a fromTo tween. I need to be able to control its progress using gsap.to. Easy peasy, right?
Well, not quite. While this is a simple operation in vanilla JS (see codepen), in Nuxt 3 it appears to only work in one direction – it tweens the progress to 1, but not back to 0.

Here's a url for the minimal Nuxt 3 stackblitz reproduction: https://stackblitz.com/edit/github-vfgcdf?file=app.vue
Oddly enough I can't get this tween to run in it at all.

Using gsap.set() works both ways, but that's obviously not going to work since I want to be control the ease and duration. I have also tried skipping the existing tween entirely and controlling the opacity "from scratch" using gsap.to(${target}, {opacity: 1, duration: whatever}) but that doesn't work either. Again, gsap.set() works to set both the tween's progress and the opacity itself.

For context: I'm using fromTo because as well as tweening opacity over a certain duration, I want to be able to tween it on scroll so it fades as you scroll out, and fades as you scroll back in at the same speed as you scroll. I did consider ScrollTrigger, however ScrollTrigger seems like overkill for this AND I want to be able to tween opacity on more than just scroll. I have a header that fades in and out on scroll but only on certain pages, and I want to fade it back to full opacity on route change.

EDIT: I have played around some more and assigned the timeline to a non-reactive variable (instead of using Vue's refs) and... it works! (See reproduction here: https://stackblitz.com/edit/github-vfgcdf-kx2x5z?file=app.vue) But why?

See the Pen WNWaqJM by m-shum (@m-shum) on CodePen

[GreenSock]

This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷‍♂️

 

From what I can tell, the solution would be to use a shallowRef() instead of ref():

https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue

 

Does that clear things up?

[m__shum]

22 hours ago, GreenSock said:

This appears to be funky behavior caused by Vue forcing refs to be Proxy objects. So when you access ref.value, it isn't the real object at all! It's a Proxy which alters what "this" refers to inside method calls. I think it's terrible that Vue does this actually, but maybe they have good reason for it. 🤷‍♂️

 

From what I can tell, the solution would be to use a shallowRef() instead of ref():

https://stackblitz.com/edit/github-vfgcdf-g52l6b?file=app.vue

 

Does that clear things up?

Yeah I'm not a huge fan of the way refs work in Vue 3 but what can you do. For the time being I simply declared the timeline as a non-reactive variable because I don't need to watch its changes. It definitely caught me out because I'm still thinking in Nuxt 2 mode, where if you wanted to access any variable, you had to declare it in data().