Anime.js - uma biblioteca leve de animação em JavaScript
Animação Web já percorreu um longo caminho. Não só os desenvolvedores podem fazer qualquer animação usando uma combinação de CSS / SVG / JS, mas também dezenas de bibliotecas gratuitas para poupar tempo no processo.
Um dos meus favoritos é Anime.js, um open source completamente gratuito Biblioteca de animação JavaScript.
Esta biblioteca pode faça tudo. Está construído em JavaScript mas também depende muito de animações CSS. Você pode segmentar elementos de página individuais via DOM ou você pode até mesmo mirar SVGs personalizados.
Toda a documentação é auto-hospedado no GitHub, então você pode precisar rolar para encontrar exatamente o que está procurando. Mas cada recurso de animação vem com alguns parâmetros como atraso, duração e atenuação.
Observe esta biblioteca não vem com muitos estilos de animação padrão. Anime.js é feito para desenvolvedores quem quer personalizar suas animações sem escrever o código detalhado.
Para exemplo vivo, confira a caneta Codepen abaixo. O código é extremamente simples mas você tem uma animação crível com squash & stretch mais antecipação, ambos os fundamentos da animação.
Um aviso justo: a biblioteca Anime.js é denso. Não é tão difícil criar uma animação personalizada, mas você precisa entender algumas noções básicas como atenuação e sintaxe JavaScript comum para os retornos de chamada e opções.
Mas Toda a informação que você precisa Está no página de repo, Incluindo lotes de amostras de código e tabelas de documentação detalhadas. E você pode navegar através de relatórios de bugs abertos ou verificar o suporte ao navegador que atualmente inclui todos os principais navegadores e IE 10+.
Esta é facilmente uma das melhores bibliotecas de animação para desenvolvedores web e deve ser sua solução para qualquer animação web complexa.
Para ver um monte de exemplos vivos, Confira esta coleção de demos Anime.js hospedados no CodePen. Abaixo, eu incorporado meu favorito que anima o logo inteiro do zero, com verdadeira vivacidade.
