Installation
npm
1
npm install react-animate-containeryarn
1
yarn add react-animate-containerTo use react-animate-container with Next.js
react-animate-container was originally developed for use with react.js but can be made to work with next.js.
For this we only have to add in the "next.config.js" file, react-animate-container inside transpilePackages.
1
2
3
4
const nextConfig = {
transpilePackages: ['react-animate-container'],
};Probbably you will see an error in the console, this is a known issue and will be fixed in the next version.
Create your first animation
Let's create our first animation, we will use the "fadeIn" animation.
First we import the "AnimateContainer" component from react-animate-container
1
import { AnimateContainer } from 'react-animate-container';Then we use the "AnimateContainer" component and use the "fadeIn" animation.
In this example we will animate a "h1" tag.
1
2
3
<AnimateContainer.fadeIn>
<h1>react-animate-container</h1>
</AnimateContainer.fadeIn>And that's it, we have our first animation.
Your file should look like this:
1
2
3
4
5
6
7
8
9
10
import { AnimateContainer } from 'react-animate-container';
const MyComponent = () => {
return (
<AnimateContainer.fadeIn>
<h1>react-animate-container</h1>
</AnimateContainer.fadeIn>
);
};
And that's it, we have our first animation.
This is the result: