Viewer: Fix reveal animation

src/animations/viewer.js

@@ -15,10 +15,9 @@ export const animateIn = () => {
 
     // Carousel
     tl.add({
-        targets: viewer.querySelector('.carousel'),
+        targets: viewer.querySelector('.carousel .wrap'),
         opacity: [0, 1],
-        translateY: window.innerWidth >= 768 ? [32, 0] : ['-33%', '-37%'],
-        complete: event => event.animatables[0].target.removeAttribute('style')
+        translateY: ['-4%', 0]
     })
 
     // Carousel: Number
@@ -28,6 +27,13 @@ export const animateIn = () => {
         translateY: [window.innerWidth >= 768 ? -24 : 24, 0]
     }, 0)
 
+    // Dots
+    tl.add({
+        targets: viewer.querySelectorAll('.carousel__dots'),
+        translateY: [16, 0],
+        opacity: [0, 1]
+    }, 150)
+
     // Buttons
     tl.add({
         targets: viewer.querySelectorAll('.tip, .viewer__buttons a'),
@@ -35,4 +41,5 @@ export const animateIn = () => {
         opacity: [0, 1],
         delay: anime.stagger(120),
     }, 400)
+
 }