How to Create an intersection onScroll animated fade in text or object in Next js with just 2 lines of code in 1 minute
in this tutorial, we are going to be creating a text or object fade in on scroll using react-awesome-reveal, so without wasting much of our time let's get started,
#Create a new app npx create-next-app onScroll_tutorial
cd into your newly created app template cd onScroll_tutorial
in your terminal type npm install react-awesome-reveal or yarn add react-awesome-reveal
check your package.json to check if it has been installed
react-awesome-reveal support a list of animation components type to choose from
- Fade
- Zoom and a lot more but for this tutorial we are going to stick with Fade components
import {Fade} from 'react-awesome-reveal'
const Home = () => {
return (
<>
<Head>
<title>onScroll animation</title>
<link
rel="icon"
href="/icon/favicon.svg"
/>
<meta
name="description"
content=""
/>
</Head>
<div className={aboutStyles.container}>
<Fade direction="up">
<div className={aboutStyles.hero_wrapper}>
<h1>OnScrolll Animation</h1>
<p className={aboutStyles.description}>
Learning animation with react-awesome-reveal
</p>
</div>
</Fade>
<div>
<Fade direction="up">
<h2 className={aboutStyles.headingXl}>Meet the Team</h2>
<hr />
</Fade>
<Fade direction="up">
<div className={aboutStyles.teams_container}>
{teams.map((team) => {
return (
<div
key={team.name}
className={aboutStyles.teamWrapper}
>
<Image
src={team.url}
width={400}
height={400}
alt={team.name}
priority
/>
<div className={aboutStyles.teamBio}>
<h2>{team.name}</h2>
<span>{team.position}</span>
</div>
</div>
);
})}
</div>
</Fade>
</div>
<Fade direction="up">
<Fade direction="right">
<GetStarted />
</Fade>
</Fade>
</div>
</>
);
};
export default Home;