https://github.com/friedrith/react-progressive-entrance
React components to create nice-looking progressive entrance
https://github.com/friedrith/react-progressive-entrance
animation js react
Last synced: 3 months ago
JSON representation
React components to create nice-looking progressive entrance
- Host: GitHub
- URL: https://github.com/friedrith/react-progressive-entrance
- Owner: friedrith
- License: mit
- Created: 2018-07-28T16:40:43.000Z (almost 8 years ago)
- Default Branch: master
- Last Pushed: 2019-12-27T23:45:50.000Z (over 6 years ago)
- Last Synced: 2026-03-17T22:56:28.779Z (4 months ago)
- Topics: animation, js, react
- Language: JavaScript
- Homepage: https://friedrith.github.io/react-progressive-entrance/
- Size: 1020 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# react-progressive-entrance
React components to create nice-looking progressive entrance
In comparison with other react libraries
like [ReactCSSTransitionGroup](https://reactjs.org/docs/animation.html),
**React-progressive-entrance** uses
new feature of React 16.6: context. It means that
you can animate any descending child component of the group and not only
the first level child.
It allows you create sophisticated animated entrances more easily.
## Getting started
> Before installing it, notice that this library only works with **React 16.3+** because it uses the API of context.
```bash
# with npm
$ npm install react-progressive-entrance --save
$ yarn add react-progressive-entrance
```
## How to use it
Like some other animation libraries in React, **react-progressive-entrance** is based on 2 kind of components:
a parent item and children items.
```js
import { AnimatedGroup, AnimatedItem } from 'react-progressive-entrance'
export default = () => (
Title
Item 1
Item 1
Item 1
Item 2
Item 1
Item 2
Item 1
Item 2
)
```
You also need to define your class in your stylesheet
```css
/* for fade animation */
.fade-enter {
/* before animation */
opacity: 0;
}
.fade-enter-active {
/* after animation */
opacity: 1;
transition: opacity 250ms ease-in;
}
/* for slide from left animation */
.slide-left-enter {
/* before animation */
transform: translateX(-2000px);
}
.slide-left-enter-active {
/* after animation */
transform: translateX(0);
transition: transform 700ms ease-out;
}
/* for slide from right animation */
.slide-right-enter {
/* before animtion */
transform: translateX(2000px);
}
.slide-right-enter-active {
/* after animation */
transform: translateX(0);
transition: transform 700ms ease-out;
}
```
You can of course add your own animations and refers to it thanks to the property animation.
## API
### AnimatedGroup
| Property | Type | Default value | Description |
| --------- | ------ | ------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animation | string | fade | The animation when the components appear. Only **fade**, **slide-left** and **slide-right** natively exists but you can add your own animations. |
| interval | number | 200 | It is the minimum timing between 2 animations |
| pitch | number | 1 | After each interval of time, the threshold of the **AnimatedGroup** is incremented by the pitch. Most of the time, this value doesn't need to be changed. However, it may useful when you want to reinsert new items between existing ones. |
| trigger | string | mount | Define the way the animation will be triggered. With the value 'mount', the animation will started as soon as the **AnimatedGroup** is mounted. Otherwise, you can manually trigger the animation using the function **play** of the **AnimatedGroup**. |
### AnimatedItem
| Property | Type | Default value | Description |
| --------- | ------------- | ------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| animation | string | fade | This value overloads value defined by **AnimatedGroup** only for the current item if it is defined. |
| index | number/string | 'auto' | The iteration value of the **AnimatedGroup** that will trigger the animation of the current item. If set to 'auto', the nodes will be displayed according to the order they are mounted into the DOM. |
## Changelog
### Version 0.4.0
- maxIndex is now set up automatically
- create a 'auto' value for index
- rename `animationIndex` for `index`
### Version 0.3.0
- Several nodes children of a `AnimatedItem` are now displayed progressively
### Version 0.2.0
- Release of the first version