Houdini

Houdini

Typed Object Model

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

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

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

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

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

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

No content

Houdini

Houdini X AnimationWorklet

Animation Worklet

No content

No content

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

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

Animation Worklet :root { animator-root: parallax; } .bg { animator: parallax; } Experimental

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

No content

Houdini

Paint Worklet

Paint Worklet #myElement { --image: url('#someUrlWhichIsLoading'); background-image: paint(image-with-placeholder); } Experimental

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

Paint Worklet registerPaint('image-with-placeholder', class { static get inputProperties() { return ['--image']; } paint(ctx, geom, properties) { // ... } }); Experimental

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

No content

bit.ly/houdini-updates

No content