Greensock Animation Platform (GSAP) é uma biblioteca JavaScript fácil de usar para animação na web. Ele permite animar quase tudo que pode ser acessado com JavaScript, incluindo SVG, objetos genéricos, telas e muito mais.

GSAP para animação: uma introdução

A animação da web em sua forma mais básica envolve a alteração do valor da propriedade dos elementos tantas vezes por segundo quanto possível. O GSAP faz isso obtendo um valor inicial e final e, em seguida, fazendo a transição intermitentemente entre esses dois valores para criar um efeito de animação. O efeito de esmaecimento, por exemplo, é obtido definindo a opacidade inicial e final de um elemento em 1 e 0, respectivamente. O resultado é um esmaecimento gradual do elemento especificado conforme o valor da propriedade de opacidade faz a transição de 1 para 0.

GSAP é uma ótima escolha para biblioteca de animação na web para aqueles que priorizam velocidade, flexibilidade e controle. GSAP é uma biblioteca extremamente rápida (estimada em cerca de 20 vezes mais rápido do que a biblioteca jquery ), o que significa que sua animação GSAP não causará um atraso significativo em seu aplicativo.

Com muitos métodos para escolher, o GSAP também permite animar quase todas as propriedades CSS da maneira mais desejável possível. Com o GSAP, você pode decidir exatamente quanto tempo a animação vai durar, bem como as propriedades exatas a serem alteradas, sem ter que escrever animações personalizadas avançadas que podem tornar seu aplicativo lento.

Por último, o GSAP não depende de nenhuma biblioteca externa, portanto, não há necessidade de instalar ou carregar nenhuma biblioteca adicional em seu aplicativo para começar a animação.

Neste tutorial, usaremos GSAP 3. Você pode aprender mais sobre esta biblioteca aqui .

Primeiros passos com GSAP

O GSAP pode ser carregado em seu aplicativo de várias maneiras, mas a abordagem mais rápida é adicionar o GSAP CDN ao seu arquivo HTML:

Como alternativa, o GSAP pode ser instalado usando npm e yarn. Para instalação do npm, execute:

  npm install gsap
 

Para instalação em quintal:

  yarn add gsap
 

Você também pode baixar o arquivo zip do site oficial do GSAP aqui ou obtê-lo em github .

Usando interpolações no GSAP
Uma interpolação é um único movimento devido à mudança de propriedade. No GSAP, uma interpolação típica contém um método, o elemento a ser animado, a duração da animação e um objeto de propriedades chamado vars . Abaixo está a sintaxe básica para qualquer interpolação:

  TweenMax.method (elemento, duração, vars)
 

TimeLine é um contêiner para interpolações que permite posicionar a animação em tempo real. Ele pode conseguir isso com a ajuda de diferentes métodos GSAP. Abaixo está um exemplo de um cronograma GSAP típico:

  var tl=gsap.timeline ();
 

Você pode então criar uma animação usando qualquer um dos métodos JavaScript. Neste exemplo, usaremos o método to () , que determina os valores finais:

  tl.to (". box", {duração: 1, opacidade: 0});
 

Com esse conhecimento básico, agora podemos passar para a criação de animações no GSAP usando uma variedade de métodos JavaScript.

Usando métodos GSAP

Os métodos são fundamentais para qualquer animação no GSAP. Os métodos ajudam a definir os valores de destino da animação, bem como os valores iniciais. Na seção a seguir, discutiremos os métodos GSAP, dos mais básicos aos mais avançados, e como usá-los para animação em seu aplicativo.

a ()

Este é o método GSAP mais comum usado para definir os valores finais de uma determinada animação. Ao usar este método, o GSAP define automaticamente os valores iniciais com base nas propriedades CSS definidas do elemento fornecido.

Veja a Caneta
Método GSAP to () por elizabeth amaechi ( @ amaechi1 )
em CodePen .

de ()

O método from () é melhor usado para animação reversa. Ao definir as propriedades CSS iniciais, o GSAP será animado para os valores padrão. Por exemplo, se a opacidade for definida como 0, o GSAP começará a animar a partir da opacidade 0 até atingir a opacidade definida inicialmente (em nosso exemplo, 1). Abaixo está um exemplo de uma animação usando o método from () .

Ver a Caneta
Método GSAP from () por elizabeth amaechi ( @ amaechi1 )
em CodePen .

