DEV Community

Discussion on: Animation Classes & useEffect Hooks - Is There a Better Way?

View post

Replies for: Well done for your first custom hook! For animating components based on state using CSS, I recommend you to take a look at React Transition Group....

Collapse
 
avatarkaleb profile image
Kaleb M •

Does react transition group work on state changes compared to just mount/unmounting?

It looks like React Spring is a good option - do you know if it's necessary for very easy animations like fading in / fading out and what has your experience been with it?

Thank you so much for commenting and reading through for some suggestions :)

Collapse
 
kewah profile image
Antoine Lehurt •

Does react transition group work on state changes compared to just mount/unmounting?

Yes, you can use the in prop. For instance

<CSSTransition in={isVisible} classNames="some-header">
  <div>Foo</div>
</CSSTransition>

There is a CodeSandbox in the documentation that can help you to visualize how it works reactcommunity.org/react-transitio...

It looks like React Spring is a good option - do you know if it's necessary for very easy animations like fading in / fading out and what has your experience been with it?

I don't think it's necessary to bring React Spring for simple animations, especially if it's an isolated use case.
In my experience, managing animations beyond fade in/fade out with different states can be annoying to build with CSS classes compared to an approach like React Spring. (Outside React ecosystem, I would recommend using something like GSAP.)