the

Animating

Virtual DOM

Fiber

• Priority-based scheduling of updates
• Animation update preferred to data update
• Animation becomes a first-class citizen

“We’ve evolved to perform actions that flow more or less seamlessly.

"We aren’t wired to deal with the fits and starts of human-computer interaction.”

-Tammy Everts

React encapsulates state that's changing

The "so what" factor

Start with the end

Also helps track what validation looks like:

Google PMs are encouraged to find ONE goal.

Fill in the space between

Aligns the entire team to the same goal

Reduces friction

Without Transitions

Gain understanding

Spatial or otherwise

Codrops

Workfloapp.com - @workflohq

Percieved Performance

• Humans over-estimate passive waits by 36% - Eli Fitch and Richard Larson, MIT
• Viget study: wait twice as long for custom loader
• Over 4 seconds: HORROR
• Uncertain waits are longer than known, finite waits
• Disney world/Airports- entertainment while waiting
• People want to get started- doctor exam rooms

Goran Rakic from Loader Collection

This actually goes back to IE9

What does the "Scalable" mean?

Declarative ANimations

Timing

Workfloapp.com - @workflohq

Timing

<TransitionGroup>
  { this.state.shouldShowSoundwaves && 
    <Soundwaves 
      outTime={0.5} 
      drawTiming={5} 
      elTime={1} 
      easing="Circ"
    /> 
  }
</TransitionGroup>

Timing

Consider how things look to your user

Create Beautiful Defaults

Keep animation consistent and reusable the way you do with text, layout

const Eases = {
  entrance: {
    animationTimingFunction: `cubic-bezier(0.39, 0.575, 0.565, 1)`,
  },
  entranceEmphasis: {
    animationTimingFunction: `cubic-bezier(0.175, 0.885, 0.32, 1.275)`,
  },
  exit: {
    animationTimingFunction: `cubic-bezier(0.47, 0, 0.745, 0.715)`,
  },
  exitEmphasis: {
    animationTimingFunction: `cubic-bezier(0.6, -0.28, 0.735, 0.045)`,
  },
}

const Timing = {
  t1: {
    animationDuration: 0.1,
  },
  t2: {
    animationDuration: 0.15,
  },
  t3: {
    animationDuration: 0.2,
  }...
}

h1, h2, h3, h4, h5 is body copy

t1, t2, t3, t4, t5 is typical timing

Animation iteration

Workfloapp.com - @workflohq

Composite components, including animation

mo.js

mo.js

const burst = new mojs.Burst({
  left: 0, top: 0,
  zIndex:   10000,
  radius:   { 0: 100 },
  count:    5,
  children: {
    shape:     'cross',
    stroke:    { 'cyan' : 'yellow' },
    angle:     { 360: 0 },
    duration:  2000,
    delay:     'stagger(0, 100)'
  }
});

mo.js

This pen.

class ButtonGroup extends React.Component {
  render() {
    return (<div></div>);
  },
  
  shouldComponentUpdate() {
    this.props.isPlaying && this._burst.replay();
    return false;
  },
  
