Loaders animados com GSAP - Parte 3

Introdução

Ao longo dessa série já mostrei pra vocês como criar um simples loader transformando um quadrado em círculo e um loader de bola quicando.

Para essa terceira e última parte, vou mostrar mais uma função da GSAP, além de aumentar um pouquinho a complexidade da nossa animação.

Neste artigo, vamos criar um loader que desenha o símbolo de infinito com vários círculos.

Estruturando o HTML

A nossa estrutura HTML é bem simples, composta por vários elementos, cada um representando um círculo da animação.

Você pode adicionar quantos elementos você quiser. No exemplo, vamos usar oito.

1<div class="circle"></div>
2<div class="circle"></div>
3<div class="circle"></div>
4<div class="circle"></div>
5<div class="circle"></div>
6<div class="circle"></div>
7<div class="circle"></div>
8<div class="circle"></div>

Adicionando o CSS

Primeiro faço o reset de todos os elementos, depois adiciono um fundo degradê bem bacana com uns tons de roxo.

1* {
2  padding: 0;
3  margin: 0;
4  box-sizing: border-box;
5}
6
7body {
8  height: 100vh;
9  background: linear-gradient(
10    to bottom right,
11    rgba(15, 34, 154, 1),
12    rgba(146, 45, 166, 1)
13  );
14}

Então adicionamos o estilo para o nosso círculo:

1.circle {
2  width: 20px;
3  height: 20px;
4  border-radius: 50%;
5  background-color: #fff;
6  position: absolute;
7  top: 50%;
8  left: 50%;
9  transform: translate(-50%, -50%);
10  box-shadow: 0px 0px 5px 2px rgba(255, 255, 255, 0.5);
11}

Perceba que todos os círculos estão posicionados um sobre os outros no centro da tela, esse será o estado final da nossa animação.

Conheça as funções de stagger

Os métodos:

• staggerFrom()
• staggerTo()
• staggerFromTo()

Funcionam como os métodos:

• from()
• to()
• fromTo()

Que foram explicados no primeiro artigo.

As funções servem para animar um elemento de um estado a outro de acordo com as props passadas como parâmetro, porém com alguns detalhes a mais.

Ao usarmos um método de stagger, podemos passar uma lista de elementos que desejamos animar e uma distância de tempo específico em que a animação de cada elemento irá iniciar.

Por exemplo:

1var circle = document.querySelectorAll(".circle")
2
3TweenMax.staggerFromTo(
4  circle,
5  1,
6  {
7    x: -100,
8  },
9  {
10    x: 100,
11    stagger: "0.1",
12  }
13)

No código acima, estamos criando um tween que irá animar cada círculo a partir da posição x: -100 até a posição x: 100 em um segundo, e cada animação de 1 segundo irá iniciar com intervalos de 0.1 segundos entre elas.

Experimente brincar um pouco com os tempos da animação para entender melhor como funciona o método de stagger.

Animando o loader

Antes de tudo, selecionamos todos os elementos de círculo:

1var circle = document.querySelectorAll(".circle")

Para a animação, vou usar a biblioteca TimelineMax da GSAP, assim como fizemos no artigo anterior. Porém, também é possível ter o mesmo resultado usando a Tween, como no exemplo logo acima.

Então vamos iniciar instanciando a timeline:

1var tl = new TimelineMax()

Em seguida, precisamos criar o conjunto de props que servirá de estado inicial para cada círculo, ou seja, o nosso from.

1tl.staggerFromTo(circle, 1, {
2  autoAlpha: 0,
3  scale: 0.1,
4})

Aqui estamos dizendo que o estado inicial de cada círculo será:

• autoAlpha: 0, ou seja, transparente
• scale: .1, 10% do seu tamanho original, aquele atribuído no CSS

Agora, vamos criar as props do estado final, o nosso to.

1tl.staggerFromTo(
2  circle,
3  1,
4  {
5    autoAlpha: 0,
6    scale: 0.1,
7  },
8  {
9    autoAlpha: 1,
10    scale: 1,
11  }
12)

Aqui estamos dizendo que o estado final de cada círculo será:

• autoAlpha: 1, 100% visível
• scale: 1, 100% do seu tamanho original

Nesse ponto já temos alguma animação. Todos os círculos partem de 10% do seu tamanho para 100% do seu tamanho ao mesmo tempo.

O próximo passo será fazer esses círculos traçarem uma curva no formato do símbolo de infinito.

