tomcatbuzz

In my experience Router Guards are to protect routes from unauthorized users. Like if you have an App with Authentication where a user needs to Login and once logged in they have access to pages to Post or make comments. I think your case you could run code in onBeforeLeave but in the Vue 3 Docs onBeforeLeave is run from methods: { onBeforeLeave }. You have it isolated in your code and most likely why Vue is not running it. It shows the code example in the Vue 3 documents. I think you may be confusing page transitions with routing. export default { // ... methods: { // called before the element is inserted into the DOM. // use this to set the "enter-from" state of the element onBeforeEnter(el) {}, // called one frame after the element is inserted. // use this to start the animation. onEnter(el, done) { // call the done callback to indicate transition end // optional if used in combination with CSS done() }, // called when the enter transition has finished. onAfterEnter(el) {}, onEnterCancelled(el) {}, // called before the leave hook. // Most of the time, you shoud just use the leave hook. onBeforeLeave(el) {}, // called when the leave transition starts. // use this to start the leaving animation. onLeave(el, done) { // call the done callback to indicate transition end // optional if used in combination with CSS done() }, // called when the leave transition has finished and the // element has been removed from the DOM. onAfterLeave(el) {}, // only available with v-show transitions leaveCancelled(el) {} } }

I think you problem is more of Vue problem than GSAP. If you have a Button "Enter" and want to reverse the Animation before going to the next page. You could simple create a eventlistener on that Button run the tl.reverse and onComplete run nav to the page you want. It is far more simple than trying to complicate routing. With Vue you can create your custom transitions or use routing methods as Detailed in their Docs. With Gsap you create any of the animations. I added a regular tween example from a Vue project and you can insert your timeline or reference the timeline and call tl.reverse() document.querySelector('#button') .addEventListener('click', (e) => { e.preventDefault() gsap.to('#app', { opacity: 0 }) gsap.to(camera.position, { z: 25, ease: 'power1.inOut', duration: 2 }) gsap.to(camera.rotation, { x: 1.57, ease: 'power1.inOut', duration: 2 }) gsap.to(camera.position, { y: 1000, ease: 'power1.in', duration: 1, delay: 1.5, onComplete: () => { this.$router.push('/page') } }) })

You need to check the Vue3 Docs for Route Transitions. You can create a Leave Transition as a function and place it in methods: { here }. And use the Javascript hooks it shows at the bottom of the page ---> onBeforeLeave: function (el) { your code here for the leave transition}. You could just build your reverse animation there and it will run when you leave the page. https://vuejs.org/guide/built-ins/transition.html#javascript-hooks