Saoul now disappears when accessing the next div

components/navbar.html

@@ -12,7 +12,11 @@
                 </div>
             </li>
             <li>
+                <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,7 +1,21 @@
+/****************************************/
+/*           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',
@@ -40,6 +54,7 @@ var textAnimation = anime({
 /****************************************/
 /*                 main                 */
 /****************************************/
+
 saoulAnimation.reverse()
 ready(function () {
     setTimeout(() => {
@@ -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              */
 /****************************************/