Houdini Breakout Session

8314890e50d87c60b2ab5fdab90a9630?s=47 Surma
November 12, 2016

Houdini Breakout Session

Chrome Dev Summit 2016

8314890e50d87c60b2ab5fdab90a9630?s=128

Surma

November 12, 2016
Tweet

Transcript

  1. 1.
  2. 2.
  3. 8.

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

    CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h);
  4. 9.

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

    CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h); // h == calc(50vh - 20px);
  5. 10.
  6. 11.
  7. 14.
  8. 15.
  9. 18.

    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
  10. 19.

    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
  11. 20.
  12. 21.
  13. 25.

    Paint Worklet registerPaint('image-with-placeholder', class { static get inputProperties() { return

    ['--image']; } paint(ctx, geom, properties) { // ... } }); Experimental
  14. 26.

    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
  15. 27.
  16. 29.