Gsap page async transitions

[esseifforte]

Hello, thanks for sharing!
since there are not so many exhaustive resources online, I'm studying your site to create my own boilerplate.
I wanted to understand first how to create a link (page2) from the menu with 'nuxtlink' and be able to recreate the async overlay drop-down effect or any other animation (first complete the output animation then enter the preloaded page2, barba.js alike:)
Thank you in advance Bogdan

Essei

[logotip4ik]

Hello!

Nuxt is smart and it tries it's best to figure out itself what to preload, prefetch and that not to.

Nuxt already automatically preloads the necessary routes if you're using the NuxtLink component. - https://nuxt.com/docs/api/utils/preload-route-components#preloadcomponents

... It (NuxtLInk) intelligently determines whether the link is internal or external and renders it accordingly with available optimizations (prefetching, default attributes, etc.) - https://nuxt.com/docs/api/components/nuxt-link#nuxtlink

But for more control it exposes some useful functions to preload components or entire pages Also if you want to do async fetching or computation, you can use useFetch or useAsyncData, they will block the navigation for enter animation but not for leave. So the show page animation will be shown only after page is fully loaded.

My site uses different async approach, because of issues with smooth scroll (locomotive scroll at time writing) and images. The page was jumping around when new image was loaded. You probably can preload images in useAsyncData with Promise.all and this approach is probably easier to build compared with what i have currently. But i fixed these issues with simple wait for images to load, then update the smooth scroll and then show enter animation.

In project page component you can see that in onMounted callback we use imagesLoaded function to wait for images to load and then emit event called images:loaded. Before that, in enter page animation we define our event listener which waits exactly for that event and only then plays the enter page animation and updates the smooth scroll.

Each way, useAsyncData and events, has it's pros and cons, i would recommed to start with useAsyncData and then if you rely on some data that can't be defined or accessed in async data, try to implement this trick with event listener in enter animation.

Hope it helps! and sorry for so long reply 😅

[esseifforte]

Hello!
and thank you for your comprehensive reply.
Now I see to study everything. :)
In the meantime I wanted to recreate a scenario with overlay menu (play & reverse) like www.discoveroutpost.com combined with other transitions situations such as the link on the logo (to homepage).
I had to create a pageTransitions.js file and then call it in every .vue page inside definePageMeta, it works, but I don't think it's the best solution because I haven't complete control on all.
I really liked your 'enterPageAnim' and leavePageAnim approach, but either it gave me error or it didn't work at all.

ps.
My intent then would be to be able to recreate more animations and transitions, some as I just told you, some similar to Barba.js (for example by clicking on an image and we are always on the same image but already on the new page).

thanks for now, I really appreciate it ;)
best wishes

[logotip4ik]

Never heard of that website, but animations are awesome!

That website inspired me to try replicate that transition. https://github.com/logotip4ik/outpost-route-animations - here is a repo. It works the best on phones, but if you play a bit more with image size it could be perfected even on big screens. Also in development you can notice how image and route changes, but not when the project is generated and just serving as static files.

I think that the main trick in that website is not sharing the component (image in our case) but rather imitating that. But if you wanna truly share the component, you can checkout vue-starport library by antfu.

Feel free to question and All the best!

[esseifforte]

wow!
very cool!! I'll study it!!!

my 2 questions:

1. I had to create a pageTransitions.js file and then call it in every .vue page inside definePageMeta, it works, but I don't think it's the best solution because I haven't complete control on all.
   I really liked your 'enterPageAnim' and leavePageAnim approach, but either it gave me error or it didn't work at all.
   I'm in the wrong solution?

2. I created scrolltrigger animations on App.Vue, but I noticed that when changing pages they do not work (only if I refresh). I tried to do this:

onMounted(() => {
  const revealAnimation = 
    gsap.utils.toArray('.js-parallax').forEach(wrap => {
      const y = wrap.getAttribute('data-y') || -100;
        gsap.to(wrap, {
          y: y,    
          scrollTrigger: {
            trigger: wrap,
            start: 'top bottom',
            end: 'bottom top',
            scrub: 0.5,
            //markers: true
          }
        })
    });

  onBeforeUnmount(() => {
    revealAnimation.kill();
  });
})

doesn't work :) sorry for the time I make you lose. You are very inspiring. thank you

[logotip4ik]

I had to create a pageTransitions.js file and then call it in every .vue page inside definePageMeta, it works, but I don't think it's the best solution because I haven't complete control on all.
I really liked your 'enterPageAnim' and leavePageAnim approach, but either it gave me error or it didn't work at all.
I'm in the wrong solution?

I am not an expert so i can't answer with certainty. If your website uses entirely different animations for each page then yes, probably that would be the best answer, But i would try to find some similarities and do that main animation for all your pages. Then if you want to customize transition for certain pages, you can utilize gsap by calling a callback animation or entirely different timeline, the main difficulty here is that callback should be defined before the main page leave or enter animations (adding callback animation before main animation). In my outpost-route-animations repo we are using the second variant (adding animation callback to main animation). And the www.discoveroutpost.com also have the main page animation with overlay hiding page from bottom to top and then reviling in the same way, also they have customizations, like if you click on work link with, then the image will be scaled up with leave animation and then scaled down with enter animation.

---

I created scrolltrigger animations on App.Vue, but I noticed that when changing pages they do not work (only if I refresh). I tried to do this:

That works as expected actually. app.vue is entry point to you website, so everything you put there will be global and executed only once. Also

  onBeforeUnmount(() => {
    revealAnimation.kill();
  });

this line wouldn't work, because your revealAnimation is not a animation it's an array with html elements, use map and return gsap animation, then use forEach to go through and kill everything. I guess in order to do what you want, you need to watch a route change and then recreate the revealAnimation because of new elements that are present on a new page.