Fronteers conference

AMSTERDAM

PATHÉ Tuschinski

FActs

  • 10th Edition
  • Great Organisation
  • 1 Day Workshop
    • Hands-on
  • 2 Day Conference
    • More general topics, not only technical
  • Jam Session (5min talks)
  • Catering, Wifi, Side Events (Frontcheers)

Fronteers 2017

workshops

  • Web Animations
  • Responsive Design 
  • Clouduboy: build-your-own-console

Conference - Best talks

  • A Modern Front-end Workflow // Umar Hansa - @umaar
  • Caches all the way down // Yoav Weiss - @yoavweiss
  • Choose Your Animation Adventure // Val Head - @vlh

Conference - nice ones

  • Emoji, Web Components, and Art // Monica Dinculescu - @notwaldorf
  • A Ghost Story of CSS // Stephan Hay - @stephanhay
  • THE END // Jason Scott - @textfiles

Conference - GOODIE

  • Possibilities of WebVR and its role in the future
    Ruben van der Leun - @rvdleun

HC GOES ANIMATE

HC GOES ANIMATE

  • 12 Principles of Animations
  • Performance
  • CSS/JS Animations
  • CSS Variables
  • SVG Animations

animations PERFORMANCE

  • Animating layout properties
    • Geometry calculations all the way up/down
  • Animating paint properties
    • Specially expensive on mobile

position

SCALE

ROTATION

OPACITY

transform: translate(npx, npx)

transform: scale(n)

transform: rotate(ndeg)

opacity: 0 ... 1

Enjoy responsibly

FILTERS

JS vs css Animations

IMPERATIVE = JS Animations

  • CON: Thread contention
  • PRO: a lot of control
    • Start, pause, reverse, interrupt, cancel...
    • i.e. Parallax

CLC / Climber

DeCLARATIVE = CSS Animations

  • difficult to combine animations
  • browser can optimize the animation

CSS VARIABLES

  • can be updated dynamically
  • follow CSS cascade
  • not IE or Edge 14

CSS VARIABLES + @media

  • possible to redefine in @media queries (not possible with SASS variables)

CSS VARIABLES + JS

  • easy to update via JS

SVG Animations

SVG Animations

Fronteers 10

By anistal

Fronteers 10

  • 5
Loading comments...

More from anistal