Saoul now disappears when accessing the next div

components/navbar.html

@@ -12,7 +12,11 @@
                 </div>
             </li>
             <li>
-                <a href="#0">Contact</a>
+                <a href="#0">Me Joindre</a>
+                <div class="navbar_dropdown">
+                    <a href="#0">Coordonées</a>
+                    <a href="#0">Contact</a>
+                </div>
             </li>
         </ul>
     </div>

css/navbar.css

@@ -69,7 +69,7 @@ button {
     float: none;
     justify-content: center;
     position: absolute;
-    width: auto;
+    width: 15rem;
     overflow: initial;
     display: none;
     z-index: 10;

js/index.js

@@ -1,17 +1,31 @@
+/****************************************/
+/*           global variables           */
+/****************************************/
+
+var saulDisappeared = 0;
+
 /****************************************/
 /*                 animjs               */
 /****************************************/
 
+var nomoreSaoul = anime({
+    targets: '.photosaoul',
+    easing: 'easeInQuint',
+    autoplay: false,
+    opacity: 0,
+    duration: 200
+});
+
 var saoulAnimation = anime({
     targets: '.photosaoul',
     easing: 'easeOutQuint',
     translateX: [
-        {value: "", duration: 100, delay: 0 },
+        { value: "", duration: 100, delay: 0 },
-        {value: "130%", duration: 1000, delay: 100 }
+        { value: "130%", duration: 1000, delay: 100 }
     ],
-    rotate : [
+    rotate: [
-        {value: 0, duration: 100, delay: 0 },
+        { value: 0, duration: 100, delay: 0 },
-        {value: -60, duration: 1000, delay: 100 }
+        { value: -60, duration: 1000, delay: 100 }
     ],
     begin: function () {
         document.getElementsByClassName("photosaoul")[0].style.display = "flex";
@@ -28,9 +42,9 @@ var whiteBandAnimation = anime({
 var textAnimation = anime({
     targets: '.anim-text',
     easing: 'easeInOutExpo',
-    opacity : [
+    opacity: [
-        {value: 0, duration: 2000, delay: 0 },
+        { value: 0, duration: 2000, delay: 0 },
-        {value: 100, duration: 1000, delay: 100 }
+        { value: 100, duration: 1000, delay: 100 }
     ],
     begin: function () {
         document.getElementsByClassName("anim-text")[0].style.display = "block";
@@ -40,8 +54,9 @@ var textAnimation = anime({
 /****************************************/
 /*                 main                 */
 /****************************************/
+
 saoulAnimation.reverse()
-ready(function(){
+ready(function () {
     setTimeout(() => {
         saoulAnimation.play();
         whiteBandAnimation.play();
@@ -49,6 +64,32 @@ ready(function(){
     }, 1000);
 });
 
+window.addEventListener("scroll", function (e) {
+    var saoulPhoto = document.getElementsByClassName("photosaoul")[0];
+    if (document.getElementsByClassName("description")[0].getBoundingClientRect().y < 150) {
+        if (saulDisappeared == 0) {
+            saulDisappeared = 2;
+            nomoreSaoul.play();
+            nomoreSaoul.finished.then(() => {
+                saoulPhoto.style.display = "none";
+                saulDisappeared = 1;
+            });
+        }
+    }
+    else {
+        if (saulDisappeared == 1) {
+            saulDisappeared = 2;
+            saoulPhoto.style.display = "block";
+            nomoreSaoul.reverse();
+            nomoreSaoul.play();
+            nomoreSaoul.finished.then(() => {
+                nomoreSaoul.reverse();
+                saulDisappeared = 0;
+            });
+        }
+    }
+});
+
 /****************************************/
 /*               functions              */
 /****************************************/