fromTo ()

Com o método fromTo () , os desenvolvedores podem definir as propriedades de início e fim de uma determinada animação. Este método tem uma sintaxe um pouco diferente dos outros dois métodos mencionados acima, porque leva em dois objetos diferentes usados ​​para especificar o valor inicial e final:

  gsap.fromTo (". box", {x: 20, y: 10}, {x: 200, y: 100, duração: 1});
 

Veja a Caneta
Método GSAP fromTO () por elizabeth amaechi ( @ amaechi1 )
em CodePen .

set ()

O método set () é um método de direção zero usado para definir propriedades para um determinado elemento. Este método é útil quando você deseja definir as propriedades que posteriormente serão animadas com GSAP.

  gsap.set (". box", {x: 10, y: 20});
 

Do acima exposto, a coordenada xey do elemento com a classe "` `.box``" é definida como 10 e 20, respectivamente. Você pode então animar o elemento posteriormente com os valores iniciais já definidos.

Encadeamento de métodos e sequenciamento básico

Para obter uma animação mais concisa, em que definimos exatamente qual animação vem primeiro, precisamos encadear o método to () e listar as animações (interpolações) na ordem que queremos.

Para fazer isso, primeiro criaremos uma linha do tempo;

  var tl=gsap.timeline ({repeat: 30, repeatDelay: 1});
 

Então, podemos prosseguir para adicionar cada uma de nossas interpolações à linha do tempo já criada:

 tl.add (gsap.to ("# caixa", {duração: 1, x: 100}));
tl.add (gsap.to ("# box2", {duração: 2, x: 100, escala: 1,1}));
tl.add (gsap.to ("# box3", {duração: 3, x: 100, escala: 2}));

Funções de controle de animação

As funções de controle de animação fornecem controle total sobre suas animações, permitindo que você execute ações como pausar e retroceder. As funções de controle incluem play () , pause () , reverse () , kill () e resume () , entre outros.

Observe que uma animação com qualquer um dos métodos GSAP fornecidos retorna uma instância de interpolação. É nesta instância que as funções de controle de animação são chamadas. Tome, por exemplo, a seguinte instância de interpolação:

 //cria uma referência para a animação
//
instância const=gsap.to (". box", {x: 100, y: 100});
 

Observe como podemos controlá-lo com a função pause () em um evento de clique:

  document.querySelector (". pause"). onclick=()=> instance.pause ();
 

Ver a caneta
Controle de animação GSAP por elizabeth amaechi ( @ amaechi1 )
em CodePen .

Propriedades especiais no GSAP

O GSAP trata as propriedades especiais, como swagger e callback, de maneira diferente para obter melhores resultados.

Swaggers

Swaggers são usados ​​para animar um grupo de elementos. Um swagger permite que você especifique a hora de início para animar cada elemento em um grupo.

Veja a caneta
Animação de grupo GSAP com arrogância por elizabeth amaechi ( @ amaechi1 )
em CodePen .

Chamadas de retorno

Um retorno de chamada é necessário se você deseja executar uma ação específica após a ocorrência de um evento (como conclusão ou atualização). Alguns dos retornos de chamada disponíveis no GSAP incluem: onComplete , onStart e onUpdate .

Você pode registrar uma frase no console usando o retorno de chamada onComplete da seguinte maneira;

  gsap.to (". box", {duration: 1, x: 150, onComplete: tweenComplete}); function tweenComplete () { console.log ("concluído");
}
 

Um retorno de chamada também pode receber um parâmetro usando a propriedade param do retorno de chamada, conforme mostrado abaixo;

  gsap.to (". box", {duração: 1, x: 100, onComplete: tweenComplete, onCompleteParams: ["parâmetro de mensagem"]}); function tweenComplete (mensagem) { console.log (mensagem);
}
 

A propriedade onCompleteParams assume o parâmetro da função.

Plug-ins GSAP

Os plug-ins GSAP fornecem recursos extras que não estão disponíveis na biblioteca GSAP tradicional. Eles contêm propriedades especiais que são posteriormente inseridas dinamicamente no GSAP. Alguns dos plug-ins GSAP mais populares incluem: Draggable, DrawSVGPlugin e MorphSVGPlugin.

