Home

Hi, Is it possible to check to and from inside a transition object? I want to use different transitions depending on where the user came from and are going.

What is the suggested way of doing this? Can I keep all my transitions in some folder and export/import them, using the transition function to check which one to use?

This is a transition i’m using inside one of my page components:

  transition: {
    mode: 'out-in',
    css: false,
    enter (el, done) {
      let tl = new TimelineMax
      let SplitLines = new SplitText('.js-lines', {type: "words" })
      let lines = SplitLines.words
      TweenMax.set('.js-lines', { perspective: 800 })

      function kill () {
        SplitLines.revert()
        done()
      }

      tl.staggerFrom(lines, 1.5, {
        opacity:  0,
        yPercent: 50,
        scale: 0.85,
        rotationX: -90,
        transformOrigin: "center bottom",
        ease: Expo.easeOut
      }, 0.075, "+=0", kill)
    },
    leave (el, done) {
      TweenMax.to(el, 0.5, { autoAlpha: 0, onComplete: done })
    }
  }

Would something like this be possible?

export const fromPageOne = {
  mode: 'out-in',
  css: false,
  enter () {
    console.log('from page one')
    done()
  }
}

export const fromPageTwo = {
  mode: 'out-in',
  css: false,
  enter () {
    console.log('from page two')
    done()
  }
}

export const toPagOne = {
  mode: 'out-in',
  css: false,
  leave () {
    console.log('to page one')
    done()
  }
}

export const toPageTwo = {
  mode: 'out-in',
  css: false,
  leave () {
    console.log('to page two')
    done()
  }
}

then in the page component:

transition (to, from) {
  return from.name == 'index' ? fromPageOne : fromPageTwo
  return to.name == 'index' ? toPageOne : toPageTwo
}