Nuxt•2y ago

How to get transition config from an external object

I have the following Script section in a component used as a page

<script setup>
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const defaultTransition = { name: 'default', mode: 'out-in' }

const gsapTransition = {
  name: 'cover',
  mode: 'out-in',
  onEnter: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '0vh',
        top: '100vh',
      })
      .set('#transition-cover', {
        top: '0vh',
      })
  },

  onLeave: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '100vh',
      })
  },
}

definePageMeta({
  pageTransition: gsapTransition,
})

</script>

<script setup>
import gsap from 'gsap'
import { ScrollTrigger } from 'gsap/ScrollTrigger'
gsap.registerPlugin(ScrollTrigger)

const defaultTransition = { name: 'default', mode: 'out-in' }

const gsapTransition = {
  name: 'cover',
  mode: 'out-in',
  onEnter: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '0vh',
        top: '100vh',
      })
      .set('#transition-cover', {
        top: '0vh',
      })
  },

  onLeave: (el, done) => {
    gsap
      .timeline({
        defaults: {
          duration: 0.75,
        },
        onComplete: done,
      })
      .to('#transition-cover', {
        height: '100vh',
      })
  },
}

definePageMeta({
  pageTransition: gsapTransition,
})

</script>

I get a 500 error gsapTransition is not defined, and the same happens if I try to use defaulTransition. I need to store the configuration to an external object, but looks like I am doing something wrong. How can I solve this?

1 Reply

Stefano BartolettiOP•2y ago

Some clues about this? Is it possible to use an external variable inside definePageMeta?

Gaming

Programming

How to get transition config from an external object