React Animate Leaving Elements

[cakir-enes]

I guess framer-motion exists with its AnimatePresence support, but I prefer the imperative API of the motion-one. Is there any way to animate elements while they are leaving?

useEffect(() => {
  animate(ref, ...)
  return () => { animate(ref, ...) }
}, [])

So this doesn't work (as expected even though its called react doesn't wait for animation to finish before removing the element)

Is there any way to achieve this? (Im trying to animate elements as they enter and leave a list)

[mattgperry]

Yeah, this is actually possible with AnimatePresence itself and the usePresence hook.

<AnimatePresence>
  {isVisible && <MyComponent />}
</AnimatePresence>

function MyComponent() {
  const ref= useRef(null)
  const [isPresent, safeToRemove] = usePresence()
  
  useEffect(() => {
    animate(ref.current, { opacity: isPresent ? 1 : 0 }).finished.then(safeToRemove)
  }, [isPresent])

  return <div ref={ref} />
}

[cakir-enes]

Thanks, I guess lazy importing with <LazyMotion strict features={domAnimation}> wouldn't impact bundle size that much. Also there is no support for layout animations in motion-one right? Like after you delete element from list they animate while changing positions?

[TommySorensen]

@mattgperry The useEffect will work fine for simple stuff. But as soon as <MyComponent /> render twice, then the animation will also run twice, which is an issue i currently have 🙂 I don't see any way out of this right now 🤔

[mattgperry]

You don’t need LazyMotion, that snippet is all you need for AnimatePresence with Motion One. But for layout animations you would need to use Framer Motion’s motion component yeah