Remove WOW - replaced by own anim code

12 files changed, 156 insertions, 46 deletions

diff --git a/TODO/TODO.md b/TODO/TODO.md
index 34391f7..b2368e2 100644
--- a/TODO/TODO.md
+++ b/TODO/TODO.md
@@ -2,9 +2,18 @@
 
 
 !!!!
+- ADAPT EXAMPLE SITE! +config.toml!!
 - add CSS+layout variables changes in README + exampleSite config.toml!
+- make animations "one shot"? (or keep repeat as-is now?)
+- too much animation on home section?
+- skills: keep "resume" button animation?
 !!!!
 
+- [x] Remove use of "wow" (animate stuff) and use own js/css definitions (as in "anim.js")
+- [ ] Fix error when clicking "home" button
+    "Uncaught TypeError: Cannot read properties of undefined (reading 'top')"
+
+
 - [ ] Remove all external dependencies (eg photoswipe cdn), or at least make fallback alternatives
 - [ ] Complete README.md file
     => What to add?
diff --git a/layouts/404.html b/layouts/404.html
index 360e535..837cb31 100644
--- a/layouts/404.html
+++ b/layouts/404.html
@@ -12,14 +12,14 @@
             {{ with .Site.Params.page404 }}
                 <div class="container">
                     <div class="row">
-                        <div class="col-xs-12 text-center">
+                        <div class="col-xs-12 text-center anim-wrapper">
                             {{ with .background_image }}
                                 <div class="page404-image" title="image: {{ . }}"
                                         style="background-image: url('{{ (printf "images/%s" .) | absURL }}');"
                                     >
                                 </div>
                             {{ end }}
-                            <div class="page404-title wow bounceIn">
+                            <div class="page404-title anim zoomIn">
                                 <h1>404</h1>
                             </div>
                             <div class="page404-content">
diff --git a/layouts/partials/sections/contact.html b/layouts/partials/sections/contact.html
index bd88453..fbe912d 100644
--- a/layouts/partials/sections/contact.html
+++ b/layouts/partials/sections/contact.html
@@ -24,8 +24,9 @@
                             </div>
                         {{ end }}
 
-                        <div class="email-link" itemprop="email">
+                        <div class="email-link anim-wrapper" itemprop="email">
                             {{ with .email }}
+                            <div class="anim zoomIn">
                                 {{ if .link }}
                                 <a href="mailto:{{ .address }}">
                                 {{ end }}
@@ -38,15 +39,16 @@
                                 {{ if .link }}
                                 </a>
                                 {{ end }}
+                            </div>
                             {{ end }}
                         </div>
 
-                        <ul class="icons-list" aria-hidden="true">
+                        <ul class="icons-list anim-wrapper" aria-hidden="true">
                             {{ range .social }}
                                 {{ $pack := or .icon_pack "fa" }}
                                 <li>
                                     <a itemprop="sameAs" href="{{ .link | safeURL }}" target="_blank" rel="noopener">
-                                        <i class="{{ $pack }} {{ .icon }} icon-x2 wow bounceIn"></i>
+                                        <i class="{{ $pack }} {{ .icon }} icon-x2 anim zoomIn"></i>
                                     </a>
                                 </li>
                             {{ end }}
diff --git a/layouts/partials/sections/home.html b/layouts/partials/sections/home.html
index d9f8a72..69ae819 100644
--- a/layouts/partials/sections/home.html
+++ b/layouts/partials/sections/home.html
@@ -21,34 +21,36 @@
             {{- end -}}
             "
         >
-            <div class="header-content-inner">
+            <div class="header-content-inner anim-wrapper">
                 {{ with .title }}
                     {{/* TODO: use specific class for title? */}}
-                    <h1>{{ . | markdownify  }}</h1>
+                    <h1 class="anim zoomIn">{{ . | markdownify  }}</h1>
                 {{ end }}
                 {{ with .subtitle }}
                     <h2>{{ . | markdownify }}</h2>
                 {{ end }}
                 {{ if .title }}
