Introdução
Se você já teve que fazer animações complexas na mão algumas vezes, provavelmente suou a camisa pra colocar tudo pra rodar suave com menos código possível.
Eis que existe uma biblioteca que deixa tudo isso muito mais fácil, e o nome dela é GSAP.
GSAP, ou Greensock Animation API, é uma biblioteca JS que, apesar do nome, não foi criada para aquecer nossos pés, mas sim nossos corações (❤️).
Com sua capacidade de criar animações de alta performance somada a uma API amigável e de tamanho bem reduzido, o céu é o limite meus caros.
Para mostrar uma pequena parte de todo o seu poder, criei essa série de 3 artigos. Em cada artigo iremos criar um loader usando elementos diferentes da API.
Abaixo estão as três animações que vamos fazer ao longo dessa série:
3 pontos
Bola quicando
Símbolo de infinito
Bibliotecas da GSAP
Antes de começarmos, você precisa saber que existem 4 bibliotecas dentro da GSAP:
- TweenLite
- TweenMax
- TimelineLite
- TimelineMax
A Tween permite criar animações isoladas, enquanto a Timeline permite encadear animações, criando um fluxo contínuo.
Os sufixos Lite e Max são usados para distinguir a quantidade de funcionalidades contidas em cada biblioteca.
Instalando a GSAP
Há várias maneiras de instalar a biblioteca, entre elas:
- Baixar o arquivo .zip diretamente do site
- Incluir o script pela url da CDN
- Usando
npm install gsap
Nós vamos fazer do jeito mais fácil e vamos simplesmente incluir o script TweenMax (que contém todas as bibliotecas).
1<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>
Simples assim.
Estruturando o HTML
Para o nosso primeiro loader vamos criar uma animação de um quadrado se tornando uma bola e vice-versa.
Antes de tudo, vamos criar o HTML.
1<div class="square-ball"></div> 2<div class="square-ball"></div> 3<div class="square-ball"></div>
Adicionando o CSS
Para o CSS, primeiro costumo fazer um reset de todos os elementos. Em seguida, centralizo tudo na tela usando flexbox:
1* { 2 margin: 0; 3 padding: 0; 4 box-sizing: border-box; 5} 6 7body { 8 display: flex; 9 align-items: center; 10 justify-content: center; 11 height: 100vh; 12 background-color: #c7d3bf; 13}
E finalmente, estilizamos o nosso elemento:
1.square-ball { 2 width: 40px; 3 height: 40px; 4 background-color: #04a777; 5 border: 5px solid #048962; 6 transform: rotate(45deg); 7 margin: 0 15px; 8}
Com os elementos estilizados, vamos entender um pouco da lib.
O feijão com arroz da GSAP
O tipo de animação mais simples da biblioteca é um tween. Um tween nada mais é que um único movimento em uma animação.
A sintaxe de um tween é assim:
1TweenMax.method(element, duration, props)
method é o método da GSAP que vamos usar para a animação.
element é o elemento que você deseja animar. Aqui você pode passar um array de elementos que ele funciona da mesma maneira.
duration é a duração da animação. É expressa em segundos e recebe um número inteiro.
props é um objeto das propriedades do elemento que você quer animar.
Para contextualizar o que vamos fazer a seguir, vamos entender 3 métodos básicos da biblioteca GSAP, são eles:
from
Anima o elemento a partir da props que você passar até as propriedades CSS atuais do elemento.
Ex: Se no CSS temos uma <div> com o background azul e em props dizemos que o background é vermelho, a animação vai transformar o background de vermelho para azul.
to
Anima o elemento a partir das suas propriedades CSS atuais até as propriedades passadas em props.
Ex: Se no CSS temos uma <div> com o background azul e em props dizemos que o background é vermelho, a animação vai transformar o background de azul para vermelho.
fromTo
Anima o elemento das props passadas como from até as props passadas como to.
Um pouco sobre as props
props são objetos onde você especifica as propriedades CSS que você deseja animar, basta formatar o nome das propriedades CSS em camel case.
Por exemplo:
1var props = { 2 backgroundColor: "red", 3 borderRadius: "50%", 4}
Além disso, você também pode animar transformações. Para isso, as propriedades são um pouquinho diferentes:
1var props = { 2 x: 100, // É o equivalente a translateX 3 y: 100, // É o equivalente a translateY 4 rotation: 45, // É o equivalente ao rotate, e a unidade é em graus 5}
Um detalhe muito importante é o eixo cartesiano em que as transformações funcionam:
Tenha isso em mente quando for criar suas animações.
Animando o loader
Agora que cobrimos o básico da biblioteca da GreenSock, bora animar.
Começamos selecionando os nossos elementos:
1var element = document.querySelectorAll(".square-ball")
Então criamos um tween usando o método .to() e dizemos que a animação terá 1 segundo.
1TweenMax.to(element, 1, {})
Por fim, vamos adicionar as propriedades. Aqui, queremos que o nosso elemento vá para o seguinte estado:
- Reduza seu tamanho em 40%
- Tenha bordas arredondadas, ou seja, se transforme numa bola
- Gire
1TweenMax.to(element, 1, { 2 scale: 0.6, 3 borderRadius: "50%", 4 rotation: 360, 5})
Legal, até aqui já temos a nossa primeira animação funcionando. Porém, note que o elemento anima apenas uma vez, vamos alterar isso usando a propriedade repeat e passando o valor -1.
Esse valor diz para a nossa animação repetir infinitamente.
1TweenMax.to(element, 1, { 2 scale: 0.6, 3 borderRadius: "50%", 4 rotation: 360, 5 repeat: -1, 6})
Agora ela se repete, mas tem algo estranho. A animação não está fluida e sempre que ela se repete, começa do quadrado novamente.
Para melhorar isso, vamos usar a propriedade yoyo: true, que diz à animação para que ao terminar, ela volte, fazendo a mesma coisa.
1TweenMax.to(element, 1, { 2 scale: 0.6, 3 borderRadius: "50%", 4 rotation: 360, 5 repeat: -1, 6 yoyo: true, 7})
E para finalizar, vamos dizer para ela demorar um tempinho antes de repetir, para isso vamos usar a propriedade repeatDelay:
1TweenMax.to(element, 1, { 2 scale: 0.6, 3 borderRadius: "50%", 4 rotation: 360, 5 repeat: -1, 6 repeatDelay: 0.5, 7 yoyo: true, 8})
E pronto! Temos o nosso primeiro loader.
Espero que tenha entendido um pouco mais sobre essa incrível biblioteca e, principalmente, tenha se divertido.
No próximo artigo da série, vou falar de mais uma biblioteca da GSAP, a TimelineMax, acesse aqui.
