Giters

FormidableLabs / renature

A physics-based animation library for React focused on modeling natural world forces.

Home Page:https://formidable.com/open-source/renature/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Animating mounting/un-mounting

lukebennett88 opened this issue · comments

commented

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?

commented

👋 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!