Loaders animados com GSAP - Parte 1

Um passo-a-passo de como criar três loaders animados bem legais usando a Greensock Animation API

Featured image

Tira o casaco, pega um copo d’água e abra as janelas. A dica de hoje vai ser quente!

Colocando as frases de feito de lado, nesse artigo vou mostrar um pouco de como fazer algumas animações usando a biblioteca de animação GSAP.

Se você nunca ouviu falar nela, me parece o momento propício para começar.

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. Combinando sua capacidade de criar animações com alta performance em uma API amigável e com tamanho bem reduzido, o CÉU É O LIMITE.

Doggo

Para mostrar uma pequena parte de todo o seu poder, vou dividir esse artigo em três. Em cada parte iremos criar um loader usando elementos diferentes da API.

Segue os 3 efeitos que vamos fazer ao longo dessa série:

3 pontos

See the Pen GSAP - Square to Ball by Thiago Rossener (@thiagorossener) on CodePen.

Bola quicando

See the Pen GSAP - Bouncy Ball by Thiago Rossener (@thiagorossener) on CodePen.

Símbolo de infinito

See the Pen GSAP - Infinite Loader by Thiago Rossener (@thiagorossener) on CodePen.

Resumindo

Antes de começarmos, você precisa saber que existem 4 bibliotecas dentro da GSAP:

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 features contidas em cada biblioteca.

Instalando a GSAP

Há várias maneiras de instalar a biblioteca, entre elas:

Nós vamos fazer do jeito mais fácil e vamos simplesmente incluir o script TweenMax (que contém todas as bibliotecas).

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.3/TweenMax.min.js"></script>

Simples assim.

Colocando a mão na massa

Para o nosso primeiro loader vamos criar uma animação de um quadrado se tornando em uma bola e vice-versa.

Antes de tudo, vamos criar o HTML e o CSS.

<div class="square-ball"></div>
<div class="square-ball"></div>
<div class="square-ball"></div>

Para o CSS, primeiro costumo fazer um reset de todos os elementos. Em seguida, centralizo tudo na tela usando flexbox:

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-color: #C7D3BF;
}

E finalmente, estilizamos o nosso elemento:

.square-ball {
  width: 40px;
  height: 40px;
  background-color: #04A777;
  border: 5px solid #048962;
  transform: rotate(45deg);
  margin: 0 15px;
}

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:

TweenMax.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:

var props = {
  backgroundColor: 'red',
  borderRadius: '50%'
}

Além disso, você também pode animar transformações. Para isso, as propriedades são um pouquinho diferentes:

var props = {
  x: 100, // É o equivalente a translateX
  y: 100, // É o equivalente a translateY
  rotation: 45 // É o equivalente ao rotate, e a unidade é em graus
}

Um detalhe muito importante é o eixo cartesiano em que as transformações funcionam:

Eixos

Tenha isso em mente quando for criar suas animações.

Animando o nosso loader!

Agora que cobrimos o básico da biblioteca da Greensock, bora animar.

Começamos selecionando os nossos elementos:

var element = document.querySelectorAll('.square-ball');

Então criamos um tween usando o método .to() e dizemos que a animação terá 1 segundo.

TweenMax.to(element, 1, {});

Por fim, vamos adicionar as propriedades. Aqui, queremos que o nosso elemento vá para o seguinte estado:

TweenMax.to(element, 1, {
  scale: .6,
  borderRadius: '50%',
  rotation: 360
});

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.

TweenMax.to(element, 1, {
  scale: .6,
  borderRadius: '50%',
  rotation: 360,
  repeat: -1
});

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.

TweenMax.to(element, 1, {
  scale: .6,
  borderRadius: '50%',
  rotation: 360,
  repeat: -1,
  yoyo: true
});

E para finalizar, vamos dizer para ela demorar um tempinho antes de repetir, para isso vamos usar a propriedade repeatDelay:

TweenMax.to(element, 1, {
  scale: .6,
  borderRadius: '50%',
  rotation: 360,
  repeat: -1,
  repeatDelay: .5,
  yoyo: true
});

E pronto! Temos o nosso primeiro loader. Espero que tenha entendido um pouco mais sobre essa incrível biblioteca e se divertido.

Fique ligado, no próximo artigo da série, vou falar de mais uma biblioteca da GSAP, a TimelineMax.