-                    <hr class="primary">
+                    <hr class="primary anim zoomIn">
                 {{ end }}
                 {{ with .text }}
                     <p>{{ . | markdownify }}</p>
                 {{ end }}
-                {{ if .button_image }}
-                    <a href="#about" class="btn-image page-scroll">
-                        <img src={{ .button_image }} />
-                    </a>
-                {{ else if .button_text }}
-                    <a href="#about" class="btn btn-primary page-scroll">
-                        {{ .button_text }}<br>
-                    </a>
-                {{ else if .button_icon }}
-                    {{ with .button_icon }}
-                        <a href="#about" class="btn-icon btn-primary page-scroll {{ .pack }} {{ .icon }} icon-x6">
+                <div class="anim zoomIn">
+                    {{ if .button_image }}
+                        <a href="#about" class="btn-image page-scroll">
+                            <img src={{ .button_image }} />
                         </a>
+                    {{ else if .button_text }}
+                        <a href="#about" class="btn btn-primary page-scroll">
+                            {{ .button_text }}<br>
+                        </a>
+                    {{ else if .button_icon }}
+                        {{ with .button_icon }}
+                            <a href="#about" class="btn-icon btn-primary page-scroll {{ .pack }} {{ .icon }} icon-x6">
+                            </a>
+                        {{ end }}
                     {{ end }}
-                {{ end }}
+                </div>
             </div>
         </div>
     </section>
diff --git a/layouts/partials/sections/services.html b/layouts/partials/sections/services.html
index f62b6aa..ddbd209 100644
--- a/layouts/partials/sections/services.html
+++ b/layouts/partials/sections/services.html
@@ -75,9 +75,9 @@
                     {{ $nb_left = sub $nb_left 1 }}
 
                     <div class="{{ $col_layout }} text-center">
-                        <div class="service-box">
+                        <div class="service-box anim-wrapper">
                             {{ $pack := or .icon_pack "fa" }}
-                            <i class="{{ $pack }} {{ .icon }} wow bounceIn icon-x6"></i>
+                            <i class="{{ $pack }} {{ .icon }} anim zoomIn icon-x6"></i>
                             <h3>{{ .name }}</h3>
                             {{ with .text }}
                                 <p>{{ . }}</p>
diff --git a/layouts/partials/sections/skills.html b/layouts/partials/sections/skills.html
index dd4405d..6eacb35 100644
--- a/layouts/partials/sections/skills.html
+++ b/layouts/partials/sections/skills.html
@@ -12,14 +12,14 @@
                 <p>{{ $data.text | markdownify }}</p>
             </div>
             {{ with $data.download }}
-            <div class="col-lg-4 col-lg-offset-8 text-center">
-                <a href="/files/{{ .filename }}" download class="btn btn-primary btn-xl">
+            <div class="col-lg-4 col-lg-offset-8 text-center anim-wrapper">
+                <a href="/files/{{ .filename }}" download class="btn btn-primary btn-xl anim zoomIn">
                     {{ with .button_text }}
                         {{ . }}
                     {{ end }}
                     {{ if .icon }}
                         {{ $pack := or .icon_pack "fa" }}
-                        <i class="{{ $pack }} {{ .icon }} wow bounceIn"></i>
+                        <i class="{{ $pack }} {{ .icon }}"></i>
                     {{ end }}
                 </a>
             </div>
diff --git a/layouts/partials/tail.html b/layouts/partials/tail.html
index ed6fbd7..09d4b80 100644
--- a/layouts/partials/tail.html
+++ b/layouts/partials/tail.html
@@ -13,5 +13,5 @@
 <script src="{{ "plugins/bootstrap/js/bootstrap.min.js" | absURL }}"></script>
 <script src="{{ "plugins/jquery/jquery.easing.min.js" | absURL }}"></script>
 <script src="{{ "plugins/jquery/jquery.fittext.js" | absURL }}"></script>
-<script src="{{ "plugins/jquery/wow.min.js" | absURL }}"></script>
 <script src="{{ "js/theme.js" | absURL }}"></script>
