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 !

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... ?

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...