Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/nucliweb/houdini

CSS Houdini samples
https://github.com/nucliweb/houdini

css css-houdini houdini

Last synced: about 2 months ago
JSON representation

CSS Houdini samples

Awesome Lists containing this project

README

        

[![Netlify Status](https://api.netlify.com/api/v1/badges/92f7b12e-9aa2-4f3a-9847-16907614b089/deploy-status)](https://app.netlify.com/sites/css-houdini-experiments/deploys)

# CSS Houdini Experiments

> If you want more information about **CSS Houdini**, please visit the [Awesome CSS Houdini](https://github.com/CSSHoudini/awesome-css-houdini) to access to a lot of documentation, samples, videos and articles.

To view samples run `npm install` or `yarn install` to install dependencies, only to have a web server to navegate the samples folders.

Then run `npm start` to run web server and enjoy it.

## Paint API

- [Circles](app/experiments/paint/circles/)
- [Circles with properties](app/experiments/paint/circles-props/)
- [Circles with arguments](app/experiments/paint/circles-args/)
- [Circles with properties and change values with Javascript](app/experiments/paint/circles-props-js/)
- [Circles with properties and change values with Mouse Event](app/experiments/paint/circles-props-js-mouse/)
- [Circles with properties into Web Component](app/experiments/paint/circles-props-web-component/)

## Properties & Values API

- TODO

## Typed OM API

- TODO

## Animation Worklet

- [Logo Animation](app/experiments/animation-worklet/logo-animation/)
- [Logo Scroll Animation](app/experiments/animation-worklet/logo-scroll-animation/)

## Layout Worklet

- TODO

> If you have got any suggestion or use case, please open an [issue](https://github.com/nucliweb/houdini/issues/new)

---

## More samples

You have got a lot of samples and documentation on [Awesome CSS Houdini](https://github.com/CSSHoudini/awesome-css-houdini)