Otimizando renderização e animações na Web

1. OTIMIZANDO
RENDERIZAÇÃO E ANIMAÇÕES
NA WEB

2. @sergio_caelum
sergiolopes.org

3. PERFORMANCE?

4. MAIN THREAD

9. @keyframes anima {
to { left: 200px; width: 250px; }
}
@keyframes animaGPU {
to { transform: translateX(200px) scale(1.7); }
}

12. .container {
top: 0;
transition: top 500ms;
}
.container.buscaVisivel {
top: 100px;
}

13. .container {
top: 0;
transition: top 500ms;
}
.container.buscaVisivel {
top: 100px;
}

17. 60FPS

18. 60FPS
16ms

20. .container {
transition: transform 500ms;
}
.container.buscaVisivel {
transform: translateY(100px);
}

25. .container {
transition: transform 500ms;
will-change: transform;
}
.container.buscaVisivel {
transform: translateY(100px);
}

26. .container {
transition: transform 500ms;
will-change: transform;
}
.container.buscaVisivel {
transform: translateY(100px);
}
.container {
transition: transform 500ms;
transform: translateZ(0);
}
.container.buscaVisivel {
transform: translateY(100px);
}

33. .cartao.remove {
margin-bottom: -100px;
opacity: 0;
transition: all 500ms;
}

34. .cartao.remove {
margin-bottom: -100px;
opacity: 0;
transition: all 500ms;
}

37. INICIAL

38. INICIAL FINAL

39. INICIAL FINAL

40. INICIAL FINAL
opacity: 0;
transition: opacity 500ms ease-out;

41. INICIAL

42. INICIAL FINAL

43. INICIAL FINAL
var posInicial = cartao.getBoundingClientRect();

44. INICIAL FINAL
var posInicial = cartao.getBoundingClientRect();
cartaoARemover.classList.add('remove');

45. INICIAL FINAL
var posInicial = cartao.getBoundingClientRect();
cartaoARemover.classList.add('remove');
var posFinal = cartao.getBoundingClientRect();

46. INICIAL FINAL

47. INICIAL FINAL
var x = posInicial.left - posFinal.left;

48. INICIAL FINAL
var x = posInicial.left - posFinal.left;
var y = posInicial.top - posFinal.top;

49. INICIAL FINAL
var x = posInicial.left - posFinal.left;
var y = posInicial.top - posFinal.top;

50. INICIAL FINAL
var x = posInicial.left - posFinal.left;
var y = posInicial.top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;

51. INICIAL FINAL INVERTE
var x = posInicial.left - posFinal.left;
var y = posInicial.top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;

52. INICIAL FINAL INVERTE

53. INICIAL FINAL INVERTE
transform: none;
transition: transform 500ms ease-out;

54. INICIAL FINAL INVERTE PLAY
transform: none;
transition: transform 500ms ease-out;

55. FIRST LAST INVERT PLAY
FLIP

56. FIRST LAST INVERT PLAY
FLIP

57. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
// preparaAnimacao
// disparaAnimacao
// aposAnimacao
}

58. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}

59. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}

60. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());

61. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');

62. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
}
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
.cartao.remove {
position: absolute;
}

63. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}

64. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {

65. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();

66. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;

67. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;

68. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;

69. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
}
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});

70. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}

71. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
// disparaAnimacao
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
.anima .cartao {
transition: 500ms ease-out;
}
.anima .cartao.remove {
opacity: 0;
}

72. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
disparaAnimacao();
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}

73. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}

74. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
// aposAnimacao
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}

75. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
this.addEventListener('transitionend', aposAnimacao);
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}

76. cartoes.forEach((cartao) => cartao.addEventListener('click', cartaoOnClick));
function cartaoOnClick() {
preparaAnimacao(this);
requestAnimationFrame(disparaAnimacao);
this.addEventListener('transitionend', aposAnimacao);
}
function preparaAnimacao(cartaoARemover) {
var posInicial = cartoes.map((cartao) => cartao.getBoundingClientRect());
cartaoARemover.classList.add('remove');
cartoes.forEach((cartao, i) => {
var posFinal = cartao.getBoundingClientRect();
var x = posInicial[i].left - posFinal.left;
var y = posInicial[i].top - posFinal.top;
cartao.style.transform = `translate(${x}px, ${y}px)`;
});
}
function disparaAnimacao() {
cartoes.forEach((cartao) => cartao.style.transform = '' );
lista.classList.add('anima');
}
function aposAnimacao() {
lista.classList.remove('anima');
this.remove();
}

81. FLIP ANIMATION
First, Last, Invert, Play

84. OBRIGADO!
sergiolopes.org
@sergio_caelum