Animations and React -- is it bad practice to mix them?

Question

I have been in arguments with programmers that mixing elements with animations and react is very bad practice, and that all animations should be in a style sheet because that is something presentational that is only concerned with CSS.

However, I have also seen a great number of libraries using elements like VelocityComponent or ReactCSSTransitionGroup.

I wanted to use VelocityComponent just for the ability to trigger callbacks on animations being completed/initiated, but I am not sure if this is considered good practice.

class Sidebar extends Component {
  static propTypes = {
    open: PropTypes.func,
    onRequestChange: PropTypes.func,
    onRequestComplete: PropTypes.func,
    isOpen: PropTypes.bool.isRequired,
  };
  render() {
    return (<div className={styles.sidebar}>
      <VelocityComponent
        duration={200}
        animation={{ opacity: this.props.isOpen ? 1 : 0 }}
        complete={() => this.props.onRequestComplete(this.props.isOpen)}
      >
        {this.props.children}
      </VelocityComponent>
    </div>);
  }
}

An example use case for this would be to load some async request AFTER the sidebar is open to ensure the animation runs smoothly.

So, is it bad practice to include this inline?

Note that `ReactCSSTransitionGroup` *is* using CSS animations (or rather, transitions). The Javascript is just used to dynamically trigger them (by adding additional classes) when items are added or removed from a composite component, and cleaning up afterwards (by letting elements linger in the DOM for longer than they usually would in order to allow the animation to complete, then removing them on a timer afterwards). — Jules, Jun 27 '17 at 19:59

score 2 · Answer 1 · edited Jun 16 '20 at 10:01

CSS Animations are almost always the best option

In your example, you could use callbacks that trigger on animation completion. It’s getting harder to conceive of situations where CSS animation is not an option.

Ten years ago, there was generally less of a downside to using JavaScript for animation — because that often was the only thing it was being used for.

Remember JavaScript is single-threaded. In a ReactJS (or other AJAX) application, Javascript is being used for the display of the content — that is often a fair deal of “work.” If you add JavaScript animation to a site where JavaScript is already busy with other logic, you should not be surprised when the two collide — resulting either in “janky” animation, or a “laggy” interface.

Animations and React -- is it bad practice to mix them?

1 Answers1

CSS Animations are almost always the best option