Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Houdini Breakout Session

Surma
November 12, 2016

Houdini Breakout Session

Chrome Dev Summit 2016

Surma

November 12, 2016
Tweet

More Decks by Surma

Other Decks in Technology

Transcript

  1. Typed Object Model const h = new CSSSimpleLength(50, 'vh') .subtract(new

    CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h);
  2. Typed Object Model const h = new CSSSimpleLength(50, 'vh') .subtract(new

    CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h); // h == calc(50vh - 20px);
  3. Animation Worklet <style> :root { animator-root: parallax; } .bg {

    animator: parallax; } </style> <div class='bg' style='--parallax-rate: 0.2'></div> <div class='bg' style='--parallax-rate: 0.5'></div> Experimental
  4. Animation Worklet registerAnimator('parallax', class ParallaxAnimator { static inputProperties = ['transform',

    '--parallax-rate']; static outputProperties = ['transform']; static rootInputScroll = true; animate(root, children) { const scrollTop = root.scrollOffsets.top; children.forEach(background => parallaxMath(elem, background.styleMap.get('--parallax-rate'))); } }); Experimental
  5. Paint Worklet registerPaint('image-with-placeholder', class { static get inputProperties() { return

    ['--image']; } paint(ctx, geom, properties) { // ... } }); Experimental
  6. Paint Worklet paint(ctx, geom, properties) { const img = properties.get('--image');

    switch (img.state) { case 'ready': ctx.drawImage(img, 0, 0, geom.width, geom.height); break; case 'pending': drawMountains(ctx); break; case 'invalid': default: drawSadFace(ctx); } } Experimental