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

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.

Your Answer

 

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.

Not the answer you're looking for? Browse other questions tagged or ask your own question.