Chamando função após animação com GSAP

Chamando função após animação

É importante ter a possibilidade de comandar comportamentos após a animação que realizamos, estamos usando neste post a biblioteca JavaScript GSAP que eu já falei neste post.

Chamando função após animação.

O procedimento é bem simples, mas antes de mais nada é bom lembrar que ele é desnecessário se você quer chamar outra animação, para chamar outra animação quando a sua primeira for concluída você pode simplesmente organizar através do delay como você pode observar no código, contudo é muito útil se você quer desencadear outra sequência de animações ou mesmo acionar outros elementos.

[box style=’doc’]

[/box]

Analisando o código

Linha 1: A função é ativada assim que todo a página é carregada em virtude do evento onload.

Linha 2 e 3: Alimentamos duas variáveis co o id da div que queremos manipular.

Linha 5: acionamos o TweenLite. para esta linha vamos detalhar  passo a passo.

TweenLite.to(caixa, 3, {width:100, left:”50%”, delay:0.5, onComplete:myFunction});

     Azul : Inserimos a variável alimentada com o id da div que será controlada.

     Verde : O tempo de execução da ação.

     Vermelho : Passamos os estilos que a div terá ao final da animação.

     Laranja : O delay diz quanto tempo deve ser esperado antes de iniciar a animação

     Roxo : Chamamos a função através do onComplete.

Linha 8: a função que será chamada após a animação é declarada.

Estou disponibilizando para download um arquivo de exemplo, mas caso você tenha alguma dúvida é só entrar em contato deixando seu comentário que assim que possível eu respondo.

Arquivo exemplo [button url=’http://goo.gl/OPlZYq’  target=’_blank’ size=’small’ style=’blue’] Download [/button]

Comentários

Comentários