Desmondinho

Ehh, nothing works.. or I miss something I am trying to find a solution for almost 2 days and now I just want to keep top property for moving elements. Thank you for your help anyway! Also, I am wondering if there is the way to reverse my animations when I, let's say, clicking on a button or being on a specific route? UPD: Yes, found a way using css animations + route.meta on entering-leaving active classes

Unfortunately, I can't provide a sample but I can provide the setup function of my App.vue and the screen of "mysterious pixel" setup() { const beforeEnter = (el) => { console.log('before enter'); el.style.transform = 'translateY(-100%)'; // el.style.top = '-100%'; }; const enter = (el) => { console.log('enter'); gsap.to(el, { duration: 20, opacity: 1, yPercent: 100, // top: '0', ease: 'power2.inOut', }); }; const beforeLeave = (el) => { console.log('before leave'); el.style.transform = 'translateY(0)'; // el.style.top = '0%'; }; const leave = (el, done) => { console.log('leave'); gsap.to(el, { duration: 20, opacity: 1, yPercent: 200, // top: '100%', ease: 'power2.inOut', onComplete: done, }); }; return { beforeEnter, enter, beforeLeave, leave }; } 1.jpg shows how this line looks like; here I used translateY 2.jpg shows that there is no line between; here I used top Any ideas?

Thank you for your reply! Everything works fine now but I have found one strange thing. If using translateY, a 1px white line between contents occurs, while using top - it does not. What's the trick?

Hello Forum, I am new to GSAP and Vue and I am trying to achieve transition like this: https://tympanus.net/Development/PageTransitions/ -> Choose a transition -> Move -> Move to Bottom/From Top using GSAP in Vue 3 project. <router-view v-slot="{ Component }"> <transition mode="out-in" @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave"> <component :is="Component" class="component-wrapper"></component> </transition> </router-view> setup() { const beforeEnter = (el) => { console.log('before enter'); el.style.transform = 'translateY(-100vh)'; }; const enter = (el) => { console.log('enter'); gsap.to(el, { duration: 1, opacity: 1, translateY: '0vh', ease: 'power1.inOut', }); }; const beforeLeave = (el) => { console.log('before leave'); el.style.transform = 'translateY(0vh)'; }; const leave = (el, done) => { console.log('leave'); gsap.to(el, { duration: 1, opacity: 1, translateY: '100vh', ease: 'power1.inOut', onComplete: done, }); }; return { beforeEnter, enter, beforeLeave, leave }; } With this code I get almost what I want to achieve, which is: before leaving - leaving: the entire content of the current route moves to bottom from top; As mode property in the transition tag is set to "out-in", I see the white page during transition stages mentioned above before entering - entering: the entire content of the new current route moves to bottom from top; The problem is that the next router content should move synchronously without waiting until the leaving of previous content completes. So mode property should not be set at all (I guess) But removing it leads to transition mix because I don't know exactly what should I change in the hooks methods. Hope you got the idea of what I am trying to do. Best regards, Daniel