Animação JavaScript com GSAP

Animação JavaScript com GSPA

A animação através do código pode até ser desestimulante para alguns, entretanto, com a plataforma GSAP temos a oportunidade de criar animações de alto nível de forma fácil e rápida. É claro, uma timelinezinha como a do do flash e adobe Edge sempre são bem vindas, mas esta plataforma é bastante poderosa e pode minimizar a falta. Ela já existia para o Flash com o AS2 e AS3. Com a alergia ao flash que pairou na internet devido aos dispositivos móveis eles lançaram esta versão utilizando o JavaScript.

O que exatamente é GSAP

Numa resposta bem simples, é um conjunto de ferramentas para animações com Script, dentre estas ferramentas temos.

  1. TweenLite: O núcleo do motor, que pode animar praticamente qualquer propriedade de qualquer objeto. É relativamente leve e cheio de recursos, pode ser expandida usando plugins opcionais (como CSSPlugin para animar estilos do elemento DOM do browser, ou rolagem ScrollToPlugin para um local específico em uma página ou div. by
  2. TweenMax: Irmão mais musculoso do TweenLite, mas isso tudo TweenLite pode fazer além de não-essenciais, como repetição, yoyo, repeatDelay, etc Ele inclui muitos plugins comuns também como CSSPlugin de modo que você não precisa carregar tantos arquivos. O foco está em ser completo, em vez de leve.
  3. TimiLineLite: Este recurso permite que você crie uma timeline com todas as animações que você criou, desta forma você poderá controlar como se estivesse num rolo de filme.
  4. TimiLineMax: Versão extendida do TimiLineLite, mas com mais recursos. Com ele você pode usar repetição, repeatDelay, yoyo, currentLabel(), dentre outras coisas, recursos úteis mas não excenciais.

Mesmo com o flash a mão os recursos dele eram muito úteis em suas versões AS2 e AS3.

Animação JavaScript com GSAP

Bem vou ao londo de alguns posts demonstrar vários usos apar ela, mas para começar vamos nos ater ao básico… uma transição simples levando um box de um lado a outro.

Adicionando scripts

Estes scripts são necessários para que as propriedades CSS possam ser modificadas. Você deve inserir eles dentro da tag head. Caso tenha dúvidas de como inserir clique aqui.

[box style=’doc’]

[/box]

Marcações HTML5

Nós animaremos a div com o id logo, a com o id demo será apenas uma base.

[box style=’doc’]

[/box]

Ativando a animação JavaScript

Agora vamos inserir os códigos que ativam a animação, note que primeiro eu pego as marcações que vou usar e transformo em variáveis JavaScript.

[box style=’doc’]

var logo = document.getElementById(“logo”);  /* Aqui eu pego o id da div */

TweenLite.to(logo, 1, {left:”632px”});  /* Aqui Já estamos usando a variável com o valor que foi agregado a ela. */

[/box]

Pronto. esta feita a mágica, contudo na ordem que eu deixei tudo fica lindo, mas para garantir que vai rodar no final de tudo carregado você pode chamar assim.

[box style=’doc’]

window.onload = function(){
var logo = document.getElementById(“logo”);
TweenLite.to(logo, 1, {left:”632px”});
}

[/box]

[button url=’ http://goo.gl/2Pcs65′ size=’small’ style=’blue’] Baixe o arquivo [/button]

 

Comentários

Comentários