search

pmndrs / react-spring

✌️ A spring physics based React animation library
http://www.react-spring.dev/
MIT License
28.29k stars 1.19k forks source link

Animation Questions #183

Closed alexluong closed 6 years ago

alexluong commented 6 years ago

Hi @drcmda. I tweeted to you earlier about some questions I may have. Thanks a lot for taking the time to response and offer to help. I got a few different questions here. I would really appreciate it if you help me with those. So here goes:

  1. Say I have 2 buttons next to each other, each 50% of the width. Whenever I click on one, I want it to animate to replace the other button and take the full width of the container. It seems like a common use case for me, but I'm not sure how to do it. Here's a codesandbox I set up for it: https://codesandbox.io/s/5k4pzymqon.

  2. If I'm writing a UI library or a reusable React component (publish to npm), would you recommend using react-spring as the animation framework for it, or should I try to do everything with transition and animation CSS? I'm not entirely sure what would be best.

  3. If I'm abstracting the animation layer out of a UI component, would it still be a good idea to use animated.element to every elements in the UI component so I can make use of native rendering? For example, I have an AnimatedModal component that use Modal component. Should Modal be comprised of animated.div so that AnimatedModal can use native rendering, although maybe DifferentModal may not have any animation at all?

Thank you very much for offering to help. I've been using react-spring for a while and absolutely love it. If there's any issue that may be a bit more user friendly, may be I can help out.

drcmda commented 6 years ago

@alexluong Let's see ...

  1. There are dozens of ways. You can spring your elements individually or do something with the parent container: https://codesandbox.io/s/186yqz18n7 A transition and a simple flex layout (each item on flex:1) would probably be the best.

  2. It depends on the use case. When css is enough use css. If it isn?t or if it gets increasingly hard, use RS. I ship two libs myself with a RS dependency: animated-tree and mauerwerk, i don't think i'd like to do this with css because it would be messy if not impossible in some cases. Also, users can use their own configurations and effects easily.

  3. I'd always use native + animated.el when possible. Unless you animate text, numbers or other foreign components. Native is faster and doesn't re-render the component. Imagine someone uses your lib and wraps a huge tree of components inside. If react would attempt to render this 60fps, it would be very slow.