[2631] 'Leave' JS transition hooks not running gsap tweens!

Hi,

We followed Sarah Drasner's tutorial here: https://css-tricks.com/simple-server-side-rendering-routing-page-transitions-nuxt-js/ to introduce us to the power of page transitions! All going great with CSS and the 'enter' related hooks, but we just aren't having any luck running gsap tweens on our 'leave' hooks.

It's all new to me so likely there is an issue in the code but unsure.

I've included a stripped down version of what we're trying to achieve, we're getting output form the console logs but cant get the tweens to run. Exactly the same code on 'before-enter' and 'enter' and we don't have a problem.

Any help much appreciated!

<template>
<div class="container">
	<div class="work">
		<nuxt-link to="contact">
			Our Page content here.
		</nuxt-link>
	</div>
</div>
</template>

<transition 
  @before-enter="beforeEnter"
  @enter="enter"
  @after-enter="afterEnter"
  @enter-cancelled="enterCancelled"

  @before-leave="beforeLeave"
  @leave="leave"
  @after-leave="afterLeave"
  @leave-cancelled="leaveCancelled"
  :css="false">
 
 </transition>
<script>
import { TweenMax, Back } from 'gsap'
export default {
    transition: {
        mode: 'out-in',
        css: false,
        
        beforeLeave (el) {
            console.log("BEFORE LEAVE (INDEX.VUE)");
            TweenMax.set(el, {
                opacity: 0
            })
        },
        leave (el, done) {
            console.log("LEAVE (INDEX.VUE)" );
            TweenMax.to(el, 1, {
                opacity: 1
            })
            done()
        }
    }
}
</script>