How to animate twice properly before moving page ? or in "exiting" status

[dellwatson]

Because using gatsby link, the direct page would be instant, and i want to do some animation on page before the page moving, but it seems the animation doesnt do properly. i tried 2 methods. i wanted slide transition twice ( go left full then close to right) like https://fitlab.nl when moving between pages from drawer. on both version, i didnt put any entry/exit

const SpringLink = ({ to, children, style }) => (
    <TransitionLink to={ to } style={ style } >
        { children }
    </TransitionLink>
)

and later i place <MySpring /> on top of the Layout for a wrapper of every pages. in the first try, i animate with "entering" mode, but it move the page first before even the animation begin, but the animation did complete full (move to the left first, then return to the right.)

const MySpring = ({ children }) => {
    const { transitionStatus } = useTransitionState();
    const props = useSpring({
        height: '100vh',
        width: '130vw',
        backgroundColor: 'white',
        transform: `translateX(${transitionStatus === 'entering' ? "-10vw" : '110vw'})`,
        position: 'fixed',
        config: config.slow
    });

    return (
        <TransitionPortal>
            <animated.div style={ props } />
        </TransitionPortal>
    )
}

the 2nd try, i animate with "exiting", the animation execute before the moving page but didnt go full animation like the first version, surely because the exiting is interrupted with "entering" later, it somehow do quick move just slide to the right, without animating to the left first, while i want like the top, translate to left and then to the right.

const MySpring = (props) => {
    const { transitionStatus } = useTransitionState();

    const style = useSpring({
        height: '100vh',
        width: '130vw',
        backgroundColor: 'white',
        transform: `translateX(${transitionStatus === 'exited' ? "-10vw" : '110vw'})`, //klo entering tutup(110) , klo exiting -10
        position: 'fixed',
        config: { duration: 2000 }
    });

    return (
        <TransitionPortal>
            <animated.div style={ style } />
        </TransitionPortal>
    )
}

I have tried to setup the delay/length in the exit, but it seems none caught my understanding.

[hellofantastic]

Hey @dellwatson , to try and help you along

First thing , if you want the page you are leaving to hang around for the animation you want to add entry prop delay on the transition link like

 <TransitionLink 
       state={{ pageTitle: "Home"}}
       activeClassName="active"
       to={'/'} 
       exit={{
            length: 1.2,
            trigger: ({ exit }) => verticalAnimation(exit, 'up'),
       }}
      entry={{ delay: 2 }}
      >
        Home
      </TransitionLink>

Then make sure your animation ( mine is defined in verticalAnimation using gsap) doesn't take more than delay time