renature icon indicating copy to clipboard operation
renature copied to clipboard

Animating mounting/un-mounting

Open lukebennett88 opened this issue 5 years ago • 1 comments
trafficstars

Hi there, I just found this project and it looks fantastic!

I've had a quick look through the docs, and didn't see anything on the topic, but I was wondering if this library can be used to animate mounting and un-mounting a component?

lukebennett88 avatar Jun 12 '20 07:06 lukebennett88

👋 Hey @lukebennett88, thanks for the kind words!

The library can be used to animate initial mount – in fact that's really the default setup for things. When a component using a renature hook mounts, the animation immediately gets run by default. This CodeSandbox should make it a bit clearer – clicking the button will mount the Mover component, and the component animates in gracefully.

Unmounting is something we haven't covered yet, but I'm guessing you're after an API where you could specify a from / to pair for unmounting, where:

  • Component is instructed by React to unmount.
  • We start the frame loop and animate the value from a certain from value to a to value before removing it from the DOM.

I'd definitely like to support this, just need to do some more research on how similar animation libs take care of it. I'll put it on the roadmap and drop updates here as we make progress. Thanks for checking out renature!

parkerziegler avatar Jun 13 '20 01:06 parkerziegler