Puffs
An animation wrapper component. Creates a container with animated elements in the background every provided time. The elements will move smoothly and disappear.
<Puffs style={{ width: '100%', height: 300 }} />| Prop name | Type | Default | Description |
|---|---|---|---|
| theme | any | Required | |
| classes | any | Required | |
| animate | bool | true | |
| puffInterval | number | 5000 | How often to create new puffs. Should be greater than 4000ms. |
| quantity | number | 8 | Total number of puffs to create. |
| Method name | Parameters | Description |
|---|---|---|
| stopAnimations | ||
| startAnimations | ||
| onPuffs | Create a random set of puffs on the back of the container. | |
| createPuff | Create a puff with random valid properties. Returns HTMLElement |
Source code: src/Puffs Open in: Playground