💫 Add animation

luiz123o · Feb 22, 2021 · c53ac58 · c53ac58
1 parent bff4bd7
commit c53ac58
Show file tree

Hide file tree

Showing 2 changed files with 1,750 additions and 0 deletions.
diff --git a/js/app.js b/js/app.js
@@ -0,0 +1,81 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    let tl1 = new TimelineMax();
+
+    tl1
+        .fromTo('.bg-loader', 1, { width: '100%' }, {
+            width: '0%',
+            delay: 5,
+            ease: Expo.easeInOut
+        })
+
+
+    .fromTo('.bg-video', 2, { width: '0%', opacity: 0 }, {
+        width: '100%',
+        opacity: 1,
+        ease: Power3.easeInOut
+    }, '-=1')
+
+
+    .fromTo('.logo', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.nav-list', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.nav-social', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.bx', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+
+    .fromTo('.item-1', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.item-2', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.item-3', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.item-4', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.item-5', 0.7, { y: 50, opacity: 0, }, {
+        y: 0,
+        opacity: 1,
+        ease: Back.easeOut.config(1.7)
+    }, '-=0.5')
+
+    .fromTo('.bg-lines', 7, { width: '0%', opacity: 0 }, {
+        width: '100%',
+        opacity: 1,
+        ease: Power3.easeInOut
+    }, '-=5');
+
+})