├── .gitignore ├── CONTRIBUTING.md ├── LICENSE ├── README.md ├── animation-worklet ├── README.md ├── anim-worklet.js ├── expando │ ├── expando-animator.js │ └── index.html ├── parallax-scrolling │ ├── README.md │ ├── index.html │ ├── options.js │ ├── parallax-animator.js │ ├── parallax.js │ └── pic.jpg ├── spring-sticky │ ├── index.html │ └── spring-sticky-animator.js ├── spring-timing │ ├── README.md │ ├── index.html │ ├── spring-timing-animator.js │ └── style.css ├── trip-app │ ├── app-animator.js │ ├── app.js │ ├── index.html │ └── style.css ├── twitter-header │ ├── README.md │ ├── avatar.jpg │ ├── banner.jpg │ ├── homepage.svg │ ├── index.html │ ├── location.svg │ ├── media.jpg │ ├── style.css │ └── twitter-header-animator.js └── twitter-hidey-bar │ ├── README.md │ ├── avatar.jpg │ ├── banner.jpg │ ├── index.html │ ├── style.css │ └── twitter-header-animator.js ├── index.html ├── layout-worklet ├── blocklike │ └── index.html ├── masonry │ ├── index.html │ └── masonry.js ├── random │ └── index.html └── relative │ ├── README.md │ ├── index.html │ ├── layout.js │ └── main.js ├── paint-worklet ├── border-color │ ├── README.md │ ├── border-colors.js │ ├── index.html │ └── screenshot.png ├── border-radius-reverse │ ├── border-radius-reverse.js │ ├── index.html │ ├── package.json │ └── style.css ├── checkerboard │ ├── demo1.js │ └── index.html ├── circle │ ├── README.md │ ├── index.html │ └── paintworklet.js ├── clock │ ├── clock-painter.js │ └── index.html ├── diamond-shape │ ├── demo3.css │ ├── demo3.js │ └── index.html ├── parameter-checkerboard │ ├── demo2.js │ └── index.html ├── qr-code │ ├── index.html │ └── paintworklet.js ├── ripple │ ├── README.md │ ├── index.html │ └── paintworklet.js └── spinners │ ├── index.html │ ├── ring-painter.js │ ├── ripple-painter.js │ ├── roller-painter.js │ └── spinner-painter.js └── properties-and-values └── custom-prop-transition └── index.html /.gitignore: -------------------------------------------------------------------------------- 1 | _* 2 | -------------------------------------------------------------------------------- /CONTRIBUTING.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/CONTRIBUTING.md -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/LICENSE -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/README.md -------------------------------------------------------------------------------- /animation-worklet/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/README.md -------------------------------------------------------------------------------- /animation-worklet/anim-worklet.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/anim-worklet.js -------------------------------------------------------------------------------- /animation-worklet/expando/expando-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/expando/expando-animator.js -------------------------------------------------------------------------------- /animation-worklet/expando/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/expando/index.html -------------------------------------------------------------------------------- /animation-worklet/parallax-scrolling/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/parallax-scrolling/README.md -------------------------------------------------------------------------------- /animation-worklet/parallax-scrolling/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/parallax-scrolling/index.html -------------------------------------------------------------------------------- /animation-worklet/parallax-scrolling/options.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/parallax-scrolling/options.js -------------------------------------------------------------------------------- /animation-worklet/parallax-scrolling/parallax-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/parallax-scrolling/parallax-animator.js -------------------------------------------------------------------------------- /animation-worklet/parallax-scrolling/parallax.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/parallax-scrolling/parallax.js -------------------------------------------------------------------------------- /animation-worklet/parallax-scrolling/pic.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/parallax-scrolling/pic.jpg -------------------------------------------------------------------------------- /animation-worklet/spring-sticky/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/spring-sticky/index.html -------------------------------------------------------------------------------- /animation-worklet/spring-sticky/spring-sticky-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/spring-sticky/spring-sticky-animator.js -------------------------------------------------------------------------------- /animation-worklet/spring-timing/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/spring-timing/README.md -------------------------------------------------------------------------------- /animation-worklet/spring-timing/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/spring-timing/index.html -------------------------------------------------------------------------------- /animation-worklet/spring-timing/spring-timing-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/spring-timing/spring-timing-animator.js -------------------------------------------------------------------------------- /animation-worklet/spring-timing/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/spring-timing/style.css -------------------------------------------------------------------------------- /animation-worklet/trip-app/app-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/trip-app/app-animator.js -------------------------------------------------------------------------------- /animation-worklet/trip-app/app.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/trip-app/app.js -------------------------------------------------------------------------------- /animation-worklet/trip-app/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/trip-app/index.html -------------------------------------------------------------------------------- /animation-worklet/trip-app/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/trip-app/style.css -------------------------------------------------------------------------------- /animation-worklet/twitter-header/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/README.md -------------------------------------------------------------------------------- /animation-worklet/twitter-header/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/avatar.jpg -------------------------------------------------------------------------------- /animation-worklet/twitter-header/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/banner.jpg -------------------------------------------------------------------------------- /animation-worklet/twitter-header/homepage.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/homepage.svg -------------------------------------------------------------------------------- /animation-worklet/twitter-header/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/index.html -------------------------------------------------------------------------------- /animation-worklet/twitter-header/location.svg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/location.svg -------------------------------------------------------------------------------- /animation-worklet/twitter-header/media.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/media.jpg -------------------------------------------------------------------------------- /animation-worklet/twitter-header/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/style.css -------------------------------------------------------------------------------- /animation-worklet/twitter-header/twitter-header-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-header/twitter-header-animator.js -------------------------------------------------------------------------------- /animation-worklet/twitter-hidey-bar/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-hidey-bar/README.md -------------------------------------------------------------------------------- /animation-worklet/twitter-hidey-bar/avatar.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-hidey-bar/avatar.jpg -------------------------------------------------------------------------------- /animation-worklet/twitter-hidey-bar/banner.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-hidey-bar/banner.jpg -------------------------------------------------------------------------------- /animation-worklet/twitter-hidey-bar/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-hidey-bar/index.html -------------------------------------------------------------------------------- /animation-worklet/twitter-hidey-bar/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-hidey-bar/style.css -------------------------------------------------------------------------------- /animation-worklet/twitter-hidey-bar/twitter-header-animator.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/animation-worklet/twitter-hidey-bar/twitter-header-animator.js -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/index.html -------------------------------------------------------------------------------- /layout-worklet/blocklike/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/blocklike/index.html -------------------------------------------------------------------------------- /layout-worklet/masonry/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/masonry/index.html -------------------------------------------------------------------------------- /layout-worklet/masonry/masonry.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/masonry/masonry.js -------------------------------------------------------------------------------- /layout-worklet/random/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/random/index.html -------------------------------------------------------------------------------- /layout-worklet/relative/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/relative/README.md -------------------------------------------------------------------------------- /layout-worklet/relative/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/relative/index.html -------------------------------------------------------------------------------- /layout-worklet/relative/layout.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/relative/layout.js -------------------------------------------------------------------------------- /layout-worklet/relative/main.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/layout-worklet/relative/main.js -------------------------------------------------------------------------------- /paint-worklet/border-color/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-color/README.md -------------------------------------------------------------------------------- /paint-worklet/border-color/border-colors.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-color/border-colors.js -------------------------------------------------------------------------------- /paint-worklet/border-color/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-color/index.html -------------------------------------------------------------------------------- /paint-worklet/border-color/screenshot.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-color/screenshot.png -------------------------------------------------------------------------------- /paint-worklet/border-radius-reverse/border-radius-reverse.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-radius-reverse/border-radius-reverse.js -------------------------------------------------------------------------------- /paint-worklet/border-radius-reverse/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-radius-reverse/index.html -------------------------------------------------------------------------------- /paint-worklet/border-radius-reverse/package.json: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-radius-reverse/package.json -------------------------------------------------------------------------------- /paint-worklet/border-radius-reverse/style.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/border-radius-reverse/style.css -------------------------------------------------------------------------------- /paint-worklet/checkerboard/demo1.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/checkerboard/demo1.js -------------------------------------------------------------------------------- /paint-worklet/checkerboard/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/checkerboard/index.html -------------------------------------------------------------------------------- /paint-worklet/circle/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/circle/README.md -------------------------------------------------------------------------------- /paint-worklet/circle/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/circle/index.html -------------------------------------------------------------------------------- /paint-worklet/circle/paintworklet.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/circle/paintworklet.js -------------------------------------------------------------------------------- /paint-worklet/clock/clock-painter.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/clock/clock-painter.js -------------------------------------------------------------------------------- /paint-worklet/clock/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/clock/index.html -------------------------------------------------------------------------------- /paint-worklet/diamond-shape/demo3.css: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/diamond-shape/demo3.css -------------------------------------------------------------------------------- /paint-worklet/diamond-shape/demo3.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/diamond-shape/demo3.js -------------------------------------------------------------------------------- /paint-worklet/diamond-shape/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/diamond-shape/index.html -------------------------------------------------------------------------------- /paint-worklet/parameter-checkerboard/demo2.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/parameter-checkerboard/demo2.js -------------------------------------------------------------------------------- /paint-worklet/parameter-checkerboard/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/parameter-checkerboard/index.html -------------------------------------------------------------------------------- /paint-worklet/qr-code/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/qr-code/index.html -------------------------------------------------------------------------------- /paint-worklet/qr-code/paintworklet.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/qr-code/paintworklet.js -------------------------------------------------------------------------------- /paint-worklet/ripple/README.md: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/ripple/README.md -------------------------------------------------------------------------------- /paint-worklet/ripple/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/ripple/index.html -------------------------------------------------------------------------------- /paint-worklet/ripple/paintworklet.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/ripple/paintworklet.js -------------------------------------------------------------------------------- /paint-worklet/spinners/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/spinners/index.html -------------------------------------------------------------------------------- /paint-worklet/spinners/ring-painter.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/spinners/ring-painter.js -------------------------------------------------------------------------------- /paint-worklet/spinners/ripple-painter.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/spinners/ripple-painter.js -------------------------------------------------------------------------------- /paint-worklet/spinners/roller-painter.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/spinners/roller-painter.js -------------------------------------------------------------------------------- /paint-worklet/spinners/spinner-painter.js: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/paint-worklet/spinners/spinner-painter.js -------------------------------------------------------------------------------- /properties-and-values/custom-prop-transition/index.html: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/GoogleChromeLabs/houdini-samples/HEAD/properties-and-values/custom-prop-transition/index.html --------------------------------------------------------------------------------