Houdini Breakout Session

Transcript

1. 1.

   Houdini

2. 2.

   Houdini

3. 3.

   Typed Object Model

4. 4.

   Typed Object Model $('#element').styleMap .set('opacity', new CSSNumberValue(0.5)); $('#element').styleMap .set('height', new

   CSSSimpleLength(50, 'px'));
5. 5.

   Typed Object Model $('#element').styleMap .set('height', new CSSSimpleLength(50, 'px')); $('#element').styleMap .get('height').value;

   // 50 $('#element').styleMap .get('height').type; // ‘px’
6. 6.

   Typed Object Model $('#element').styleMap .set('height', new CSSCalcLength('50vh - 20px')); $('#element').styleMap.get('height').vh;

   // 50 $('#element').styleMap.get('height').px; // -20
7. 7.

   Typed Object Model $('#element').styleMap .set("height", new CSSCalcLength({ vh: 50, px:

   -20, }));
8. 8.

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

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

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

   CSSSimpleLength(20, ‘px')); $('#element').styleMap.set('height', h); // h == calc(50vh - 20px);
10. 10.

    None
11. 11.

    Houdini

12. 12.

    Houdini X AnimationWorklet

13. 13.

    Animation Worklet

14. 14.

    None
15. 15.

    None
16. 16.

    bit.ly/best-effort-scroll position: static;

17. 17.

    bit.ly/best-effort-scroll position: static; position: fixed; + JS transform

18. 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
19. 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
20. 20.

    None
21. 21.

    Houdini

22. 22.

    Paint Worklet

23. 23.

    Paint Worklet <div id="myElement"></div> <style> #myElement { --image: url('#someUrlWhichIsLoading'); background-image:

    paint(image-with-placeholder); } </style> Experimental
24. 24.

    Paint Worklet <script> document.registerProperty({ name: '--image', syntax: '<image>' }); window.paintWorklet.import('paintworklet.js');

    </script> Experimental
25. 25.

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

    ['--image']; } paint(ctx, geom, properties) { // ... } }); Experimental
26. 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
27. 27.

    None
28. 28.

    bit.ly/houdini-updates

29. 29.

    None