implement animations on scroll

layouts/partials/about.html

@@ -1,11 +1,11 @@
 <div id="about" class="about">
     {{ with .Site.GetPage "about" }}
-    <div class="about-part">
+    <div class="about-part fade-left">
         {{ with .Params.image }}
             <img src='{{ . | relURL }}' alt="{{ $.Params.title }}" title="{{ $.Params.title }}">
         {{ end }}
     </div>
-    <div class="about-part">
+    <div class="about-part fade-right">
         <h1>{{ .Title }}</h1>
         <div>{{ .Content }}</div>
     </div>

layouts/partials/contact.html

@@ -1,8 +1,8 @@
 <div id="contact" class="contact">
-    <div class="contact-title-wrapper">
+    <div class="contact-title-wrapper fade-up">
         <h1 class="contact-title">{{ T "contact-me" }}</h1>
     </div>
-    <div>
+    <div class="fade-up">
         {{ range .Site.Data.socialmedia }}
         <a href="{{ .link }}" alt="{{ .name }}" title="{{ .name }}"><i class="{{ .icon }}"></i></a>
         {{ end }}

layouts/partials/projects.html

@@ -1,6 +1,6 @@
 <div id="projects" class="projects">
-    <h1>{{ T "projects" }}</h1>
-    <div class="tag-filter">
+    <h1 class="fade-up">{{ T "projects" }}</h1>
+    <div class="tag-filter fade-up">
         {{ range .Site.Data.tags }}
         <div class="tag">
             <input class="tag-checkbox" id="tag-{{ .slug }}" value="{{ .slug }}" type="checkbox" {{ if .checked }} checked {{ end }}>
@@ -11,7 +11,7 @@
 
     <div class="project-list">
     </div>
-    <div>
+    <div class="fade-up">
         <button class="project-load-btn" alt='{{ T "load-more" }}' title='{{ T "load-more" }}' name='{{ T "load-more" }}'>{{ T "load-more" }}</button>
     </div>
 </div>

static/main.js

@@ -70,20 +70,27 @@ function updateNavStyle(){
 
 // intersection observer for animations
 // credits: https://coolcssanimation.com/how-to-trigger-a-css-animation-on-scroll/
-const observer = new IntersectionObserver(entries => {
-    entries.forEach(entry => {
-      const actionObject = entry.target.querySelector('.contact-title');
+function animationOnScroll(triggerSelector, animationClass, targetElement){
+    const trigger = document.querySelector(triggerSelector);
+    const target = ((targetElement) ? document.querySelector(targetElement) : trigger);
 
-      if (entry.isIntersecting) {
-        actionObject.classList.add('typewriter-animation');
-        return;
-      }
+    if(trigger){
+        const observer = new IntersectionObserver(entries => {
+            entries.forEach(entry => {     
+              if (entry.isIntersecting) {
+                target.classList.add(animationClass);
+              }
+              else{
+                target.classList.remove(animationClass);
+              }
+            });
+        }, { rootMargin: '0px 0px 5% 0px', threshold: 0.1 });
           
-      actionObject.classList.remove('typewriter-animation');
-    });
-});
+        return observer.observe(trigger);
+    }
+}
 
-observer.observe(document.querySelector('.contact-title-wrapper'));
+animationOnScroll('.contact-title-wrapper', 'typewriter-animation', '.contact-title');
 
 // calculate age
 function calculateAge(selector){
@@ -145,8 +152,9 @@ async function getProjectCard(data){
     });
 
     const container = document.createElement("div");
-    container.classList = "project-card";
+    container.classList = "project-card fade-up";
     container.classList.add(category);
+    //container.style.animation = "fade-up var(--baseDuration) linear";
     //container.style.backgroundImage = `url(${image})`;
 
     const cardFirst = document.createElement("div");

static/style.css

@@ -22,6 +22,9 @@ body{
     --baseTransition: all var(--baseDuration);
     --baseDuration: 250ms;
     --navSmallHeight: 66px;
+    --animationOffset: 100px;
+    --animationScale: 0.75;
+    --animationCoverValue: 40%;
 }
 
 /* CONTENT */
@@ -434,17 +437,6 @@ nav.small .nav-links a:last-child:focus{
     box-shadow: 0px 0px 10px 5px  rgba(0, 0, 0, 0.705);
     overflow: hidden;
     position: relative;
-    animation: fadeIn 400ms linear;
-}
-
-@keyframes fadeIn{
-    0%{
-        opacity: 0;
-    }
-
-    100%{
-        opacity: 1;
-    }
 }
 
 .card-first img{
@@ -756,3 +748,91 @@ nav.small .nav-links a:last-child:focus{
     border: 1px solid var(--primary);
     outline: none;
 }
+
+/* GENERAL ANIMATIONS */
+/* only css on scroll animations: https://www.youtube.com/watch?v=0TnO1GzKWPc */
+@media (prefers-reduced-motion: no-preference){
+    .fade-up{
+        animation: fade-up linear;
+        animation-timeline: view();
+        animation-composition: add;
+        animation-range: entry 0 cover var(--animationCoverValue);
+    }
+    
+    .fade-down{
+        animation: fade-down var(--baseDuration) linear;
+        animation-timeline: view();
+        animation-composition: add;
+        animation-range: entry 0 cover var(--animationCoverValue);
+    }
+    
+    .fade-left{
+        animation: fade-left var(--baseDuration) linear;
+        animation-timeline: view();
+        animation-composition: add;
+        animation-range: entry 0 cover var(--animationCoverValue);
+    }
+    
+    .fade-right{
+        animation: fade-right var(--baseDuration) linear;
+        animation-timeline: view();
+        animation-composition: add;
+        animation-range: entry 0 cover var(--animationCoverValue);
+    }
+}
+
+@keyframes fade-up{
+    0%{
+        opacity: 0;
+        translate: 0px var(--animationOffset);
+        scale: var(--animationScale);
+    }
+
+    100%{
+        opacity: 1;
+        translate: 0px 0px;
+        scale: 1;
+    }
+}
+
+@keyframes fade-down{
+    0%{
+        opacity: 0;
+        translate: 0px calc(var(--animationOffset) * -1);
+        scale: var(--animationScale);
+    }
+
+    100%{
+        opacity: 1;
+        translate: 0px 0px;
+        scale: 1;
+    }
+}
+
+@keyframes fade-left{
+    0%{
+        opacity: 0;
+        translate: calc(var(--animationOffset) * -1) 0px;
+        scale: var(--animationScale);
+    }
+
+    100%{
+        opacity: 1;
+        translate: 0px 0px;
+        scale: 1;
+    }
+}
+
+@keyframes fade-right{
+    0%{
+        opacity: 0;
+        translate: var(--animationOffset) 0px;
+        scale: var(--animationScale);
+    }
+
+    100%{
+        opacity: 1;
+        translate: 0px 0px;
+        scale: 1;
+    }
+}