Animations in React

Intro to

by Keziyah Lewis

reactjsexample.com/tic-tac-toe-game-on-react-js/

hackernoon.com

react-native-loader (github)

react-motion demo

reaction-page-transition demo

react-screen

lottie-react-native

How do you animate a React component?

Today, we will use

CSS transitions + react-transition-group
a 3rd party package (react-screen)
Higher Order Components
TweenMax

to animate a UI for a fake e-commerce site.

Because the sharing economy has officially gone too far.

Task 1

Animate the appearance of a search box upon clicking a

search icon.

Tools needed:

react-transition-group (fork and download from Github)

Approach

CSS transitions

source: codeproject.com

Text

from Facebook's React docs

Starting Point

Import CSSTransitionGroup, and wrap it around Search

import React, { Component } from 'react'
import {Link} from 'react-router'
import CSSTransitionGroup from './react-transition-group/src/CSSTransitionGroup'
import Search from './Search'


class Hero extends Component {
    render() {
        return (
            <div id="heroimg">
                <div id="hero-text" className="container">
                    <div className="col-md-8">
                        <h1>New hair don't care.</h1>
                        <h4>Boot the bundles. Skip the beauty shop. Buy hair for your next look from people right in your neighborhood.</h4>
                    </div> 
                </div>
                <CSSTransitionGroup>
                    <Search/>
                </CSSTransitionGroup>
            </div>
        )
    }
}

export default Hero

Hero.jsx

Add CSS

/*Keep consistency with class names
**Use "appear" for initial loading of the page
**Use "enter" for components that load after the page load
    such as those that load in response to an event. 
**The transition seconds in CSS should match the milliseconds passed into
    CSSTransitionGroup
*/

/*Conditions for when the search form first appears.*/
 .search-enter {
    width: 0; 
 }

/*Specify length of time and end result of transition, before
the search component renders as normal*/

  .search-enter.search-enter-active {
    width: 90%; 
    transition: width 0.4s ease-in; 
  }

style.css

Add transition props

<CSSTransitionGroup 
transitionName="search"
 transitionAppear={false}
 transitionEnterTimeout={400}
 transitionEnter={true}
 transitionLeave={false}>
                     <Search/>
 </CSSTransitionGroup>

Hero.jsx

Make sure the transition name and timeout values reflect what is in style.css.

Add click handler + logic

class Hero extends Component {
    constructor() {
        super()

        this.state = { shouldShowSearch: false }
        this.showSearch = this.showSearch.bind(this)
  }

    showSearch() {
        this.setState({ shouldShowSearch: true })
    }

