JavaScript: Como se tornar o super herói das animações
- #JavaScript
Olá pessoal, tudo bem com vocês?
Hoje vim compartilhar com a comunidade uma biblioteca que venho testando há bastante tempo, e sério, que incrível!
O GSAP, segundo a documentação:
Uma biblioteca de animação JavaScript independente de estrutura que transforma os programadores em super-heróis da animação. Com ela podemos criar animações de alto desempenho que funcionam em todos os principais navegadores. Dando vida e animando CSS, SVG, canvas, React, Vue, WebGL, cores, strings, caminhos de movimento, objetos genéricos e qualquer coisa que o JavaScript possa tocar!
Quando você leu o título e chegou até aqui deve estar bastante curioso, mas provavelmente com receio de ser mais uma biblioteca robusta que é bem exaustiva de aprender.
Mas eu venho mostrar o contrário a todos, veja como é fácil e prático começar uma animação com o GSAP:
gsap.to(".box", { x: 200 })
Chega a parecer um pouco idiota como é simples e prático de utilizar.
Podemos utilizar com CDN para projetos HTML, CSS e JavaScript puros, existe também o pacote para React e Vue que são bem intuitivos:
// React
useGSAP(
() => {
const boxes = gsap.utils.toArray('.box');
tl.current = gsap
.timeline()
.to(boxes[0], { x: 120, rotation: 360 })
.to(boxes[1], { x: -120, rotation: -360 }, '<')
.to(boxes[2], { y: -166 })
.reverse();
},
{ scope: container }
);
// Vue.js
onMounted(() => {
ctx = gsap.context((self) => {
const boxes = self.selector('.box');
tl = gsap
.timeline()
.to(boxes[0], { x: 120, rotation: 360 })
.to(boxes[1], { x: -120, rotation: -360 }, '<')
.to(boxes[2], { y: -166 })
.reverse();
}, main.value); // <- Scope!
});
Ah sim, esqueci de mencionar, mas quanto mais animações você adiciona, vai provavelmente ficar bemm extenso, mas ao mesmo tempo bem claro.
Aconselho bastante vocês acessarem o site deles e o repositório do GitHub, é um projeto que vale a penar você estudar e aplicar nos seus.
P.s.: Quase esqueço de falar, mas lá na GreenSock(Empresa dona do GSAP) eles tem um fórum onde você pode tirar dúvidas e ajudar outras pessoas.
