React Animations

Two Types

Component In the DOM

Component Entering/Leaving the DOM

Add a class or whatever

Two Types

Component In the DOM

Component Entering/Leaving the DOM

Add a class or whatever

Review: React Lifecycle

DOM

Virtual DOM"PotatoHead": { "head": { "peg": null }, "body": { "topPeg": "eyes", "middlePeg": null, "bottomPeg": null }, "bottom": { "peg": "shoes" }}

dispatch(existentialCrisis())

Virtual DOM"PotatoHead": { "head": { "peg": null }, "body": { "topPeg": "eyes", "middlePeg": null, "bottomPeg": "mouth" }, "bottom": { "peg": "shoes" }}

DOM

Animations don’t really fit. . .

Lifecycle

componentWillMount

Render!

componentDidMount

componentWillMount

componentDidMount

More Lifecycle Hooks

componentWillMount

Render!

componentDidMount

More Lifecycle HooksReactTransitionGroups

ReactTransitionGroups

Render!

componentWillMount

componentDidMount

More Lifecycle HooksReactTransitionGroups

ReactTransitionGroups

Render!

componentWillMount

componentDidMountcomponentWillEnter

ReactTransitionGroupsclass Box extends React.Component { componentWillEnter (done) { const el = findDOMNode(this); TweenMax.fromTo(el, 0.3, {y: 100}, {y: 0, onComplete: done} ); }

componentWillLeave (done) { const el = findDOMNode(this); TweenMax.fromTo(el, 0.3, {y: 0}, {y: -100, onComplete: done} ); }

render () { return <div className="box"/>; }}

Source: “Animations with ReactTransitionGroup” by Chang Wang on Medium

ReactCSSTransitionGroups

A simple abstraction that handles many use cases.

Implementation in code at react/src/addons/transitions

ReactCSSTransitionGroupsconst ShapeContainer = ({elements}) => ( <div id = "shapes"> <ReactCSSTransitionGroup transitionName = "shape" transitionEnterTimeout={2000} transitionLeaveTimeout={2000} > {elements} </ReactCSSTransitionGroup> </div>)

ReactCSSTransitionGroups.shape-enter { transform: scale(0);}

.shape-enter.shape-enter-active { transform: scale(1); transition: all 2s ease-in;}

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1">

</span></div>

Created by ReactCSSTransitionGroup

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" class="shape-enter"> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Scale to 0

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" class="shape-enter shape-enter-active"> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Transition Triggered: Scaling to 1

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Transition Complete

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg>

</span></div>

Scale to 0

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class="shape-enter"> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Scale to 0

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class=“shape-enter shape-enter-active“> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Scaling to 1

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Transition Complete

Leaving is the same<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span></div>

ReactCSSTransitionGroups.shape-leave { transform: scale(1);}

.shape-leave.shape-leave-active { transform: scale(0); transition: all .5s ease-in;}

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class="shape-leave"> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Scale to 1

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class=“shape-leave shape-leave-active“> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Scaling to 0

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg> <svg data-reactid=".0.2" class=""> <circle data-reactid=".0.2"></circle> </svg> </span></div>

Transition Complete

ReactCSSTransitionGroups

<div id="shapes"> <span data-reactid="0.1"> <svg data-reactid=".0.2"

… </svg>

</span></div>

Element Disappears

Demo

http://codepen.io/jsmapr1/pen/KgdNWy

Takeaways

1. Animations in React rely on new lifecycle hooks

2. ReactTransitions give more control and allow callbacks when animations end

3. ReactCSSTransitions allow a simple hook for CSS-based transitions

Thanks

blog: thejoemorgan.com

twitter: joesmorgan

github: jsmapr1