[Execute timeline GSAP before the page change with vuejs]

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 !

[GSAP timeline with ScrollTrigger not working correctly. Set duration has no effect]

Thank you for your answer !

 

I read the document Common ScrollTrigger Mistakes, I follow your recommandation and I tried without timeline, but I have the same problem :

 

import ScrollTrigger from './ScrollTrigger'

gsap.registerPlugin(ScrollTrigger)

//const tl1 = gsap.timeline();

gsap.to('.cube.red', {
    duration:2, y:100, ease:"linear",
    scrollTrigger: {
        trigger:"#intro",
        //scrub:0,
    }
})

gsap.to('.cube.blue', {
    duration:1, y:100, ease:"linear",
    scrollTrigger: {
        trigger:"#intro",
        //scrub:0,
    }
})

 

When I comment scrub:0 I show the correct animation, with duration. But I can control with the scroll. If I uncomment scrub:0, I can use the scroll, but I lost the duration... 😕

[GSAP timeline with ScrollTrigger not working correctly. Set duration has no effect]

I use GSAP 3.6.0 and I would like to know how can I create a duration on my elements.

 

I have two cube, red and blue :

    import gsap from './gsap'
    import ScrollTrigger from './ScrollTrigger'

    gsap.registerPlugin(ScrollTrigger)

    const tl1 = gsap.timeline();

    tl1.to('.cube.red', {
        duration:2, y:100, ease:"linear",
        scrollTrigger: {
            trigger:"#intro",
            markers:true,
            start: "0",
            pin: "#intro",
            //end: '+=1',
            scrub:0,
        }
    })

    tl1.to('.cube.blue', {
        duration:1, y:100, ease:"linear",
        scrollTrigger: {
            trigger:"#intro",
            markers:true,
            start: "0",
            pin: "#intro",
            //end: '+=4',
            scrub:0,
        }
    })

When I scroll, the red cube and the blue cube move together. But I set a different duration.
The red cube has a duration equal 2, and the blue cube has a duration equal 1.

When I scroll, the red cube must move less quickly, but the two cubes move at the same speed...