AOS - Animation on scroll · HenriikOliveira

capa

A biblioteca AOS (Animation On Scroll) é uma ferramenta de programação front-end que permite a criação de animações em elementos da página enquanto o usuário rola a página. Essa biblioteca é muito popular entre desenvolvedores de web que buscam adicionar animações dinâmicas e interativas em seus sites e aplicativos.

Uma das principais vantagens da AOS é a facilidade de uso. Com apenas algumas linhas de código, é possível adicionar efeitos de animação a elementos específicos da página, como imagens, textos e blocos de conteúdo.

A biblioteca é compatível com a maioria dos navegadores modernos e possui uma documentação detalhada, o que torna a implementação da AOS em um projeto relativamente fácil, mesmo para desenvolvedores com pouca experiência em animação.

Outra característica útil da AOS é a sua flexibilidade e customização. É possível ajustar vários parâmetros de animação, como a velocidade, duração e tipo de transição, para criar efeitos únicos e personalizados.

Também é possível definir animações diferentes para cada elemento da página, o que permite uma ampla gama de opções de animação para um projeto.

Além disso, a AOS é uma biblioteca leve e de alto desempenho, o que significa que ela não prejudica a velocidade ou a capacidade de resposta da página.

Isso é especialmente importante para sites e aplicativos que visam oferecer uma experiência de usuário de alta qualidade e rápida.

Em resumo, a biblioteca AOS é uma ferramenta poderosa e fácil de usar que pode adicionar animações dinâmicas e interativas em elementos da página conforme o usuário rola a página. Com sua flexibilidade, customização e alto desempenho, é uma ótima opção para desenvolvedores de web que buscam criar sites e aplicativos atraentes e envolventes.

Instalação -

Javascript:
npm i aos --save

TypeScript:
npm i --save-dev @types/aos

Utilização simples -

import AOS from "aos";

import "aos/dist/aos.css";
import "./index.css";

export default function App() {
  AOS.init({
    duration: 500,
  });

  return (
    <div className="App">
      <div className="block" data-aos="fade-up">
        1
      </div>
      <div className="block" data-aos="fade-up">
        2
      </div>
      <div className="block" data-aos="zoom-in-right">
        3
      </div>
      <div className="block" data-aos="flip-up">
        4
      </div>
    </div>
  );
}

Site da lib - link
Minha publicação no linkedin sobre - link