add intro animations and interactions

scripts/v3.js

@@ -11,6 +11,8 @@ const myBigTextBlock = document.querySelector(".benjamin-big-text-block");
 const mainTextBlock = document.querySelector(".main-text-block");
 const mainCTA = document.querySelector(".main-cta-button");
 const allHeaderElements = document.querySelectorAll("header *");
+const mountains = document.querySelectorAll("#mountains");
+const clouds = document.querySelectorAll("#clouds");
 
 
 function intro() {
@@ -18,10 +20,10 @@ function intro() {
     anime({
         targets: heroTextSection,
         width: [0, "50%"],
-        opacity: [0, 1],
+        translateX: [200, 0],
-        easing: "cubicBezier(0, 0.72, 0.355, 1)",
+        easing: "cubicBezier( 0.93, 0, 0.09, 1 )",
-        duration: 800,
+        duration: 1500,
-        delay: 1400,
+        delay: 1000,
     });
     
     anime({
@@ -57,8 +59,8 @@ function intro() {
         translateX: [-50, 0],
         opacity: [0, 1],
         easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
-        duration: 800,
+        duration: 1200,
-        delay: 2800,
+        delay: 2500,
     });
     
     anime({
@@ -66,13 +68,84 @@ function intro() {
         translateX: [-50, 0],
         opacity: [0, 1],
         easing: "cubicBezier( 0.1, 0.63, 0.355, 1 )",
-        duration: 800,
+        duration: 1200,
-        delay: 2900,
+        delay: 2600,
+    });
+    
+    anime({
+        targets: mountains,
+        translateY: [200, 0],
+        opacity: [0, 1],
+        easing: "cubicBezier(0.1, 0.63, 0.355, 1)",
+        duration: 1500,
+        delay: 1000,
+    });
+    
+    anime({
+        targets: clouds,
+        opacity: [0.2, 1],
+        easing: "easeOutQuad",
+        duration: 1200,
+        delay: 800,
     });
     
 }
 
-intro();
+// Intro Initialization
+
+function introInit() {
+    
+    anime({
+        targets: heroTextSection,
+        width: [0],
+        translateX: 200,
+        duration: 0
+    });
+    
+    anime({
+        targets: allHeaderElements,
+        translateX: [-20],
+        opacity: [0],
+        duration: 0
+    });
+    
+    anime({
+        targets: myBigTextBlock,
+        translateY: [100],
+        opacity: [0],
+        duration: 0
+    });
+    
+    anime({
+        targets: myImageBlock,
+        translateY: [100],
+        opacity: [0],
+        duration: 0
+    });
+    
+    anime({
+        targets: mainTextBlock,
+        translateX: [-50],
+        opacity: [0],
+        duration: 0
+    });
+    
+    anime({
+        targets: mainCTA,
+        translateX: [-50],
+        opacity: [0],
+        duration: 0
+    });
+    
+    anime({
+        targets: mountains,
+        opacity: 0,
+        duration: 0
+    });
+    
+}
+
+introInit();
 
 
 
@@ -127,9 +200,55 @@ function changeHeader(entry) {
     }
 }
 
+
+
+
+//############################################# -- Window Load
+
 setTimeout(() => {
     headerObserver.observe(headerController);
-}, 2000);
+}, 3000);
+
+
+window.addEventListener("load", () => {
+    setTimeout(() => {intro();}, 1000);
+
+});
+
+
+
+
+
+
+
+//############################################# -- Secitons intersection Observer
+
+const sections = document.querySelectorAll("section");
+var sectionContainer = document.querySelector("#samp-div");
+
+var windowRect2 = {
+    rootMargin: "0px",
+};
+
+var sectionsIntersectionObserver = new IntersectionObserver(sectionsObserverFn, windowRect);
+
+function sectionsObserverFn(entries) {
+   if(entries[1].isInersecting) {
+       anime({
+           targets: sectionContainer,
+           width: [0, 500],
+           delay: 1000,
+       });
+   } 
+}
+
+
+
+sections.forEach(entry => {
+    sectionsIntersectionObserver.observe(entry);
+});
+
+
 
 
 

v3.css

@@ -167,7 +167,7 @@ a {
 	border: none;
     cursor: pointer;
     font-size: inherit;
-/*    transition: all .3s ease-out;*/
+    transition: all .3s ease-out;
 }
 
 a:hover {
@@ -247,7 +247,7 @@ button {
 	padding: 10px 20px;
 	color: white;
 	cursor: pointer;
-/*    transition: all .2s ease-out;    */
+    transition: all .2s ease-out;    
     background-image: linear-gradient(var(--main-color),var(--main-color));
     background-repeat: no-repeat;
     background-position: 0px 67px;
@@ -376,6 +376,7 @@ input:focus {
     min-height: 100vh;
     left: 0px;
     top: 0px;
+    opacity: 0.2;
 }
 
 #mountains {
@@ -430,6 +431,24 @@ input:focus {
 
 
 
+/*############################################################# -- My Work -- */
+
+.my-work-section {
+    
+}
+
+.my-work-section > div:nth-child(2) {
+    background-color: var(--sec-color-1);
+}
+
+
+
+
+
+
+
+
+
 
 
 

v3.html

@@ -89,13 +89,13 @@
     
     
     
-    <!-- #################################################################################-- Hero -->
+    <!-- #################################################################################-- My Work -->
     
-    <section>
+    <section class="my-work-section">
         <div>
         </div>
         
-        <div>
+        <div id="samp-div">
         </div>
     </section>