Yehor Lvivski

Amazing UI

with CSS and Anima.js

Programmers love their code.

• Haskell, Scala, Erlang, Clojure
• Java, C#, Objective-C
• Ruby, Python, PHP
• Javascript

• MVC1970s
• MVVM2010s
• ...
• MV*2050s

VIEW

Xerox PARC

1979

35 years

Javascript + CSS

3D Transforms

• transform & transform-origin
• perspective & perspective-origin
• scale3d, rotateY, rotateY, rotateZ, translate3d

Transitions

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

Animations

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

Keyframes

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

Animations Events

• animationstart
• animationend
• animationiteration

CSS has limitations

CSS animations, Bad parts

• Not easy to stop animation once started
• You have to deal with percents
• Limited user control

anima.js

stats

• 25kB (3.7kB minified and gziped)
• 3 weeks of development
• 1 week after public release
• ≈400 stargazers

Animation loop

API

• var world = anima.js()
• var world = anima.css()

          var item = world.add(
          document.querySelector("div")
          )
          item.animate(...).css()
        

.animate()

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

method chaining

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

parallel animations

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

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

• A×B≠B×A
• scale×rotate×translate

Pull Requests

Thanks