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