react-animate-container
Welcome to react-animate-container!!
- Get started with react-animate-container
- See the Configuration to use all react-animate-container features.
- Want to see how it works? Check our Demos
What is react-animate-container?
react-animate-container (<AnimateContainer />), is a react component built-in Typescript typings and it was created to make it easier for Developers to add animations that usually have to create from scratch.
It is very easy to use, you just have to import the component and choose the animation you want to use. But there are more than just choose the animation, <AnimateContainer /> also allows you to customize and parameterize how and when to show the animation, as well as what to do before and after, the duration time, set delay, among other options.
How it works?
- Choose the animation:
There are right now 53 (working to add more) different animation, some of them in-animation and other out-animation, then it is as simple as selecting one and adding as children the content (components) that you want to animate. - Show the animation:
There are two ways to show the animation
1. Intersection observer (default): The animation will be shown once the 50% of the content is in the viewport. (Don't worry, these parameters can be changed and also the component can use another component as reference for the intersection observer)
2. Manual active: To activate the animation manually, it is only necessary to indicate to the component that the activation will be manual through the "manualActive" property and then with the "active" property indicate when to activate it.
See more: configration⇢
Integrations
This is a component (as the name says) for React.js, but we know you can find the way to use it with different frameworks 😉.
The future of react-animate-container
There are many new features planned to be added, such as new animations, special animations for texts, color animations and filters, but the next step is to complete all the documentation (yes, it is still missing), finish the tests, add documentation for the community ( yes, I'm talking about you) can collaborate and make this component grow.
So, let's start ⇢