Utilização da lib

1. Nós iremos utilizar o AOS para essa página, que é a mesma lib que nós utilizamos no módulo de bootstrap na página da spaceX. ⇒ https://michalsnik.github.io/aos/

2. Nós iremos fazer a instalação dela via NPM.

   npm install aos
   

   npm i --save-dev @types/aos
   

3. Com isso, nós podemos fazer o uso dele no index da nossa página “homeNoAuth”

   import AOS from "aos";
   import "aos/dist/aos.css";
   

4. E agora nós iremos utilizar um useEffect para darmos início ao AOS.

   useEffect(() => {
   	AOS.init();
   }, []);
   

5. Com o AOS agora iniciado pelo useEffect, nós podemos colocar os nossos components dentro de divs e fazer com que essas divs tenham animações

   <main>
   	<div className={styles.sectionBackground} data-aos="fade-zoom-in" data-aos-duration="1600">
   		<HeaderNoAuth />
   		<PresentationSection />
   	</div>
   	<div data-aos="fade-right" data-aos-duration="1200">
   		<CardsSection />
   	</div>
   	<div data-aos="fade-up" data-aos-duration="1350">
   		<SlideSection newestCourses={course} />
   	</div>
   	<Footer />
   </main>
   

6. Nós podemos ver agora que o nosso AOS está funcionando perfeitamente. Com isso, a nossa página está 100% finalizada.

Commit do git

1. Foi algo pequeno, não será necessário o commit

Conclusão

O que foi feito/visto nessa aula:

1. Instalação do AOS
2. Utilização do AOS na homeNoAuth