Como Utilizar o AOS no Angular v.17

AOS (Animate On Scroll) é uma biblioteca que permite adicionar animações ao conteúdo da página enquanto o usuário rola. Este tutorial irá guiá-lo através do processo de integração e utilização do AOS em um projeto Angular.

🌟 Passo 1: Instalar o AOS

Para instalar o AOS, utilize o npm (Node Package Manager). Abra o terminal e navegue até o diretório do seu projeto Angular, em seguida, execute o comando:

npm install aos --save

🌟 Passo 2: Importar o AOS no Projeto

Após instalar a biblioteca, é necessário importá-la no seu projeto Angular. Para isso, adicione o AOS ao arquivo angular.json na seção de scripts e styles:

"styles": [
 "src/styles.css",
 "node_modules/aos/dist/aos.css"
],
"scripts": ["node_modules/aos/dist/aos.js"]

🌟 Passo 3: Instalar o AOS no @type

Instala as definições de tipo TypeScript para a biblioteca AOS como uma dependência de desenvolvimento em seu projeto.

npm i --save-dev @types/aos

🌟 Passo 4: Inicializar o AOS

Para inicializar o AOS, abra o arquivo app.component.ts ou o arquivo do componente principal que você está utilizando e adicione o seguinte código:

import { Component, OnInit } from '@angular/core';
import { RouterOutlet } from '@angular/router';
import * as AOS from 'aos';  // --> Importando a biblioteca

@Component({
  selector: 'app-root',
  standalone: true,
  imports: [RouterOutlet],
  templateUrl: './app.component.html',
  styleUrl: './app.component.css',
})
export class AppComponent implements OnInit {
  title = 'Angular_Projeto';
 
  // Inicializado o AOS
    ngOnInit(): void {
        AOS.init();
        window.addEventListener('load', AOS.refresh);
    }
}

🌟 Passo 5: Adicionar Animações aos Elementos

Agora você pode adicionar animações aos elementos do seu template usando os atributos data-aos. Abra o arquivo de template HTML (.html) do seu componente e adicione o atributo data-aos aos elementos que você deseja animar. Por exemplo:

<div data-aos="fade-up">
<h1>Bem-vindo ao meu site!</h1>
<p>Este parágrafo será animado quando você rolar a página.</p>
</div>

<div data-aos="zoom-in">
<img src="assets/imagem.jpg" alt="Imagem">
</div>

🌟 Passo 6: Personalizar as Animações

Você pode personalizar as animações utilizando diferentes opções do AOS, como duração, atraso, entre outras. Aqui estão alguns exemplos de como você pode fazer isso:

<div data-aos="fade-up" data-aos-duration="1500">
<h1>Animação com duração de 1.5 segundos</h1>
</div>

<div data-aos="zoom-in" data-aos-delay="300">
<img src="assets/imagem.jpg" alt="Imagem" data-aos-duration="2000">
</div>

🌟 Passo 7: Opções Globais de Configuração

Se desejar definir configurações globais para todas as animações, você pode passar um objeto de configuração para o método AOS.init(). Por exemplo:

ngOnInit() {
  AOS.init({
      duration: 1200, // duração em milissegundos
      easing: 'ease-in-out', // tipo de easing
      once: true // animação só ocorre uma vez
  });
  window.addEventListener('load', AOS.refresh);
}

🚀 Conclusão

A integração do AOS em um projeto Angular é simples e adiciona um toque dinâmico ao seu site. Com passos básicos de instalação, importação, inicialização e configuração, você pode facilmente adicionar animações atraentes ao rolar a página. Aproveite o poder do AOS para melhorar a experiência do usuário em seu aplicativo Angular.

Site Oficial com exemplo de uso:

🔗🕸 https://michalsnik.github.io/aos/

Repositório com a documentação:

🔗🙀 https://github.com/michalsnik/aos