Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome, Safari or Firefox browser.

Yehor Lvivski


@lvivski

Amazing UI

with CSS and Anima.js

Programmers love their code.

VIEW

Xerox PARC

1979

35 years

Javascript + CSS

3D Transforms

Transitions

        transition:  [
          <property> ||
          <duration> ||
          <timing-function> ||
          <delay> ]
      

CSS Transitions

Animations

        animaton:  [
          <name> ||
          <duration> ||
          <timing-function> ||
          <delay> ||
          <iteration-count> ||
          <direction> ||
          <fill-mode> ]
      

CSS Animations

Keyframes

        @keyframes animation-name {
        0%, 100% {...}
        from, to {...}
        50% {...}
        }
      

Animations Events

CSS has limitations

CSS animations, Bad parts

anima.js

lvivski / anima

stats

demo

Animation loop

setTimeout
requestAnimationFrame

API

.animate()

translate rotate scale
      item.animate({
        translate: [x, y, z],
        duration: 500,
        ease: 'ease-in-out-quad',
        delay: 100
      })
      

method chaining

      item.animate(...)
      .animate(...).animate(...)
      .infinite()
      

demo

parallel animations

      item.animate([
      {
        translate: [x, y, z],
        duration: 500
      }, ...
      ])
      

demo
cards

How it works

      matrix3d(
        1, 0, 0, 0,
        0, 1, 0, 0,
        0, 0, 1, 0,
        0, 0, 0, 1
      )
      

scale and translate

      matrix3d(
        sX,   0,   0, 0,
          0, sY,   0, 0,
          0,   0, sZ, 0,
        tX, tY, tZ, 1
      )
      
      matrix3d(
        cos(Y)cos(Z),
        cos(X)*cos(Z)
        +sin(X)sin(Y)cos(Z),
        sin(X)sin(Z)
        -cos(X)sin(Y)cos(Z), 0,
        ...
      )
      

Decomposition

Matrix decomposition

Pull Requests

Thanks


@lvivski