  componentDidMount () {
    const dog1 = new mojs.Burst({
      ...dog_opts,
      children: {
        ...dog_child_opts,
        shape:      'dogbase',
        fill:       '#E89221'
      }
    });
    
  ...

React-Motion

This pen

This pen.

getStyles(prevStyles) {
    const endValue = prevStyles.map((_, i) => {
      let staggerStiff = 100, staggerDamp = 19;
      return i === 0
        ? { opacity: spring(this.state.open ? 0 : 1, {stiffness: staggerStiff, damping: staggerDamp}) }
        : { opacity: spring(this.state.open ? 0 : 1, {stiffness: (staggerStiff - (i * 7)), damping: staggerDamp + (i * 0.2)}) }
    });
    return endValue;
  },

<StaggeredMotion
  defaultStyles = {arr} 
  styles={this.getStyles}>
  {circ =>
    <g fill={pathColor} className="cPath">
      {circ.map(({opacity}, i) =>
        <path
          key={i}
          d={pathData[i]}
          style={{
            opacity: opacity
          }} />
      )}
    </g>
  }
</StaggeredMotion>

This pen.

Drawn SVG

Done with stroke-dasharray and stroke-dashoffset

• Path or shape has a stroke
• The stroke is dashed
• Use JS to .getTotalLength()
• Dasharray the whole length of the shape
• Animate dashoffset 

@keyframes dash {
  50% {
    stroke-dashoffset: 0;
  }
  100% {
    stroke-dashoffset: -274;
  }
}

<Motion style={{
    //designate all of the differences in interpolated values in these ternary operators
    ...
    dash: spring(this.state.compact ? 0 : 200), 
    ...
    }}>
  
    {/* make sure the values are passed below*/}
    {({..., dash, ...}) =>
    <svg viewBox="0 0 803.9 738.1" aria-labelledby="title">
    <title>React-Motion</title>
  
        ...
        <g style={{ strokeDashoffset: `${dash}` }}
           className="react-letters" data-name="react motion letters">
           <path className="cls-5" d="M178.4,247a2.2,2.2,0,1,1-3.5,2.6l-6.5-8.7h-8.6v7.4a2.2,2.2,0,0,1-4.4,0V220.1a2.2,2.2,0,0,1,2.2-2.2h10.8a11.5,11.5,0,0,1,4.8,22Zm-18.6-10.3h8.6a7.3,7.3,0,0,0,0-14.7h-8.6v14.7Z" transform="translate(3.1 1.5)"/>
           ...
        </g>
    </svg>
    }
</Motion>

correct tools for the job

my  recommendations:

• React-Tween similar to React-Motion: time instead of spring
• React-Move similar to React-Motion: small, flexible
• Snap.svg is more like jQuery for SVG
• Web Animations API looks great, still waiting on support
• Velocity-React is similar to GSAP with less bells and whistles
• Mo.js spins up shapes declaratively and is still in beta

correct tools for the job

It's very tough to find something another tool can do that GSAP can't do...

but there are plenty of things GSAP can do that other tools can't.

🏆

• Transforms
• Cross-browser inconsistencies
• Morphing
• Sequencing and chaining

Not all are created equal

• Opacity
• Transforms
• Hardware Acceleration

const accelerate = {
 transform: 'translateZ(0)',
 backface-visibility: 'hidden',
 perspective: '1000px',
}

Resources:

Debugging Keyframe Animations

High Performance Animations

Stacking Transforms

Stacking Transforms

womp womp :(

GreenSock

Animate the unanimatible, like SVG filters

Solves Cross-Browser Inconsistencies

Bad transform origin bug on rotation, soon to be solved in Firefox.

More in this CSS-Tricks article.

Chrome

IE

Firefox

Safari (zoomed)

Solves Other Transform-Origin Issues

This pen.

Edit this.

MorphSVG

Sequences

& Chaining

Easily spaghetti:

Delays for chaining,

Callbacks

Timeline

• stack tweens
• change their placement in time
• group them into scenes
• add relative labels
• animate the scenes!
• reuse the scenes, play backwards, pause

//instantiate a TimelineLite    
const tl = new TimelineMax();

//adds a tween at the beginning
tl.to(el1, 0.5, {x:100, opacity:0})

//adds another tween immediately after
tl.to(el2, 0.5, {y:-100, opacity:0})

//schedule next tween 0.5 seconds after
tl.to(el3, 0.5, {scale:.5}, "+=0.5")

End to end

Leo Leung

React transition Group Plus
&&
Greensock

💥

===

Transitions

Don't reinvent the wheel / Avoid callback hell

React Transition Group Plus

In-out modes

Without in-out modes

End to end

Encapsulate what is changing

State-driven ANIMAtions

  toggleShape() {
    if (this.state.screen === 0) {
      this.animFire(this.state.splitText)
    } ...
    this.setState({
      screen: (this.state.screen + 1) % 3
    })
  }

State-driven Animations

  animFire(splitText) {
    const tl = new TimelineMax,
          stA = 'start';
    
    TweenMax.set([this.g1.childNodes, this.g2.childNodes], {
      clearProps:'svgOrigin'
    })

    tl.add('start')
    tl.staggerFromTo(this.g1.childNodes, dur, {
      drawSVG: '68% 100%'
    }, {
      drawSVG: '27.75% 0%',
      ease: Back.easeOut
    }, stD, stA)
    ...
  }

componentWillEnter(callback) {
    const { drawTiming, elTime, easing } = this.props,
          elTime2 = elTime * 2;
    
    TweenMax.fromTo(this.box, elTime2, {
      opacity: 0,
      drawSVG: '50% 50%'
    }, {
      opacity: 1,
      drawSVG: '100%',
      ease: `${easing}.easeOut`
    })
    ...
}

OSS Version

the sky's the limit!

More!

Draggable

Motion Along a Path

Custom Easing

Physics/ThrowProps

React encapsulates state that's changing

SVG Animations

Web Animation Workshops

with Val Head

🎉

Thank you!

@sarah_edo on twitter