https://github.com/useallfive/drizzle-react-reveal-animations
https://github.com/useallfive/drizzle-react-reveal-animations
Last synced: 11 months ago
JSON representation
- Host: GitHub
- URL: https://github.com/useallfive/drizzle-react-reveal-animations
- Owner: UseAllFive
- License: mit
- Created: 2020-03-06T02:31:27.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2023-01-06T04:28:01.000Z (over 3 years ago)
- Last Synced: 2025-07-05T16:19:17.605Z (12 months ago)
- Language: JavaScript
- Size: 1.14 MB
- Stars: 0
- Watchers: 10
- Forks: 0
- Open Issues: 25
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-drizzle
> A react library to help sequence reveal animations on scroll.
[](https://www.npmjs.com/package/react-drizzle) [](https://standardjs.com)
## Install
```bash
npm install --save react-drizzle
```
Requires Peer Dependency: gsap
```
npm install --save gsap
```
## Usage
```jsx
import React, { Component } from 'react'
import Drizzle, { DrizzleSettings } from 'react-drizzle'
class Example extends Component {
render() {
return (
Text you
want to
Animate
{/* it will wait to load image before revealing the group */}
)
}
}
```
### Attributes
#### ``
- `type`: `fade` or `text`. Can take a direction:
- `-up`, `-down`, `-left`, `-right`, ex: `type="fade-down"`
- `order`: Number - if this isn't set, it picks the order based off creation order. Elements with an order set always rank higher than elements without an order. The plugin sets a calculated order — for example, if two elements have the order 1, 5, 7, the calculated orders get set to 0, 1, 2.
- `speed`: Number in seconds (default: 1) - the time it takes for a single Drizzle element to appear. This is multiplied by its calculated order.
- `delay`: Number in seconds (default: 0) - the amount of time to wait to reveal the item, after it is ready to reveal.
- `distance`: Number - pixel distance (default: 25). Used for movement, such as a `fade-up`
- `onAppear`: Function - callback that triggers when the item is ready to reveal, e.g. when the item moves into view.
- `visibilityRootMargin` String or Number - (default: 0) Margin around the root. See [Intersection Observer API
](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_concepts_and_usage)
- `visibilityThreshold` Array or Number - (default: 0.3) Indicates at what percentage of the target's visibility the observer's callback should be executed [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API#Intersection_observer_concepts_and_usage)
- `containerSx`: Extend sx props to the container element
- `containerStyle`: Extend style props to the container element
- `sx`: Extend sx props to the underlying animation element
- `style`: Extend style props to the underlying animation element
#### `` - global settings applied to all child `` elements
- Can set defaults for `speed`, `delay`, `distance`, `visibilityRootMargin`, `visibilityThreshold`.
- `staggerSpeed`: Number in seconds (default: 0.1) - the time to wait between revealing Drizzle items within the group.
- `ease`: String (default: 'Power2.easeOut') - a GSAP tween. ex: `ease={'elastic.out(1, 0.3)'}`
- [GSAP Ease Visualizer](https://greensock.com/ease-visualizer/)
- `waitForChildImages`: Boolean (default: true) - doesn't reveal group until images in the group are loaded.
- `textLineStaggerSpeed`: Number in seconds (default: 0.1) - for `type="text"`; the time to wait between revealing lines of text.
#### Order of operations:
Drizzle is on screen, wait for staggerSpeed, wait for delay speed, then display its children.
## License
MIT © [UseAllFive](https://github.com/UseAllFive)