The loading now is respected before playing any animation. Added playIndexAnimation(), finishedLoading, load() function now has a promise.

components/footer.html

@@ -39,13 +39,6 @@
                     données qui le concernent. Cependant, Saoul Bonmonsieur possède un droit de Veto dans votre
                     dimension ainsi que 5 autres et ne vous autorise donc ni à accèder, ni à supprimer ces derniers
                     <br><br>
-                    Il en est de même des éventuelles bases de données figurant sur le site Internet qui sont protégées
-                    par
-                    les dispositions de la loi du 11 juillet 1998 portant transposition dans le Code de la propriété
-                    intellectuelle (CPI) de la directive européenne du 11 mars 1996 relative à la protection juridique
-                    des
-                    bases de données.
-                    <br><br>
                     Le logo de Saoul Bonmonsieur n'est ni reproductible ni utilisable dans d'autres domaines. Nous
                     savons qu'il est beau, voire magnifique. S'il vous arrive de l'utiliser Saul Bonmonsieur sera dans
                     l'obligation de vous poursuivre en justice, et vous ne gagnerez pas, ni ne pouvez être défendu par

css/navbar.css

@@ -2,14 +2,6 @@
     padding: 2.5rem;
 }
 
-#navbar_logo-container {
-    height: 5rem;
-    width: 5rem;
-    display: flex;
-    position: fixed;
-    right: 5rem;
-}
-
 .navbar_logo {
     height: 5rem;
 }
@@ -28,6 +20,14 @@
         overflow: initial;
     }
 
+    #navbar_logo-container {
+        height: 5rem;
+        width: 5rem;
+        display: flex;
+        position: fixed;
+        right: 5rem;
+    }
+
     #navbar_text-container {
         font-family: 'Josefin Sans', sans-serif;
         position: fixed;
@@ -81,6 +81,14 @@
         overflow: initial;
     }
 
+    #navbar_logo-container {
+        height: 5rem;
+        width: 5rem;
+        display: flex;
+        position: fixed;
+        right: 2.5rem;
+    }
+
     #navbar_text-container {
         font-family: 'Josefin Sans', sans-serif;
         position: fixed;

js/base.js

@@ -5,24 +5,30 @@
 var urlStr = window.location.toString().slice(0, window.location.toString().lastIndexOf(window.location.pathname) + 1);
 //Getting the dir name by gathering the pathname and substract it with the last '/'.
 var dirStr = window.location.pathname.substring(1, window.location.pathname.lastIndexOf('/'));
+//Global variable set to true when finished loading external html/css/js files
+var finishedLoading = false;
 
 /****************************************/
 /*               functions              */
 /****************************************/
 
 function load(urlHTML, elementHTML, urlJS, elementJS) {
-    fetch(urlHTML).then(res => {
+    const returnPromise = new Promise((resolve, reject) => {
-        return res.text();
+        fetch(urlHTML).then(res => {
-    }).then(htmltext => {
+            return res.text();
-        return elementHTML.innerHTML = htmltext;
+        }).then(htmltext => {
-    }).then(loadedHTML => {
+            return elementHTML.innerHTML = htmltext;
-        loadJS(urlJS, elementJS);
+        }).then(loadedHTML => {
-    })
+            loadJS(urlJS, elementJS);
-        .catch(
+            resolve(elementHTML);
-            function (err) {
+        })
-                console.warn('Could not load ' + urlHTML + ': Add the correct tag ?', err);
+            .catch(
-            }
+                function (err) {
-        );
+                    reject('Could not load ' + urlHTML + ': Add the correct tag ?', err);
+                }
+            );
+    });
+    return returnPromise;
 }
 
 function loadHTML(url, element) {
@@ -116,14 +122,16 @@ function popUpPlacement(className) {
 //During the loading process we need a loading status bar
 var headTag = document.getElementsByTagName("head")[0];
 window.addEventListener('load', function () {
-    loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag)
+    //instant loading
+    loadJS("//code.iconify.design/1/1.0.6/iconify.min.js", headTag);
     loadCSS(urlStr + "css/base.css", headTag);
     loadCSS(urlStr + "css/navbar.css", headTag);
-    load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag);
     loadCSS(urlStr + "css/footer.css", headTag);
-    load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag)
+    //async loading
-    setTimeout(() => {
+    load(urlStr + "components/navbar.html", document.getElementsByTagName("Navbar")[0], urlStr + "js/navbar.js", headTag).then(() => {
-        //Will change
+        load(urlStr + "components/footer.html", document.getElementsByTagName("Footer")[0], urlStr + "js/footer.js", headTag).then(() => {
-        popUpPlacement("black-bg");
+            finishedLoading = true;
-    }, 500);
+            popUpPlacement("black-bg");
+        });
+    });
 })

js/index.js

@@ -2,6 +2,7 @@
 /*           global variables           */
 /****************************************/
 
+//status if saoul has disappeared or not
 var saulDisappeared = 0;
 
 /****************************************/
@@ -19,6 +20,7 @@ var nomoreSaoul = anime({
 var saoulAnimation = anime({
     targets: '.photosaoul',
     easing: 'easeOutQuint',
+    autoplay: false,
     translateX: [
         { value: "", duration: 100, delay: 0 },
         { value: "130%", duration: 1000, delay: 100 }
@@ -55,15 +57,11 @@ var textAnimation = anime({
 /*                 main                 */
 /****************************************/
 
-saoulAnimation.reverse()
+//playing the first animation on the page
-ready(function () {
+saoulAnimation.reverse();
-    setTimeout(() => {
+playIndexAnimation();
-        saoulAnimation.play();
-        whiteBandAnimation.play();
-        textAnimation.play();
-    }, 1000);
-});
 
+//eventlistener to make saoul dissapear when scrolling at a certain point
 window.addEventListener("scroll", function (e) {
     var saoulPhoto = document.getElementsByClassName("photosaoul")[0];
     if (document.getElementsByClassName("description")[0].getBoundingClientRect().y < 150) {
@@ -94,6 +92,14 @@ window.addEventListener("scroll", function (e) {
 /*               functions              */
 /****************************************/
 
-function superAnim() {
+
-    saoulAnimation.play()
+async function playIndexAnimation() {
+    while (!finishedLoading) {
+        await new Promise(resolve => setTimeout(resolve, 200));
+    }
+    setTimeout(() => {
+        whiteBandAnimation.play();
+        textAnimation.play();
+        saoulAnimation.restart();
+    }, 500);
 }