Animações: É mais performático trocar de classes ou animar direto pelo JS?

[woliveiras]

Fala galera!

Estou com uma dúvida a respeito da melhor maneira de se aplicar animações em componentes Web.

Eu tenho o seguinte cenário:

Um carrossel de imagens que ao trocar de imagem deve aplicar o efeito de fadeOut, entrar em um estado de espera, para baixar a próxima imagem, e, em seguida, exibir essa outra imagem com o efeito de fadeIn.

Esse componente é uma diretiva do Angular e fiquei com a seguinte dúvida: É mais performático ficar trocando de classes ou animar direto pelo JS?.

Meu receio é que o usuário fique clicando diversas vezes em Next e esse troca-troca de classes faça mal pro Navegador.

[renatogalvones]

O melhor para animações é utilizar, sempre que possível, as propriedades CSS que que tem aceleração gráfica na GPU.

Se entendi bem, no seu caso vai ser mais performático utilizando a troca de classes juntamente com as propriedades que tem aceleração gráfica na VGA:

• transform
• opacity

Tenho quase certeza que estou esquecendo de mais algumas propriedades que são aceleradas pela GPU mas ainda estou com sono e não consegui lembrar... rsrsrs

Vou dar uma pesquisada e já volto, se alguém quiser complementar, fique à vontz!

🤘

[renatogalvones]

Lembrei da palestra do Sérgio Lopes na BrazilJS.

Sobre esse assunto, o link taí já no tempo certo mas recomendo assistir tudo pq é animal!
https://youtu.be/EMCBd3kw4zs?t=1279

[felipefialho]

De cara eu lembro de três artigos sensacionais

• Myth Busting: CSS Animations vs. JavaScript
• CSS vs. JS Animation: Which is Faster?
• CSS Animation vs. JavaScript: Which One Is Better?

Em todos os casos, com exceção de animações usando jQuery, o JavaScript leva vantagem em cima de animações CSS.

Mas não acho que é o único ponto a considerar.

Animações usando propriedades CSS que ativam a aceleração de hadware tem um ÓTIMO desempenho. Além disso, a propriedade will-change ajuda a otimizar ainda mais a performance das animações.

Sendo assim, a não ser em projetos que exigem uma quantidade absurda de animações, principalmente em dispositivos mobile, acredito que a melhor opção é sim usar animações CSS.

Particularmente acho muito mais lógico tratar da camada de interface no CSS do que levar para o JavaScript (mas, como disse, tem casos e casos).

[mtmr0x]

Só um ponto @renatogalvones: acho que tu quis dizer GPU ao invés de VGA, certo?

E já que tô aqui: Trocando as classes por CSS, em resumo :)

De resto os caras aí entraram bem em detalhes, beijos e emoctions pra vocês!

[renatogalvones]

@matmarsiglio SIM mano! Vacilo meu! Usar a VGA já tem q usar de qq forma pra mostrar qq imagem na tela né?! huahuahuahauahuahuahua

Seria o GPU mesmo, ou Graphics Process Unit caso alguém tenha esquecido a sigla.

Vou dar um update no comment pra não causar confusão! Valeu mano!

🤘

[lagden]

usa o GSAP