Behind the Illusions

Impossibly high-performance layout animations

.css .css__conf .css__conf--au .css__conf--au__2018 .css__conf--au__last

David Khourshid

Microsoft

@davidkpiano

Manoela Ilic

Rachel Nabors

Lea Verou

Val Head

Early inspiration

Source: codepen.io/davidkpiano/pen/ByNPQw

Source: codepen.io/davidkpiano/pen/wBGjMr

Escaping from CSS constraints
Disappearing from browsers
Reappearing in 5 years, maybe

CSS is magic

.disappear {
  display: none;
  visibility: hidden;
}

.midair {
  float: left;
}

.center-div {
  position: absolute;
  margin: auto;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  width: 100px;
  height: 100px;
}

.center-div p {
  position: relative;
  top: 50%;
  transform: perspective(1px) translateY(-50%);
}

.container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
}

.outer-div {
  display: table;
  position: absolute;
  height: 100%;
  width: 100%;
}
.mid-div {
  display: table-cell;
  vertical-align: middle;
}
.center-div {
  margin: 0 auto;
  width: 300px;
  height: 100px;
}

Illusions, not hacks

Animating position

Animating size

Animating gradients

Animating on curves

Animating border-radius

without top/right/bottom/left

without width/height

without color

without motion/offset path

without ... fear

60FPS

Avoid layout (use transform)
Avoid repaint (use opacity)
Avoid being dogmatic (measure!)

FLIP

Invert

Last

First

Play

First


const box = document.querySelector('#box');

const first = box.getBoundingClientRect();

// {
//   top: 400,
//   left: 100,
//   width: 200,
//   height: 200,
//   ...
// }

Last

// ... execute change

const bigBox = document
  .querySelector('#big-box');

const last = bigBox.getBoundingClientRect();

// {
//   top: 0,
//   left: 0,
//   width: 500,
//   height: 500,
//   ...
// }

Invert

100px

400px

deltaX = last.left - first.left = 100
deltaY = last.top - first.top = 400
deltaW = first.width / last.width = 0.4
deltaH = first.height / last.height = 0.4

0.4

const deltaX = first.left - last.left;
const deltaY = first.top - last.top;
const deltaW = first.width / last.width;
const deltaH = first.height / last.height;

Play

// WAAPI

bigBox.animate([
  {
    transformOrigin: 'top left',
    transform: `
      scale(deltaW, deltaH)
      translate(deltaX, deltaY)
    `
  },
  {
    transformOrigin: 'top left',
    transform: 'none'
  }
], {
  duration: 300,
  easing: 'ease-in-out',
  fill: 'both'
});

const parentDelta = // ...
const childDelta = // ...

const relativeDelta = {
  top:
    childDelta.top - parentDelta.top,
  left:
    childDelta.left - parentDelta.left,
  ...childDelta
};

FLIP-FLOP

THONG

First last invert play
& first last outer play

Transform hierarchies of nested groups

Source: codepen.io/davidkpiano/pen/xLKBpM

Source: codepen.io/davidkpiano/pen/vmXErw

CSS Patterns

Predictable layout

.mostly-everything {
  box-sizing: border-box;
}

.maybe-everything {
  position: relative;
}

* {
  box-sizing: border-box;
  position: relative;
}

Smooth easings

.enter {
  animation-timing-function:
    cubic-bezier(0, .5, .5, 1);
}

.move {
  animation-timing-function:
    cubic-bezier(.5, 0, .5, 1);
}

.exit {
  animation-timing-function:
    cubic-bezier(.5, 0, 0, 1);
}

Layered grids