+<script src="{{ "js/anim.js" | absURL }}"></script>
\ No newline at end of file
diff --git a/layouts/partials/title-bar.html b/layouts/partials/title-bar.html
index 2bd2ff8..e4928f4 100644
--- a/layouts/partials/title-bar.html
+++ b/layouts/partials/title-bar.html
@@ -5,20 +5,26 @@
     - title: the title text
 */}}
 <div class="row">
-    {{ $title_length := 10 }}
-    {{ with .length }}
-        {{ $title_length = . }}
-    {{ end }}
-    {{ if eq .align "left" }}
-    <div class="col-md-{{ $title_length }} section-title-left">
-    {{ else if eq .align "right" }}
-    <div class="col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }} section-title-right">
-    {{ else }}
-    <div class="col-md-{{ $title_length }} col-md-offset-{{ div (sub 12 $title_length) 2 }} section-title-center">
-    {{ end }}
-        {{ with .title }}
-        <h2 class="section-heading">{{ . }}</h2>
-        <hr class="section-hr">
+    {{ if .title }}
+        {{ $title_length := 10 }}
+        {{ with .length }}
+            {{ $title_length = . }}
         {{ end }}
-    </div>
+        {{ if eq .align "left" }}
+        <div class="anim-wrapper col-md-{{ $title_length }} section-title-left">
+            <h2 class="section-heading anim zoomIn">{{ .title }}</h2>
+            <hr class="section-hr anim slideRight">
+        </div>
+        {{ else if eq .align "right" }}
+        <div class="anim-wrapper col-md-{{ $title_length }} col-md-offset-{{ sub 12 $title_length }} section-title-right">
+            <h2 class="section-heading anim zoomIn">{{ .title }}</h2>
+            <hr class="section-hr anim slideLeft">
+        </div>
+        {{ else }}
+        <div class="anim-wrapper col-md-{{ $title_length }} col-md-offset-{{ div (sub 12 $title_length) 2 }} section-title-center">
+            <h2 class="section-heading anim zoomIn">{{ .title }}</h2>
+            <hr class="section-hr anim zoomIn">
+        </div>
+        {{ end }}
+    {{ end }}
 </div>
\ No newline at end of file
diff --git a/static/css/theme.css b/static/css/theme.css
index 99d2afc..64b1efe 100644
--- a/static/css/theme.css
+++ b/static/css/theme.css
@@ -48,6 +48,50 @@ hr {
     border-color: var(--HR-BORDER-COLOR, var(--GENERAL-COLOR-1));
 }
 
