├── layout-api-example ├── styles.css └── index.html ├── custom-properties-api ├── index.html ├── custom-properties.js └── styles.css ├── animation-api-example ├── styles.css ├── gaussian.js └── index.html ├── .vscode └── launch.json └── paint-api-example ├── styles.css └── index.html /layout-api-example/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | display: layout(masonry); 3 | --padding: 10; 4 | --columns: 4; 5 | } 6 | 7 | img { 8 | width: 100%; 9 | display: block; 10 | max-width: 100%; 11 | } 12 | 13 | /* 506 - 915 */ 14 | -------------------------------------------------------------------------------- /custom-properties-api/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 |

8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /custom-properties-api/custom-properties.js: -------------------------------------------------------------------------------- 1 | if (CSS.registerProperty) { 2 | CSS.registerProperty({ 3 | name: "--box__color", 4 | syntax: "", 5 | initialValue: "rgba(9,9,121,1)", 6 | inherits: false 7 | }); 8 | 9 | CSS.registerProperty({ 10 | name: "--box__gradient--position", 11 | syntax: "", 12 | initialValue: "60%", 13 | inherits: false 14 | }); 15 | } 16 | -------------------------------------------------------------------------------- /custom-properties-api/styles.css: -------------------------------------------------------------------------------- 1 | .box { 2 | width: 20rem; 3 | height: 20rem; 4 | background: linear-gradient( 5 | 45deg, 6 | rgba(255, 255, 255, 1) 0%, 7 | var(--box__color) var(--box__gradient--position) 8 | ); 9 | transition: --box__color 0.5s ease, --box__gradient--position 1s 0.5s ease; 10 | } 11 | 12 | .box:hover { 13 | --box__color: #baebae; 14 | --box__gradient--position: 0%; 15 | } 16 | -------------------------------------------------------------------------------- /animation-api-example/styles.css: -------------------------------------------------------------------------------- 1 | body { 2 | position: relative; 3 | padding: 2em; 4 | } 5 | div { 6 | border-radius: 100%; 7 | width: 100px; 8 | height: 100px; 9 | background-color: orange; 10 | position: relative; 11 | text-align: center; 12 | } 13 | 14 | span { 15 | content: ""; 16 | position: absolute; 17 | height: 100px; 18 | width: 3px; 19 | margin: 0 auto; 20 | background-color: black; 21 | transform-origin: center center; 22 | } 23 | -------------------------------------------------------------------------------- /.vscode/launch.json: -------------------------------------------------------------------------------- 1 | { 2 | // Use IntelliSense to learn about possible attributes. 3 | // Hover to view descriptions of existing attributes. 4 | // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387 5 | "version": "0.2.0", 6 | "configurations": [ 7 | { 8 | "type": "chrome", 9 | "request": "launch", 10 | "name": "Launch Chrome against localhost", 11 | "url": "http://localhost:8080", 12 | "webRoot": "${workspaceFolder}" 13 | } 14 | ] 15 | } 16 | -------------------------------------------------------------------------------- /paint-api-example/styles.css: -------------------------------------------------------------------------------- 1 | .background { 2 | width: 100vw; 3 | height: 100vh; 4 | font-size: 3rem; 5 | background-color: rgb(1, 150, 255); 6 | display: flex; 7 | justify-content: space-around; 8 | align-items: center; 9 | font-family: Arial, Helvetica, sans-serif; 10 | color: white; 11 | text-align: center; 12 | cursor: pointer; 13 | 14 | /* Required for animation by the worklet */ 15 | --ripple-x: 0; 16 | --ripple-y: 0; 17 | --ripple-color: rgba(0, 0, 0, 0.2); 18 | --animation-tick: 0; 19 | } 20 | 21 | .background.animating { 22 | background-image: paint(ripple); 23 | } 24 | 25 | body, 26 | html { 27 | padding: 0; 28 | margin: 0; 29 | } 30 | -------------------------------------------------------------------------------- /animation-api-example/gaussian.js: -------------------------------------------------------------------------------- 1 | registerAnimator( 2 | "gaussian", 3 | class { 4 | // Assign options 5 | constructor(options) { 6 | this.duration = options.duration; 7 | this.distance = options.distance; 8 | } 9 | 10 | animate(currentTime, effect) { 11 | // Set up Gaussian function params 12 | const sigma = this.duration / 10; 13 | const mi = this.duration / 2; 14 | 15 | // Scope current time to animation duration range 16 | const x = currentTime % this.duration; 17 | 18 | // Calculate individual parts of Gaussian function 19 | const e = -0.5 * Math.pow((x - mi) / sigma, 2); 20 | const f = 1 / (sigma * Math.sqrt(2 * Math.PI)); 21 | 22 | // Calculate current value of Guaussian function 23 | const localTime = this.distance * this.duration * f * Math.exp(e); 24 | 25 | // Assign value to effect local time 26 | effect.localTime = localTime; 27 | } 28 | } 29 | ); 30 | -------------------------------------------------------------------------------- /paint-api-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | Same worklet, different use-case! 8 |

9 | 10 | 43 | 44 | -------------------------------------------------------------------------------- /animation-api-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |

7 | 69 | 70 | 71 | -------------------------------------------------------------------------------- /layout-api-example/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |