Skip to content
New issue

Have a question about this project? # for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “#”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? # to your account

Add custom option for exitTransition #193

Closed
nandorojo opened this issue Apr 29, 2022 · 1 comment
Closed

Add custom option for exitTransition #193

nandorojo opened this issue Apr 29, 2022 · 1 comment

Comments

@nandorojo
Copy link
Owner

nandorojo commented Apr 29, 2022

Currently, we can use the custom prop with AnimatePresence to apply different exit animations based on some state value.

const [pagination] = useState<1 | -1>(1)

return (
  <AnimatePresence custom={pagination}>
    {visible && (
      <MotiView
        exit={(pagination) => {
          'worklet'

          return { translateX: pagination * 10 }
        }}
      />
    )}
  </AnimatePresence>
)

However, we can't use this with exitTransition. It would be nice to do this for exitTransition too:

const [pagination] = useState<1 | -1>(1)

return (
  <AnimatePresence custom={pagination}>
    {visible && (
      <MotiView
        exit={(pagination) => {
          'worklet'

          return { translateX: pagination * 10 }
        }}
        exitTransition={(pagination) => {
          'worklet'

          return { delay: pagination > 1 ? 100 : 400 }
        }}
      />
    )}
  </AnimatePresence>
)
@nandorojo
Copy link
Owner Author

Added in 0.19.x

# for free to join this conversation on GitHub. Already have an account? # to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

1 participant