Nuxt•6d ago

disabling page transitions between subpages

so, I'm once again on a point where I need help with nuxt 😅 what I have: a website project with simple page transitions structure: index [uid] projects/[uid] what I want: when navigation between project detail pages (project/[uid]) I want to disable page transitions, because I want to move elements custom with gsap flip but all other navigations should keep the simple page transition what have I tried (on project/[uid]):

definePageMeta({
  pageTransition: {
    onAfterLeave: () => {
      handleAfterLeave()
    },
    onAfterEnter: () => {
      handleAfterEnter()
    },
  },
  middleware(to, from) {
    console.log(to, from)
    if (to.name === 'projects-uid' && from.name === 'projects-uid' && to.meta.pageTransition) {
      // this doesn't work really when going back to other pages
      to.meta.pageTransition = false
      // this works better, but still has issues and doesn't work correct on all navigations
      to.meta.pageTransition = { name: '' }
    } else {
      to.meta.pageTransition = { name: 'page' }
    }
  },
})

definePageMeta({
  pageTransition: {
    onAfterLeave: () => {
      handleAfterLeave()
    },
    onAfterEnter: () => {
      handleAfterEnter()
    },
  },
  middleware(to, from) {
    console.log(to, from)
    if (to.name === 'projects-uid' && from.name === 'projects-uid' && to.meta.pageTransition) {
      // this doesn't work really when going back to other pages
      to.meta.pageTransition = false
      // this works better, but still has issues and doesn't work correct on all navigations
      to.meta.pageTransition = { name: '' }
    } else {
      to.meta.pageTransition = { name: 'page' }
    }
  },
})

would love some help

3 Replies

kapa.ai•6d ago

Hi @Jan. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the knowledge sources provided, I can offer some guidance on disabling page transitions between subpages in Nuxt 3. Here's how you can approach this: 1. Global Page Transition: First, ensure you have a global page transition set up in your nuxt.config.ts:

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  }
})

export default defineNuxtConfig({
  app: {
    pageTransition: { name: 'page', mode: 'out-in' }
  }
})

2. Disable Transition for Specific Pages: In your projects/[uid].vue file, you can disable the page transition using definePageMeta:

<script setup>
definePageMeta({
  pageTransition: false
})
</script>

<script setup>
definePageMeta({
  pageTransition: false
})
</script>

This will disable the page transition specifically for the project detail pages. 3. Custom Middleware: To handle the transition between project detail pages, you can create a custom middleware. Create a file named project-transition.ts in your middleware directory:

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.name === 'projects-uid' && from.name === 'projects-uid') {
    to.meta.pageTransition = false
  } else {
    to.meta.pageTransition = { name: 'page', mode: 'out-in' }
  }
})

export default defineNuxtRouteMiddleware((to, from) => {
  if (to.name === 'projects-uid' && from.name === 'projects-uid') {
    to.meta.pageTransition = false
  } else {
    to.meta.pageTransition = { name: 'page', mode: 'out-in' }
  }
})

Then, apply this middleware to your project detail page:

<script setup>
definePageMeta({
  middleware: ['project-transition']
})
</script>

<script setup>
definePageMeta({
  middleware: ['project-transition']
})
</script>

This approach should disable the page transition when navigating between project detail pages, while maintaining the transition for other navigations. For your custom GSAP animations, you can use the JavaScript hooks provided by Nuxt's page transitions. In your projects/[uid].vue file:

<script setup>
definePageMeta({
  pageTransition: {
    onBeforeLeave: (el) => {
      // Your GSAP FLIP setup here
    },
    onEnter: (el, done) => {
      // Your GSAP FLIP animation here
      // Call done() when the animation is complete
    },
    onAfterEnter: (el) => {
      // Any cleanup or final adjustments
    }
  }
})
</script>

<script setup>
definePageMeta({
  pageTransition: {
    onBeforeLeave: (el) => {
      // Your GSAP FLIP setup here
    },
    onEnter: (el, done) => {
      // Your GSAP FLIP animation here
      // Call done() when the animation is complete
    },
    onAfterEnter: (el) => {
      // Any cleanup or final adjustments
    }
  }
})
</script>

These hooks will only run for the project detail pages, allowing you to implement your custom GSAP FLIP animations. Remember that if you're using layout transitions as well, you might need to handle those separately, as mentioned in the Nuxt documentation on transitions (https://nuxt.com/docs/getting-started/transitions). If you encounter any issues with this approach, it might be due to the experimental nature of some transition features in Nuxt 3. In that case, you may need to implement a more custom solution or wait for further updates to the framework. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•6d ago

<@544270766473216019> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

JanOP•6d ago

yeah, this is working when going from home to detail to detail but then when going to home I don't have a transition

Gaming

Programming

disabling page transitions between subpages