Jump to content


Nuxt GSAP transition top to bottom with opacity

Recommended Posts

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

  • Like 1
Link to comment
Share on other sites



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




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



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:




Let us know if you have more questions.


Happy Tweening!

  • Like 1
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.