.some-layer {
  /* define the grid */
  display: grid;
  grid-gap: 10px;
  grid-template-rows: auto 300px;
  grid-template-columns: 3fr 1fr;
  grid-template-areas: 
    '🤔 🤔'
    '🤷‍♀️ 🍺'
    '👞 👞';

.some-layer {










  /* position the layer */
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;
}

Background elements

.background {
  /* layer it */
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

.background {







  /* style it */
  background-color: var(--bg, transparent);
  border-radius: inherit;
}

🤔 Can also be a pseudoelement

Shadow elements

.background:before {
  content: '';

  /* layer it */
  position: absolute;
  height: 100%;
  width: 100%;
  top: 0;
  left: 0;

  /* style it */
  box-shadow:
    0 .5rem 1rem rgba(0, 0, 0, 0.1);
  opacity: 1;
}

Source: Tobias Ahlin - How to animate "box-shadow" with silky-smooth performance

Finite state machines

[data-state="loading"]

Let's Get STarted

Animating Border-Radius

Border radius transitions

Scaling element = scaling radius 😞

Animate width + height? 🤔

Animate border-radius! 😅

It's okay. Measure!

X radius = first X radius ✖ width ratio (e.g., 2)

Y radius = first Y radius ✖ height ratio (e.g., 1.5)

@keyframes flip-border {
  from {
    border-top-left-radius:
      8rem 6rem;
    border-top-right-radius:
      8rem 6rem;
    border-bottom-left-radius:
      8rem 6rem;
    border-bottom-right-radius:
      8rem 6rem;
  }
  to {
    border-radius: 4rem;
  }
}

Border radius transitions

Source: codepen.io/davidkpiano/pen/ZaLjBW

Curved Motion Paths

Inverse rotations

.wrap { // container
  transform-origin: 0 -20vmin; // 𝚫y
  animation: wrap-curve 1s;
  will-change: transform;
}
@keyframes wrap-curve {
  from { transform: none; }
  to { transform: rotate(-90deg); }
}

.box { // layer
  animation: box-curve 1s;
  will-change: transform;
}
@keyframes box-curve {
  from { transform: none; }
  to {
    transform:
      rotate(90deg)
      translateX(20vmin); // 𝚫x - 𝚫y
  }
}

𝚫y

𝚫x

𝚫y - 𝚫x

insert codepen

Source: codepen.io/shshaw/pen/pWwrmM

Expand & Collapse

Height and width

Just don't. Please.

⚠️ Triggers layout & many developers

.sinful-layout-animation {
  transition: height .3s ease-in-out;
  
  // contain the layout to let the browser know
  // that height changes are isolated
  contain: layout;
}

If you must...

🏳

Scale & inverse scale

Building performant expand & collapse animations

.parent {
  transform-origin: top left;
  transform: scale(2);
}

.child {
  transform-origin: top left;
  transform: scale(.5);
}

⚠️ Requires a lot of JS for non-linear easings

⚠️ Can't animate to zero height or width

Sliding layers

.parent {
  overflow: hidden;
  transform: translate(-50%, -50%);
}

.child {
  transform: translate(50%, 50%);
}

⚠️ Requires a lot of elementary-level math

Clip-path

@keyframes clip-flip {
  from {
    clip-path: polygon(
      20% 20%,
      80% 20%,
      80% 80%,
      20% 80%
    );
  }
  to {
    clip-path: polygon(
      0% 0%,
      100% 0%,
      100% 100%,
      0% 100%
    );
  }
}

⚠️ Triggers repaint

Introducing Flipping

<div data-flip-key="box-1">

<div data-flip-key="box-1">

const flipping = new Flipping();

// before a layout change happens
flipping.read();

// something that changes layout
selectPhoto();

// after a layout change happens
flipping.flip();

const flipping = new Flipping();

const flippingSelectPhoto =
  flipping.wrap(selectPhoto);

// read and flip!
flipppingSelectPhoto();

Flipping quick start

Selects:
Currently visible "flip" elements
or a custom active selector:

new Flipping({
  activeSelector:
    el => el.matches('.active *')
});

Source: codepen.io/davidkpiano/pen/xPVJwm

Article: css-tricks.com/animating-layouts-with-the-flip-technique/

Source: codepen.io/davidkpiano/pen/RjaBpW

Flipping v1

npm install flipping --save
yarn add flipping --save

github.com/davidkpiano/flipping

CDN:

unpkg.com/flipping/dist/flipping.js

unpkg.com/flipping/dist/flipping.web.js

unpkg.com/flipping/dist/flipping.css.js (soon!)

flipping.onFlip('some-key', state => {
  console.log(state);

  state === {
    type: 'MOVE',
    key: 'some-key',
    element: // flipped element,
    bounds: {
      top: 100,
      left: 10,
      width: 250,
      height: 135,
      // ...
    },
    delta: {
      top: 10, // moved 10px up
      left: -20, // moved 20px right
      width: 2, // increased width 2x
      height: 1, // height unchanged
      // ...
    },
    animation: // current animation
    index: 3,
    previous: // previous state
    start: // start time
    parent: // parent state
    data: // ...
  };
});

Source: codepen.io/davidkpiano/pen/zWrRye

Rachel Nabors - Animation At Work

But there is power in animation
The power to create experiences that go beyond mere linked documents
The power to immerse users in an illusion of life.

Thank You CSSConf AU!

@davidkpiano

Resources

Behind the Illusions

CSS is magic

60FPS

FLIP

Invert

Last

First

Play

First

Last

Invert

Play

FLIP-FLOP

THONG

CSS Patterns

Let's Get STarted

Animating Border-Radius

Curved Motion Paths

Expand & Collapse

🏳

🏳

Introducing Flipping

Thank You CSSConf AU!

Behind the Illusions - Impossibly High-Performance Layout Animations

Behind the Illusions - Impossibly High-Performance Layout Animations

David Khourshid PRO

Behind the Illusions

CSS is magic

60FPS

FLIP

Invert

Last

First

Play

First

Last

Invert

Play

FLIP-FLOP

THONG

CSS Patterns

Let's Get STarted

Animating Border-Radius

Curved Motion Paths

Expand & Collapse

🏳

🏳

Introducing Flipping

Thank You CSSConf AU!

Behind the Illusions - Impossibly High-Performance Layout Animations

More from David Khourshid