Simple route slide transition in Vue 3 project

[Desmondinho]

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

[Rodrigo]

Hi Daniel and welcome to the GreenSock forums.

 

To move both elements at the same time you have to remove the mode attribute in the transition component:

<router-view v-slot="{ Component }">
  <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
    <component :is="Component" class="component-wrapper"></component>
  </transition>
</router-view>

Although you have to be aware that this will require some tinkering with the styles since both elements will be in the document flow at the same time, so you'll have to play with their positions while the animation is running.

 

Happy Tweening!!!

[Desmondinho]

22 minutes ago, Rodrigo said:

Hi Daniel and welcome to the GreenSock forums.

 

To move both elements at the same time you have to remove the mode attribute in the transition component:

<router-view v-slot="{ Component }">
  <transition @before-enter="beforeEnter" @enter="enter" @before-leave="beforeLeave" @leave="leave">
    <component :is="Component" class="component-wrapper"></component>
  </transition>
</router-view>

Although you have to be aware that this will require some tinkering with the styles since both elements will be in the document flow at the same time, so you'll have to play with their positions while the animation is running.

 

Happy Tweening!!!

 

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?

[Rodrigo]

I don't know if it's a trick or perhaps a subpixel rendering issue, if subpixel rendering is still something that happens. It used to cause a few headaches years ago.

 

Can you provide a reduced sample in codesandbox that we can take a look at?

 

Also if your elements' height is equal to the screen height you could try with yPercent, perhaps using vh could be causing an issue. Also try using the SnapPlugin to modify the values by an integer or a single decimal and avoid long decimal numbers:

 

https://greensock.com/docs/v3/GSAP/CorePlugins/SnapPlugin

 

Happy Tweening!!!

[Desmondinho]

2 hours ago, Rodrigo said:

I don't know if it's a trick or perhaps a subpixel rendering issue, if subpixel rendering is still something that happens. It used to cause a few headaches years ago.

 

Can you provide a reduced sample in codesandbox that we can take a look at?

 

Also if your elements' height is equal to the screen height you could try with yPercent, perhaps using vh could be causing an issue. Also try using the SnapPlugin to modify the values by an integer or a single decimal and avoid long decimal numbers:

 

https://greensock.com/docs/v3/GSAP/CorePlugins/SnapPlugin

 

Happy Tweening!!!

 

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?

[Rodrigo]

Hi,

 

Unfortunately without a live, reduced and editable sample, there is not much I can do at least. Instead of using el.style.transform = 'translateY(0)'; use a set() method and see if that works:

const beforeEnter = (el) => {
  gsap.set(el, { yPercent: -100 });
};

const beforeLeave = (el) => {
  gsap.set(el, { yPercent: 0 });
};

Other than that, the only solution I can provide is to match the horizontal gradient of the elements in the background, or apply that gradient in the background and make the elements transparent. The latter will not produce this line.

 

Happy Tweening!!!

[Desmondinho]

8 hours ago, Rodrigo said:

Hi,

 

Unfortunately without a live, reduced and editable sample, there is not much I can do at least. Instead of using el.style.transform = 'translateY(0)'; use a set() method and see if that works:

const beforeEnter = (el) => {
  gsap.set(el, { yPercent: -100 });
};

const beforeLeave = (el) => {
  gsap.set(el, { yPercent: 0 });
};

Other than that, the only solution I can provide is to match the horizontal gradient of the elements in the background, or apply that gradient in the background and make the elements transparent. The latter will not produce this line.

 

Happy Tweening!!!

 

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