VueJS Transitions page

Bonjour,

Actuellement en plein apprentissage de VueJS, j'ai pour but de créer des single page applications axées interactions entre les différentes pages / composants.
Pour ces interactions je souhaite utiliser la librairie javascript Greensock.

Pour faire quelques tests je me suis créer un projet comportant 3 pages: Home, Projects, About. J'ai mis en place une nav en haut de page pour naviguer entre ces différents pages.
Pour ne pas avoir de rechargement entre les pages au moment de la navigation, j'ai utilisé le router de VueJS. Le tout fonctionne correctement.

src/App.vue

<template>
  <div id="app">
    <nav class="Nav">
      <router-link to="/" class="Nav_item">Home</router-link>
      <router-link to="/projects" class="Nav_item">Projects</router-link>
      <router-link to="/about" class="Nav_item">About</router-link>
    </nav>
    <div class="Wrapper">
      <router-view></router-view>
    </div>
  </div>
</template>

src/main.js

Vue.use(VueRouter)

const router = new VueRouter({
  mode: 'history',
  routes: [{
    path: '/',
    component: require('./components/Hello.vue')
  }, {
    path: '/projects',
    component: require('./components/Projects.vue')
  }, 
    path: '/about',
    component: require('./components/About.vue')
  }, {
    path: '*',
    redirect: '/'
  }]
})

J'aimerais reproduire un comportement de ce style lors de la navigation:
J'ai vu sur la documention de VueJS qu'il était possible de cibler différents états du composant ( v-enter / v-enter-active / v-leave ...) pour appliquer des méthodes particulières d'animation.

J'ai éssayé plusieurs choses sans résultats et j'avoue avoir un peu de mal à saisir ou je dois écrire ce code pour avoir le rendu désiré.

J'espère avoir été assez clair.

Merci d'avance. :)