Create only exit animation

[alejuu]

Hi @TylerBarnes, first of all, thank you for creating this plugin! This is not an issue is a question. I'm using React spring to create transition animations; there's a component that lives only on the index page; when I navigate from another page to the index I can see the animation, but when I leave the index, I can't see anything. I think this happens because this component doesn't exist in the other page. How can I create an exit animation? I don't want to include this component in the other page.

This is the animation:

const OpacityTransitionSpring = ({ children, className }) => (
  <TransitionState>
    {({ mount, current, exit }) => {
      const ms = current.length * 1000
      return (
        <Spring
          to={{ 
            opacity: mount ? 1 : 0
          }}
          config={{ 
            duration: ms 
          }}
        >
          {props => <div className={className} style={props}>{children}</div>}
        </Spring>
      )
    }}
  </TransitionState>
)
const TransitionSpringLink= ({ to, className, children }) => (
  <TransitionLink 
    to={to} 
    className={className} 
    exit={{ length: 3 }} 
    entry={{ length: 3 }}
  >
    {children}
  </TransitionLink>
)

[TylerBarnes]

Hi @alejuu , any chance you could create a reproduction repo I can check out? That would help me understand what's going on :)

[alejuu]

Hi @TylerBarnes, Of course, this is the repo https://github.com/alejuu/alejuu-Portfolio, and these are the transition components that are included (https://github.com/alejuu/alejuu-Portfolio/blob/master/src/components/Animations/Springs.js) in the index page (https://github.com/alejuu/alejuu-Portfolio/blob/master/src/pages/index.js) and work page (https://github.com/alejuu/alejuu-Portfolio/blob/master/src/pages/work.js). Also, you can check the build here https://alejuu.netlify.app/. What I want to create is an exit transition animation for the circle containing the A, this element only exists on the index page. Also, when you click on work, you can see the elements disappear and after the work page loads, you can see the elements appear with the animation. I want to add an exit animation to this elements too (these elements exist on both pages).

[alejuu]

Hi @TylerBarnes, do you have any updates? Thanks!