+@keyframes zoom-in {
+    0% {
+        transform: scale(0);
+    }
+    100% {
+        transform: scale(1);
+    }
+}
+@keyframes slide-right {
+    0% {
+        width: 0;
+        margin-left: 100%;
+    }
+    100% {
+        width: 100%;
+        margin-left: 0;
+    }
+}
+@keyframes slide-left {
+    0% {
+        width: 0;
+        margin-right: 100%;
+    }
+    100% {
+        width: 100%;
+        margin-right: 0;
+    }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+    .anim-in {
+        animation: zoom-in .5s 1;
+    }
+
+    .anim-left {
+        animation: slide-right .5s 1;
+    }
+
+    .anim-right {
+        animation: slide-left .5s 1;
+    }
+}
+
+
 /* TODO: can be removed*/
 hr.light {
     border-color: var(--HR-BORDER-LIGHT-COLOR, var(--GENERAL-COLOR-2));
diff --git a/static/js/anim.js b/static/js/anim.js
new file mode 100644
index 0000000..00d285f
--- /dev/null
+++ b/static/js/anim.js
@@ -0,0 +1,52 @@
+/*
+  Add intersection observer to trigger animation when visible.
+*/
+$(document).ready(function () {
+    const animObserver = new IntersectionObserver(entries => {
+        entries.forEach(entry => {
+            entry.target.querySelectorAll('.anim').forEach((animated) => {
+
+                /* TODO: rewrite to handle a list of animations, instead of hardcoded 'if...else if' */
+                const classes = animated.classList;
+                if (classes.contains('zoomIn')) {
+                    if (entry.isIntersecting) {
+                        if (!classes.contains('anim-in')) {
+                            animated.classList.add('anim-in');
+                        }
+                    } else {
+                        /* TODO: remove this 'else' block if want only triggered once */
+                        if (classes.contains('anim-in')) {
+                            animated.classList.remove('anim-in');
+                        }
+                    }
+                } else if (classes.contains('slideLeft')) {
+                    if (entry.isIntersecting) {
+                        if (!classes.contains('anim-left')) {
+                            animated.classList.add('anim-left');
+                        }
+                    } else {
+                        /* TODO: remove this 'else' block if want only triggered once */
+                        if (classes.contains('anim-left')) {
+                            animated.classList.remove('anim-left');
+                        }
+                    }
+                } else if (classes.contains('slideRight')) {
+                    if (entry.isIntersecting) {
+                        if (!classes.contains('anim-right')) {
+                            animated.classList.add('anim-right');
+                        }
+                    } else {
+                        /* TODO: remove this 'else' block if want only triggered once */
+                        if (classes.contains('anim-right')) {
+                            animated.classList.remove('anim-right');
+                        }
+                    }
+                }
+            });
+        });
+    });
+
+    document.querySelectorAll('.anim-wrapper').forEach((wrapper) => {
+        animObserver.observe(wrapper);
+    });
+})
\ No newline at end of file
diff --git a/static/js/theme.js b/static/js/theme.js
index 3202997..878da05 100644
--- a/static/js/theme.js
+++ b/static/js/theme.js
@@ -42,7 +42,4 @@
         }
     })
 
-    // Initialize WOW.js Scrolling Animations
-    new WOW().init();
-
 })(jQuery); // End of use strict
