CODEWITHSUNDEEP
reactjsanimationgsapreact-motionreact-transition-group
Sourabh Kumar
Sourabh Kumar

Reputation: 21

What is the best approach to build sequential animations with Reactjs?

There are various tools to help an individual to build animations with ReactJs. But each one has its own shortcomings. Following are the tools that I've explored till now:

ReactCSSTransitionGroup : Quite effective but I don't like how it introduces coupling between CSS and Javascript. For example:

    <ReactCSSTransitionGroup
        transitionName="example"
        transitionEnterTimeout={700}
        transitionLeaveTimeout={700}
    ></ReactCSSTransitionGroup>

Now one needs to add classes like example-enter, example-leave, example-enter-active and example-leave-active in CSS. Not a big fan of this. Besides this is not easy to manage when one is going for complex sequential animations.

ReactMotion : Another powerful tool. Useful for sequential animations as well. But implements them through delays which is not a goo approach for complex animations as introducing new elements into the chain would mean altering the delays for other elements.

ReactTransitionGroup So far my favorite solution. It exposes lifecycle hooks and one can manage the animations using tried and tested libraries like GSAP and managing complex pieces is quite easy. But it works on the DOM nodes and we know that whatever changes React undergoes outside its render method, it is not aware of that. So even though it achieves the desired output, it goes against React's way of working. For example, one can look at this fiddle https://jsfiddle.net/tahirahmed/h68s0zod/ (I didn't make this I stumbled upon it while doing my research.)

I understand that animations happen on DOM nodes and for production environments it makes total sense to use tried and tested solutions like GSAP or VelocityJs or AnimeJs. But how to make sure that all that plays well with React?

P.S. - I have tried solutions like Velocity-React and React-GSAP-Enhancer but they don't seem to get the job done as for sequential animations, they tend to rely on delays and not promises. Besides they do forced updates which is not a good way to go.

Upvotes: 2

Views: 1144

Answers (1)

Melounek
Melounek

Reputation: 910

I am combining ReactCSSTransitionGroup and styled-components.

So I define all CSS and params inside the "styled component". So anyone who wants to re-use this transition will create <ExampleTransitionGroup> and all params and css are handled inside this componnet.

Upvotes: 0

Related Questions