    render() {
        const searchIcon = <button className="mdl-button mdl-js-button" 
                            id="icon-search" onClick={this.showSearch}>
                            <span className="glyphicon glyphicon-search" 
                            aria-hidden="true"></span>
                            </button>

Hero.jsx

 <CSSTransitionGroup transitionName="search" transitionAppear={false}
     transitionEnterTimeout={400} transitionEnter={true} transitionLeave={false}>
                    {!this.state.shouldShowSearch && searchIcon}
                    {this.state.shouldShowSearch && <Search />}
  </CSSTransitionGroup>

There you go!

Task 2

Animate page transitions.

Approach

CSS Transitions

Tools Needed

Just CSS and keyframes or react-transition-group

Starting Point

'use strict'
import React from 'react'
import {Router, Route, IndexRoute, browserHistory} from 'react-router'
import {render} from 'react-dom'

import App from './components/App'
import Home from './components/Home'
import Results from './components/Results'

render(
    <Router history={browserHistory}>
      <Route path="/" component={App}>
          <IndexRoute component={Home} />
          <Route path="/results" component={Results} />
      </Route>
    </Router>,
  document.getElementById('main')
)

main.jsx

import React, { Component } from 'react'

class App extends Component {
    render() {
        return (
            <div>
               {this.props.children}
            </div>
        )
    }
}

export default App

App.jsx

Wrap the App's children in <CSSTransitionGroup /> and clone them.

import React, { Component } from 'react'
import CSSTransitionGroup from './react-transition-group/src/CSSTransitionGroup'

class App extends Component {
    render() {
        return (
            <div>
                //We will add transition properties later...
                <CSSTransitionGroup >
                //We need to clone the children because we are adding props
                    {React.cloneElement(this.props.children, 
                    {key: this.props.location.pathname})}
                //Won't work without the key
                //location.pathname -> /results
                </CSSTransitionGroup>
            </div>
        )
    }
}

export default App

App.jsx

/*Conditions for when the search form first appears.*/
.fade-enter {
    opacity: 0.01; 
}

/*Specify length of time and end result of transition, before
the search component renders as normal*/

.fade-enter.fade-enter-active {
    opacity: 1; 
    transition: opacity 0.8s ease-in;
}

/*Conditions for when the search icon first leaves*/
.fade-leave {
    opacity: 1
}
/*When it first appears you can't see anything*/
.fade-appear {
    opacity: 0;
  }

/*But while it's appearing...*/
.fade-appear.fade-appear-active {
    opacity: 1;
    transition: opacity 0.8s ease-in;
}

style.css

Add CSS

//Use keyframes without react-transition-group
//Just send class names to components as a prop

.anim {
    animation: anim 1s ease-out 0s 1; 
}


@keyframes anim {
    0% {
        transform: translateX(-100%);
    }
    100% {
         transform: translateX(0); 
    }
}

Alternative: Use keyframes

style.css

 <CSSTransitionGroup transitionName="fade" 
    transitionAppear={true} transitionEnter={true} 
    transitionLeave={true}
    transitionLeaveTimeout={200} 
    transitionEnterTimeout={800}
    transitionAppearTimeout={800}>
    {React.cloneElement(this.props.children, 
    {key: this.props.location.pathname})}
  </CSSTransitionGroup>

App.jsx

Add transition properties

Or if just using keyframes, add the className to the div that holds the component, and you don't need <CSSTransitionGroup />

done & done

Task 3

Add a carousel for the how-to guide.

Approach

Use a node package,

react-screen by Gao Sun.

Tools needed

react-screen
link to CSS
see website

source: react-view-pager on github

Starting Point

class HowTo extends Component {
    render() {
        return (
            <div className="container">
                <div id="tutorial-header">
                    <h1 id="hair-tutorial-header">Hairbnb is
                     revolutionizing the way you shop for hair.
                     Here's how. 
                    </h1>
                </div>
                <HowToCard image={image1} header={header1} paragraph={paragraph1}/>
                <HowToCard image={image2} header={header2} paragraph={paragraph2}/>
                <HowToCard image={image3} header={header3} paragraph={paragraph3}/>
                <HowToCard image={image4} header={header4} paragraph={paragraph4}/>
            </div>
        )
}
}

HowTo.jsx

That's it!

import React, { Component } from 'react'
import { Screen, ScreenSlice } from 'react-screen';
//Don't forget to link to the CSS file

class HowTo extends Component {
    render() {
        return (
            <div className="container">
                <div id="tutorial-header">
                    <h1 id="hair-tutorial-header">Hairbnb is
                     revolutionizing the way you shop for hair.
                     Here's how. 
                    </h1>
                </div>
                <Screen>
                    <ScreenSlice>
                        <HowToCard image={image1} header={header1} paragraph={paragraph1}/>
                    </ScreenSlice>
                    <ScreenSlice>
                         <HowToCard image={image2} header={header2} paragraph={paragraph2}/>
                    </ScreenSlice>
                    <ScreenSlice>
                        <HowToCard image={image3} header={header3} paragraph={paragraph3}/>
                    </ScreenSlice>
                    <ScreenSlice>
                        <HowToCard image={image4} header={header4} paragraph={paragraph4}/>
                    </ScreenSlice>
                </Screen>
            </div>
        )
}
}

HowTo.jsx

Task 4

Make each results card flip to reveal a "report user" form.

Approach

Higher order components with TweenMax.

Tools Needed

link to TweenMax in script tag in HTML
react-transition-group

source: codemyui.com

Starting Point

We have a ResultsCard component and a ReportCard component

MakeFlip.jsx

Write HOC

import React from 'react'
import {findDOMNode, render} from 'react-dom'

function makeFlip (Component) {
    return class Flip extends React.Component {

    //This is called at the same time as componentDidMount
    componentWillEnter (callback) {
        const el = findDOMNode(this)
    }

    //This is called when the child has been removed from the ReactTransitionGroup
    componentWillLeave(callback) {
        const el = findDOMNode(this)
    }

    render() {
        return <Component { ...this.props } />
    }
    }
}

//Animation hooks that are provided a callback will prevent other 
//animations from running until the callback is called.

This function takes a regular component and returns an enhanced component.

Animate with TweenMax

The fromTo function lets you specify the start and end.

of an animation.

TweenMax.fromTo(el, 
                1, 
                {rotation: 180, opacity: 0}, 
                {rotation: 0, opacity: 1, onComplete: callback}
              )

1. The element that is being animated.

2. Time in seconds

3. Starting point

4. Ending point.

function makeFlip (Component) {
    return class Flip extends React.Component {

    componentWillEnter (callback) {
        const el = findDOMNode(this)
        TweenMax.fromTo(el, 0.5, {rotationY: 180, opacity: 0}, 
        {rotationY: 0, opacity:1, onComplete: callback})
    }

//This hook is not needed for this animation
// (that's why time is set to 0.) 
//But if I were using it, I would have the card
// flip on the Y axis -180deg.
    componentWillLeave(callback) {
        const el = findDOMNode(this)
        TweenMax.fromTo(el, 0, {rotationY:0, opacity:0}, 
        {rotationY: -180, opacity: 0, onComplete: callback})
    }

    render() {
        return <Component { ...this.props } />
    }
    }
}

Add animation to lifecycle hooks.

MakeFlip.jsx

Export the enhanced functions.

import React from 'react'
import {findDOMNode, render} from 'react-dom'
import ResultCard from './ResultCard'
import ReportCard from './ReportCard'


function makeFlip (Component) {
    return class Flip extends React.Component 
        //...see previous slide
}

//Create the animated front card by passing it into the HOC above
export const Front = makeFlip(ResultCard)

//Create the animated back card by passing it into the HOC above
export const Back = makeFlip(ReportCard)

MakeFlip.jsx

import React, {Component} from 'react'
import TransitionGroup from './react-transition-group/src/TransitionGroup'
import {Front, Back} from './MakeFlip'

export default class Results extends Component {
  state = {
    shouldShowResult: true,
    shouldShowReport: false
  }

  toggle = () => {
    this.setState({
      shouldShowResult: !this.state.shouldShowResult,
      shouldShowReport: !this.state.shouldShowReport
    })
  }

  render () {
    return (
    <div>
  
//For as many cards as you have...
      <TransitionGroup>
        { this.state.shouldShowResult && <Front/>}
        { this.state.shouldShowReport && <Back/>}
      </TransitionGroup>

      <button onClick={this.toggle}>toggle</button>

    </div>
    )
  }
}

Results.jsx

Add toggling logic. Wrap components in a <TransitionGroup />

Render a toggle button or pass the toggle function as a prop to <Front /> and <Back />

...NOT <CSSTransitionGroup />

Take aways:

You don't need jQuery
All you really need is CSS
Use libraries or packages
HOCs are great for animation
Be as creative or as lazy as you want

Learn more.

Animations with React Transition Group: Part 1, Part 2 by Chang Wang
Intro to React Motion, by Nash Vail
Animated Microinteractions in React by Christian Sepulveda
Video: Get Started Quickly with GSAP
Facebook's react-transition-group
react-transition-group-plus
29 React Motion examples on React Rocks
Talk: Animating in React by Sarah Drasner
Talk: SVG and GreenSock for complex animation by Sarah Drasner

Thank you

lottie-react

Link to presentation on - @KeziyahL

github.com/keziyah

Tech Talk: Intro to Animations in React

By Keziyah Lewis

Tech Talk: Intro to Animations in React

2,179

Animations in React

Task 1

Tools needed:

Approach

Starting Point

Add CSS

Add transition props

Add click handler + logic

Task 2

Approach

Tools Needed

Starting Point

Task 3

Approach

Tools needed

Starting Point

That's it!

Task 4

Approach

Tools Needed

Tech Talk: Intro to Animations in React

More from Keziyah Lewis