This document discusses animations in React. It covers two main types of animations: components entering/leaving the DOM and components already in the DOM. React provides lifecycle hooks and libraries like ReactTransitionGroup and ReactCSSTransitionGroup to help implement animations. ReactCSSTransitionGroup provides a simple way to add CSS transitions when components enter or leave using class names. The document includes examples of how it works and transitions elements scaling in and out.

1. React Animations

2. Two Types
Component In the DOM
Component Entering/Leaving the DOM
Add a class or
whatever

3. Two Types
Component In the DOM
Component Entering/Leaving the DOM
Add a class or
whatever

4. Review: React Lifecycle

5. DOM

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

7. dispatch(existentialCrisis())

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

9. DOM

10. Animations don’t
really fit. . .

11. Lifecycle
componentWillMount
Render!
componentDidMount

12. componentWillMount

13. componentDidMount

14. More Lifecycle Hooks
componentWillMount
Render!
componentDidMount

15. More Lifecycle Hooks
ReactTransitionGroups
ReactTransitionGroups
Render!
componentWillMount
componentDidMount

16. More Lifecycle Hooks
ReactTransitionGroups
ReactTransitionGroups
Render!
componentWillMount
componentDidMountcomponentWillEnter

17. ReactTransitionGroups
class 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

18. ReactCSSTransitionGroups
A simple abstraction that handles many use cases.
Implementation in code at react/src/addons/transitions

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

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

21. ReactCSSTransitionGroups
<div id="shapes">
<span data-reactid="0.1">
</span>
</div>
Created by ReactCSSTransitionGroup

22. 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

23. 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

24. 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

25. ReactCSSTransitionGroups
<div id="shapes">
<span data-reactid="0.1">
<svg data-reactid=".0.2"
…
</svg>
</span>
</div>
Scale to 0

26. 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

27. 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

28. 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

29. 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>

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

31. 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

32. 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

33. 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

34. ReactCSSTransitionGroups
<div id="shapes">
<span data-reactid="0.1">
<svg data-reactid=".0.2"
…
</svg>
</span>
</div>
Element Disappears

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

36. 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

37. Thanks
blog: thejoemorgan.com
twitter: joesmorgan
github: jsmapr1