Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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
- Host: GitHub
- URL: https://github.com/nucliweb/houdini
- Owner: nucliweb
- License: mit
- Created: 2018-11-28T23:04:22.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2023-09-20T21:11:45.000Z (over 1 year ago)
- Last Synced: 2023-09-21T11:02:30.617Z (over 1 year ago)
- Topics: css, css-houdini, houdini
- Language: HTML
- Homepage: https://css-houdini-experiments.netlify.app/
- Size: 949 KB
- Stars: 4
- Watchers: 3
- Forks: 1
- Open Issues: 12
-
Metadata Files:
- Readme: README.md
- License: LICENSE
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)