diff --git a/static/plugins/jquery/wow.min.js b/static/plugins/jquery/wow.min.js
deleted file mode 100644
index a692251..0000000
--- a/static/plugins/jquery/wow.min.js
+++ /dev/null
@@ -1,2 +0,0 @@
-/*! WOW - v1.1.2 - 2015-04-07
-* Copyright (c) 2015 Matthieu Aussaguel; Licensed MIT */(function(){var a,b,c,d,e,f=function(a,b){return function(){return a.apply(b,arguments)}},g=[].indexOf||function(a){for(var b=0,c=this.length;c>b;b++)if(b in this&&this[b]===a)return b;return-1};b=function(){function a(){}return a.prototype.extend=function(a,b){var c,d;for(c in b)d=b[c],null==a[c]&&(a[c]=d);return a},a.prototype.isMobile=function(a){return/Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(a)},a.prototype.createEvent=function(a,b,c,d){var e;return null==b&&(b=!1),null==c&&(c=!1),null==d&&(d=null),null!=document.createEvent?(e=document.createEvent("CustomEvent"),e.initCustomEvent(a,b,c,d)):null!=document.createEventObject?(e=document.createEventObject(),e.eventType=a):e.eventName=a,e},a.prototype.emitEvent=function(a,b){return null!=a.dispatchEvent?a.dispatchEvent(b):b in(null!=a)?a[b]():"on"+b in(null!=a)?a["on"+b]():void 0},a.prototype.addEvent=function(a,b,c){return null!=a.addEventListener?a.addEventListener(b,c,!1):null!=a.attachEvent?a.attachEvent("on"+b,c):a[b]=c},a.prototype.removeEvent=function(a,b,c){return null!=a.removeEventListener?a.removeEventListener(b,c,!1):null!=a.detachEvent?a.detachEvent("on"+b,c):delete a[b]},a.prototype.innerHeight=function(){return"innerHeight"in window?window.innerHeight:document.documentElement.clientHeight},a}(),c=this.WeakMap||this.MozWeakMap||(c=function(){function a(){this.keys=[],this.values=[]}return a.prototype.get=function(a){var b,c,d,e,f;for(f=this.keys,b=d=0,e=f.length;e>d;b=++d)if(c=f[b],c===a)return this.values[b]},a.prototype.set=function(a,b){var c,d,e,f,g;for(g=this.keys,c=e=0,f=g.length;f>e;c=++e)if(d=g[c],d===a)return void(this.values[c]=b);return this.keys.push(a),this.values.push(b)},a}()),a=this.MutationObserver||this.WebkitMutationObserver||this.MozMutationObserver||(a=function(){function a(){"undefined"!=typeof console&&null!==console&&console.warn("MutationObserver is not supported by your browser."),"undefined"!=typeof console&&null!==console&&console.warn("WOW.js cannot detect dom mutations, please call .sync() after loading new content.")}return a.notSupported=!0,a.prototype.observe=function(){},a}()),d=this.getComputedStyle||function(a){return this.getPropertyValue=function(b){var c;return"float"===b&&(b="styleFloat"),e.test(b)&&b.replace(e,function(a,b){return b.toUpperCase()}),(null!=(c=a.currentStyle)?c[b]:void 0)||null},this},e=/(\-([a-z]){1})/g,this.WOW=function(){function e(a){null==a&&(a={}),this.scrollCallback=f(this.scrollCallback,this),this.scrollHandler=f(this.scrollHandler,this),this.resetAnimation=f(this.resetAnimation,this),this.start=f(this.start,this),this.scrolled=!0,this.config=this.util().extend(a,this.defaults),this.animationNameCache=new c,this.wowEvent=this.util().createEvent(this.config.boxClass)}return e.prototype.defaults={boxClass:"wow",animateClass:"animated",offset:0,mobile:!0,live:!0,callback:null},e.prototype.init=function(){var a;return this.element=window.document.documentElement,"interactive"===(a=document.readyState)||"complete"===a?this.start():this.util().addEvent(document,"DOMContentLoaded",this.start),this.finished=[]},e.prototype.start=function(){var b,c,d,e;if(this.stopped=!1,this.boxes=function(){var a,c,d,e;for(d=this.element.querySelectorAll("."+this.config.boxClass),e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.all=function(){var a,c,d,e;for(d=this.boxes,e=[],a=0,c=d.length;c>a;a++)b=d[a],e.push(b);return e}.call(this),this.boxes.length)if(this.disabled())this.resetStyle();else for(e=this.boxes,c=0,d=e.length;d>c;c++)b=e[c],this.applyStyle(b,!0);return this.disabled()||(this.util().addEvent(window,"scroll",this.scrollHandler),this.util().addEvent(window,"resize",this.scrollHandler),this.interval=setInterval(this.scrollCallback,50)),this.config.live?new a(function(a){return function(b){var c,d,e,f,g;for(g=[],c=0,d=b.length;d>c;c++)f=b[c],g.push(function(){var a,b,c,d;for(c=f.addedNodes||[],d=[],a=0,b=c.length;b>a;a++)e=c[a],d.push(this.doSync(e));return d}.call(a));return g}}(this)).observe(document.body,{childList:!0,subtree:!0}):void 0},e.prototype.stop=function(){return this.stopped=!0,this.util().removeEvent(window,"scroll",this.scrollHandler),this.util().removeEvent(window,"resize",this.scrollHandler),null!=this.interval?clearInterval(this.interval):void 0},e.prototype.sync=function(){return a.notSupported?this.doSync(this.element):void 0},e.prototype.doSync=function(a){var b,c,d,e,f;if(null==a&&(a=this.element),1===a.nodeType){for(a=a.parentNode||a,e=a.querySelectorAll("."+this.config.boxClass),f=[],c=0,d=e.length;d>c;c++)b=e[c],g.call(this.all,b)<0?(this.boxes.push(b),this.all.push(b),this.stopped||this.disabled()?this.resetStyle():this.applyStyle(b,!0),f.push(this.scrolled=!0)):f.push(void 0);return f}},e.prototype.show=function(a){return this.applyStyle(a),a.className=a.className+" "+this.config.animateClass,null!=this.config.callback&&this.config.callback(a),this.util().emitEvent(a,this.wowEvent),this.util().addEvent(a,"animationend",this.resetAnimation),this.util().addEvent(a,"oanimationend",this.resetAnimation),this.util().addEvent(a,"webkitAnimationEnd",this.resetAnimation),this.util().addEvent(a,"MSAnimationEnd",this.resetAnimation),a},e.prototype.applyStyle=function(a,b){var c,d,e;return d=a.getAttribute("data-wow-duration"),c=a.getAttribute("data-wow-delay"),e=a.getAttribute("data-wow-iteration"),this.animate(function(f){return function(){return f.customStyle(a,b,d,c,e)}}(this))},e.prototype.animate=function(){return"requestAnimationFrame"in window?function(a){return window.requestAnimationFrame(a)}:function(a){return a()}}(),e.prototype.resetStyle=function(){var a,b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],e.push(a.style.visibility="visible");return e},e.prototype.resetAnimation=function(a){var b;return a.type.toLowerCase().indexOf("animationend")>=0?(b=a.target||a.srcElement,b.className=b.className.replace(this.config.animateClass,"").trim()):void 0},e.prototype.customStyle=function(a,b,c,d,e){return b&&this.cacheAnimationName(a),a.style.visibility=b?"hidden":"visible",c&&this.vendorSet(a.style,{animationDuration:c}),d&&this.vendorSet(a.style,{animationDelay:d}),e&&this.vendorSet(a.style,{animationIterationCount:e}),this.vendorSet(a.style,{animationName:b?"none":this.cachedAnimationName(a)}),a},e.prototype.vendors=["moz","webkit"],e.prototype.vendorSet=function(a,b){var c,d,e,f;d=[];for(c in b)e=b[c],a[""+c]=e,d.push(function(){var b,d,g,h;for(g=this.vendors,h=[],b=0,d=g.length;d>b;b++)f=g[b],h.push(a[""+f+c.charAt(0).toUpperCase()+c.substr(1)]=e);return h}.call(this));return d},e.prototype.vendorCSS=function(a,b){var c,e,f,g,h,i;for(h=d(a),g=h.getPropertyCSSValue(b),f=this.vendors,c=0,e=f.length;e>c;c++)i=f[c],g=g||h.getPropertyCSSValue("-"+i+"-"+b);return g},e.prototype.animationName=function(a){var b;try{b=this.vendorCSS(a,"animation-name").cssText}catch(c){b=d(a).getPropertyValue("animation-name")}return"none"===b?"":b},e.prototype.cacheAnimationName=function(a){return this.animationNameCache.set(a,this.animationName(a))},e.prototype.cachedAnimationName=function(a){return this.animationNameCache.get(a)},e.prototype.scrollHandler=function(){return this.scrolled=!0},e.prototype.scrollCallback=function(){var a;return!this.scrolled||(this.scrolled=!1,this.boxes=function(){var b,c,d,e;for(d=this.boxes,e=[],b=0,c=d.length;c>b;b++)a=d[b],a&&(this.isVisible(a)?this.show(a):e.push(a));return e}.call(this),this.boxes.length||this.config.live)?void 0:this.stop()},e.prototype.offsetTop=function(a){for(var b;void 0===a.offsetTop;)a=a.parentNode;for(b=a.offsetTop;a=a.offsetParent;)b+=a.offsetTop;return b},e.prototype.isVisible=function(a){var b,c,d,e,f;return c=a.getAttribute("data-wow-offset")||this.config.offset,f=window.pageYOffset,e=f+Math.min(this.element.clientHeight,this.util().innerHeight())-c,d=this.offsetTop(a),b=d+a.clientHeight,e>=d&&b>=f},e.prototype.util=function(){return null!=this._util?this._util:this._util=new b},e.prototype.disabled=function(){return!this.config.mobile&&this.util().isMobile(navigator.userAgent)},e}()}).call(this);
\ No newline at end of file