Nuxt GSAP transition top to bottom with opacity

[JaneDoe92]

Hi guys, I attach a codesandbox with the result I would like to achieve with gsap (but smoother).

https://codesandbox.io/p/sandbox/charming-leaf-o1w7xb?file=%2Fpages%2Findex.vue&selection=[{"endColumn"%3A1%2C"endLineNumber"%3A57%2C"startColumn"%3A1%2C"startLineNumber"%3A1}]&workspace=%7B%22activeFileId%22%3A%22cl9zkslmo000hlsgzg75u0gum%22%2C%22openFiles%22%3A%5B%22%2Fpages%2Findex.vue%22%5D%2C%22sidebarPanel%22%3A%22EXPLORER%22%2C%22gitSidebarPanel%22%3A%22COMMIT%22%2C%22spaces%22%3A%7B%22clbdl1aza00103b6g4eqbzi2v%22%3A%7B%22key%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22name%22%3A%22Default%22%2C%22devtools%22%3A%5B%7B%22type%22%3A%22PREVIEW%22%2C%22taskId%22%3A%22dev%22%2C%22port%22%3A3000%2C%22key%22%3A%22clbdl1aza00113b6gctyx602v%22%2C%22isMinimized%22%3Afalse%7D%5D%7D%7D%2C%22currentSpace%22%3A%22clbdl1aza00103b6g4eqbzi2v%22%2C%22spacesOrder%22%3A%5B%22clbdl1aza00103b6g4eqbzi2v%22%5D%7D
is it possible to apply this type of animation to the transition component?
What I would like to achieve is an animation that comes from top to bottom and with a fade-in effect (I'm using @nuxt/gsap). 
Thanks to anyone who can help me!

[mvaneijgen]

What have you tried already? We have a Nuxt starter template with GSAP installed https://codesandbox.io/s/gsap-nuxt-starter-r5lkg  

 

As far as I know you need to disable the CSS transitions in vue and break them all out to the Javascript hooks and in there run your GSAP code https://vuejs.org/guide/built-ins/transition.html#javascript-hooks

[Rodrigo]

Hi,

 

As @mvaneijgen mentions is just about tinkering a bit with the transition JS hooks that Vue has. Here is a fork of your example:

 

https://stackblitz.com/edit/nuxt-starter-vsqjzu?file=nuxt.config.js,pages%2Findex.vue

 

Here is the same example in a Nuxt3 (3.0.0 stable) setup:

https://stackblitz.com/edit/nuxt-starter-ht1ha6?file=nuxt.config.ts,app.vue

 

Is worth mentioning though that at the moment there is a pending issue regarding the appear flag in Vue's Transition component (Version 3 of Vue and hence of Nuxt) when used in Server Side Rendering, so that might require a bit of tinkering in order to make it work. Since your example uses Nuxt2 (Vue2) that issue won't happen there, so if you stay with that configuration you're safe.

 

Just in case keep an eye on these issues on Github:

https://github.com/nuxt/framework/issues/6962

https://github.com/vuejs/core/issues/6951

 

Let us know if you have more questions.

 

Happy Tweening!

[JaneDoe92]

Hi @mvaneijgen @Rodrigo, and thanks for the replies.

In the end I managed to achieve the desired result with the vue hooks.

Thanks again!