Curva de Bézier

O segredo para fazer a animação traçar o formato de um símbolo de infinito é utilizar o BezierPlugin da GSAP, que nos permite animar elementos ao longo do caminho de uma curva de Bézier.

Segundo a Wikipédia:

‘‘

"A curva de Bézier é uma curva polinomial expressa como a interpolação linear entre alguns pontos representativos, chamados de pontos de controle."

Essa definição é um pouco complexa e difícil de entender, eu sugiro a você acessar o artigo completo da Wikipédia para mais detalhes, caso tenha interesse.

Em resumo, o plugin da GSAP nos permite criar pontos chave para o caminho que a animação deve percorrer, onde, para cada dois pontos, o plugin os conecta por meio de uma curva, ao invés de uma reta.

Os pontos que iremos criar são os seguintes:

Iremos passar esses pontos através da propriedade bezier, e então a GSAP dá conta da animação.

1tl.staggerFromTo(
2  circle,
3  1,
4  {
5    autoAlpha: 0,
6    scale: 0.1,
7  },
8  {
9    autoAlpha: 1,
10    scale: 1,
11    bezier: {
12      type: "soft",
13      values: [
14        { x: -50, y: -50 }, // P1
15        { x: -100, y: 0 }, // P2
16        { x: -50, y: 50 }, // P3
17        { x: 50, y: -50 }, // P4
18        { x: 100, y: 0 }, // P5
19        { x: 50, y: 50 }, // P6
20        { x: 0, y: 0 }, // P7
21      ],
22    },
23  }
24)

Intervalo entre animações

Depois de atribuir os pontos para a curva de Bézier, a animação já traça o símbolo de infinito, mas parece que só temos um único círculo. Isso ocorre porque todos estão se movendo ao mesmo tempo.

Agora sim, chegou o momento de adicionar o tempo de intervalo entre o início de uma animação e outra. Para isso, vamos simplesmente adicionar a propriedade stagger: .1.

1tl.staggerFromTo(
2  circle,
3  1,
4  {
5    autoAlpha: 0,
6    scale: 0.1,
7  },
8  {
9    autoAlpha: 1,
10    scale: 1,
11    bezier: {
12      type: "soft",
13      values: [
14        { x: -50, y: -50 }, // P1
15        { x: -100, y: 0 }, // P2
16        { x: -50, y: 50 }, // P3
17        { x: 50, y: -50 }, // P4
18        { x: 100, y: 0 }, // P5
19        { x: 50, y: 50 }, // P6
20        { x: 0, y: 0 }, // P7
21      ],
22    },
23    stagger: 0.1,
24  }
25)

Repetindo infinitamente

Falta um último detalhe para o nosso loader ficar completo. Precisamos fazê-lo se repetir infinitamente e com fluidez.

Se você acompanhou as outras partes da série já deve imaginar que estou falando das propriedades repeat: -1 e yoyo: true.

1var circle = document.querySelectorAll(".circle")
2
3var tl = new TimelineMax({ repeat: -1, yoyo: true })
4
5tl.staggerFromTo(
6  circle,
7  1,
8  {
9    autoAlpha: 0,
10    scale: 0.1,
11  },
12  {
13    autoAlpha: 1,
14    scale: 1,
15    bezier: {
16      type: "soft",
17      values: [
18        { x: -50, y: -50 }, // P1
19        { x: -100, y: 0 }, // P2
20        { x: -50, y: 50 }, // P3
21        { x: 50, y: -50 }, // P4
22        { x: 100, y: 0 }, // P5
23        { x: 50, y: 50 }, // P6
24        { x: 0, y: 0 }, // P7
25      ],
26    },
27    stagger: 0.1,
28  }
29)

E é isso, loader completo.

Conclusão

Ao longo dessa série de 3 tutoriais cobrimos:

• O que é a GSAP
• Como instalar a GSAP
• Funções básicas como from(), to() e fromTo()
• Criação de tweens (animação)
• Como trabalhar com linha do tempo
• Propriedades de repetição como repeat, repeatDelay e yoyo
• Funções de stagger como staggerTo(), staggerFrom() e staggerFromTo()
• Curva de Bézier

Apesar de termos visto todos esses tópicos, isso é apenas uma pequena parte do potencial da GSAP.

Espero que essa série tenha sido útil e despertado a sua curiosidade para procurar saber mais sobre essa biblioteca incrível.