Observe que antes de usar qualquer plug-in GSAP, você precisará registrá-lo no núcleo GSAP conforme mostrado abaixo:

  gsap.registerPlugin (Draggable, MotionPathPlugin, TextPlugin);
 

Arrastável

O plugin GSAP Draggable permite criar incríveis elementos arrastáveis ​​com GSAP. O plug-in é habilitado para toque para que os usuários possam usá-lo em tablets e telefones celulares. Com Draggable, você pode definir a parte exata de um aplicativo que deve acionar um arrasto usando a propriedade trigger .

O plug-in arrastável funciona bem em contêineres transformados e pode ser usado em SVG com resultados impressionantes.

Para começar a arrastar, podemos simplesmente tornar um elemento arrastável conforme mostrado abaixo:

  Draggable.create ("# draggable");
 

Isso permitirá que um elemento seja arrastado horizontal e verticalmente.

Usando o exemplo acima, você pode usar outro parâmetro para as configurações. Você pode definir a posição de arrastar, definir o elemento de limites e chamar uma função quando o elemento for clicado ou quando o arrasto for concluído.

Neste snippet, a propriedade inertia é usada para tornar um elemento girável dentro do plugin Draggable:

 Draggable.create ("# draggable", { tipo:"x", limites: document.getElementById ("container"), inércia: verdade, onClick: function () { console.log ("clicado"); }, onDragEnd: function () { console.log ("arrastar está completo"); }
});

Ajustando em arrastável

As propriedades snap e liveSnap definem quando e onde um item arrastado deve se ajustar após ou durante um arrasto. Aqui, liveSnap permite que o elemento arrastado se ajuste ao ponto mais próximo nas matrizes, definido com as propriedades dos pontos quando estiver dentro de 15px do raio:

 Draggable.create ("# draggable", { digite:"x, y", liveSnap: { pontos: [{x: 0, y: 0}, {x: 150, y: 0}, {x: 250, y: 50}], raio: 15 }
})

Você pode aprender mais sobre os outros plug-ins listados acima aqui .

Animação GSAP no React

Para desenvolvedores React que desejam começar a usar GSAP, aqui está um guia rápido sobre como as coisas são feitas de maneira diferente com react.js.

Instalação GSAP

GSAP pode ser instalado com npm executando:

 npm install gsap

Ou, com fio:

 yarn add gsap

Para instalação com plug-ins bônus GSAP:

 npm install./gsap-bonus.tgz

Ou, com fio:

 yarn add./gsap-bonus.tgz 

Importação GSAP

Você pode então prosseguir com a importação do GSAP em seu arquivo de projeto:

 importar {gsap} de"gsap";

Os plug-ins podem ser importados individualmente, como:

 importar {PixiPlugin} de"gsap/PixiPlugin.js";
importar {MotionPathPlugin} de"gsap/MotionPathPlugin.js";

Conforme mencionado anteriormente, lembre-se de registrar seus plug-ins antes de usar:

 gsap.registerPlugin (PixiPlugin, MotionPathPlugin);

Criando sua primeira animação GSAP

Primeiro, crie seu componente baseado em classe como você faria normalmente para qualquer projeto React:

 import React from'react'
class App extends React.Component { construtor (adereços) { super (adereços) } render () { return (
 olá, mundo 
) }
}
/pre>
Estaremos usando  ref  para direcionar o elemento específico a ser animado. Nossa interpolação será criada assim que nosso aplicativo React for montado usando o método  componentDidMount () . O elemento a ser animado, bem como a instância de interpolação resultante, serão armazenados em um estado. 

 import React from'react'
importar {gsap} de'gsap'
class App extends React.Component { construtor (adereços) { super (adereços) this.myElement=null; this.myTween=null; } componentDidMount () { this.myTween=gsap.to (this.myElement, 1, {x: 100, y: 100}); } render () { return 
 this.myElement=div}/> }
}

Conclusão

O GSAP continua sendo uma das bibliotecas mais flexíveis para animação na web e, com o GSAP 3, a animação se tornou ainda mais fácil.

Neste tutorial, você provavelmente aprendeu que não precisa limitar sua animação apenas a elementos básicos. O GSAP oferece muitos métodos que tornam a escrita de código de animação em JavaScript muito mais fácil.

A postagem Usando GSAP 3 para animação na web apareceu primeiro no LogRocket Blog .

Source link