Optimize animations and transitions

will-change is apparently not enough to run GPU-enabled animations, use translateZ on top of it

src/animations/viewer.js

@@ -17,7 +17,8 @@ export const animateIn = () => {
     tl.add({
         targets: viewer.querySelector('.carousel .wrap'),
         opacity: [0, 1],
-        translateY: ['-4%', 0]
+        translateY: ['-4%', 0],
+        translateZ: [0, 0]
     })
 
     // Carousel: Number
@@ -31,6 +32,7 @@ export const animateIn = () => {
     tl.add({
         targets: viewer.querySelectorAll('.carousel__dots'),
         translateY: [16, 0],
+        translateZ: [0, 0],
         opacity: [0, 1]
     }, 150)
 
@@ -38,8 +40,8 @@ export const animateIn = () => {
     tl.add({
         targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
         translateY: [-32, 0],
+        translateZ: [0, 0],
         opacity: [0, 1],
         delay: anime.stagger(120),
     }, 400)
-
 }