Execute timeline GSAP before the page change with vuejs

[DenisLeclair]

Hi,

 

I would like to know how can I execute a timeline just before the page change.

 

For example, when I navigate (click on About page) I have a basic component. When I mount my component, I have an effect on title :

 

<template>
  <div class="container">
    <h1 class="title">Test</h1>
  </div>
</template>

<script>
import gsap from 'gsap'

export default {
  mounted() {
    const tl = gsap.timeline()

    tl.from('.title', { y: 20, opacity: 0, ease: 'linear' })
  },

  destroyed() {
    const tl2 = gsap.timeline()

    tl2.to('.title', { duration: 10, scale: 2, ease: 'linear' })
  },
}
</script>

<style>

</style>

 

When I change my page with vue-router (click on other link, "/"), my component (about) is destroyed and I want to play the timeline before the change of page (before the destroy).

 

I try to include a second timeline in destroyed (and beforeDestroy) function, but the page change directly without the animation of timeline (tl2).

 

I would like to wait (10 seconds) that my title has a scale on 2, and after change the page. I would like to execute a function before the change of route.

 

Thank you for your help !

[ZachSaucier]

Hey Denis. You should be able to hook up an animation in the before-leave hook. If you need help debugging it'd be good to create a minimal demo of your situation using CodePen.