Setup all profile hom animation with css 🚀

chicio · chicio · commit c05bec8b8269 · 2019-05-10T22:07:09.000+02:00
diff --git a/_css/loader.scss b/_css/loader.scss
@@ -1,21 +1,3 @@
-@mixin keyframes($animationName) {
-  @-webkit-keyframes #{$animationName} {
-    @content;
-  }
-
-  @-moz-keyframes #{$animationName} {
-    @content;
-  }
-
-  @-o-keyframes #{$animationName} {
-    @content;
-  }
-
-  @keyframes #{$animationName} {
-    @content;
-  }
-}
-
 .loader {
   border: 5px solid $general-background;
   border-top: 5px solid $accent-color;
@@ -28,9 +10,19 @@
   top: 50%;
   left: 50%;
   margin: -60px 0 0 -60px;
+
+  &.hide {
+    animation: hide 0.3s linear;
+    animation-fill-mode: forwards;
+  }
+}
+
+@keyframes hide {
+  from {opacity: 1;}
+  to {opacity: 0;}
 }
 
-@include keyframes(spin) {
+@keyframes spin {
   0% {
     transform: rotate(0deg);
   }
diff --git a/_css/profile-introduction.scss b/_css/profile-introduction.scss
@@ -23,6 +23,16 @@
     z-index: 100;
     opacity: 0;
 
+    &.show {
+      animation: show-profile-introduction 0.5s linear 0.3s;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes show-profile-introduction {
+      from {opacity: 0;}
+      to {opacity: 1;}
+    }
+
     a {
       text-decoration: none;
     }
@@ -68,6 +78,16 @@
       margin-left: auto;
       margin-right: auto;
 
+      &.show {
+        animation: show-profile-buttons 0.5s linear 0.3s;
+        animation-fill-mode: forwards;
+      }
+  
+      @keyframes show-profile-buttons {
+        from {opacity: 0;}
+        to {opacity: 1;}
+      }
+
       .profile-icon {
         padding-left: 5px;
         padding-right: 5px;
@@ -96,6 +116,16 @@
     text-align: center;
     color: $primary-color-text;
     opacity: 0;
+
+    &.show {
+      animation: show-down-arrow 0.5s;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes show-down-arrow {
+      from {opacity: 0;}
+      to {opacity: 1;}
+    }
   }
 }
 
diff --git a/_includes/critical.css b/_includes/critical.css
diff --git a/_includes/dependencies-css-blog-archive.html b/_includes/dependencies-css-blog-archive.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=aa1217bce6b8de26b88f4912ad90f2b7">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=da9f35d89cf58f6a05aac6a0b0718ad1">
diff --git a/_includes/dependencies-css-blog-home.html b/_includes/dependencies-css-blog-home.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.home.css?rev=c01e75c67a69e16fab34d0cf102f35a9">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.home.css?rev=3e2f91062ccc3779f9f16d271b1249a3">
diff --git a/_includes/dependencies-css-blog-post.html b/_includes/dependencies-css-blog-post.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.post.css?rev=4893339e048ba273f599687560368110">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.post.css?rev=0b157909853423ba3f33eb6e08a54252">
diff --git a/_includes/dependencies-css-blog-tags.html b/_includes/dependencies-css-blog-tags.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.tags.css?rev=e91cd47687226d158f1fa57c3709a958">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.tags.css?rev=465221b7379c0ae38d608d1e6d653dd0">
diff --git a/_includes/dependencies-css-cookie-policy.html b/_includes/dependencies-css-cookie-policy.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.cookiepolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.cookiepolicy.css?rev=816b132770c5bd5a3544a729b17436b1">
diff --git a/_includes/dependencies-css-home.html b/_includes/dependencies-css-home.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.home.css?rev=6c0bd9ef44d4a49a86572a7a86248296">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.home.css?rev=3b8973e93a74125dc6e26eb376c4b287">
diff --git a/_includes/dependencies-css-privacy-policy.html b/_includes/dependencies-css-privacy-policy.html
@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.privacypolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.privacypolicy.css?rev=816b132770c5bd5a3544a729b17436b1">
diff --git a/_includes/dependencies-js-blog.html b/_includes/dependencies-js-blog.html
@@ -16,5 +16,5 @@
 </script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.1/MathJax.js?config=TeX-AMS_SVG"></script>
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
-<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=4f8b809675406a9d752d3841efbf6db7"></script>
+<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=8b85e44c6e11896f741e6500b5e80b19"></script>
 {%include service-worker.html %}
diff --git a/_includes/dependencies-js-home.html b/_includes/dependencies-js-home.html
@@ -1,3 +1,3 @@
 <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/cookieconsent2/3.0.3/cookieconsent.min.js"></script>
-<script type="text/javascript" src="/assets/js/index.home.min.js?rev=fb8f1ee5543fc2361d7b474d5dccdcf7"></script>
+<script type="text/javascript" src="/assets/js/index.home.min.js?rev=4e02995ccb1fee007aef57c09aa6f02e"></script>
 {%include service-worker.html %}
diff --git a/_includes/service-worker-css-blog-archive-urls.js b/_includes/service-worker-css-blog-archive-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.archive.css?rev=aa1217bce6b8de26b88f4912ad90f2b7",
+"/assets/styles/style.blog.archive.css?rev=da9f35d89cf58f6a05aac6a0b0718ad1",
diff --git a/_includes/service-worker-css-blog-home-urls.js b/_includes/service-worker-css-blog-home-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.home.css?rev=c01e75c67a69e16fab34d0cf102f35a9",
+"/assets/styles/style.blog.home.css?rev=3e2f91062ccc3779f9f16d271b1249a3",
diff --git a/_includes/service-worker-css-blog-post-urls.js b/_includes/service-worker-css-blog-post-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.post.css?rev=4893339e048ba273f599687560368110",
+"/assets/styles/style.blog.post.css?rev=0b157909853423ba3f33eb6e08a54252",
diff --git a/_includes/service-worker-css-blog-tags-urls.js b/_includes/service-worker-css-blog-tags-urls.js
@@ -1 +1 @@
-"/assets/styles/style.blog.tags.css?rev=e91cd47687226d158f1fa57c3709a958",
+"/assets/styles/style.blog.tags.css?rev=465221b7379c0ae38d608d1e6d653dd0",
diff --git a/_includes/service-worker-css-cookie-policy-urls.js b/_includes/service-worker-css-cookie-policy-urls.js
@@ -1 +1 @@
-"/assets/styles/style.cookiepolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4",
+"/assets/styles/style.cookiepolicy.css?rev=816b132770c5bd5a3544a729b17436b1",
diff --git a/_includes/service-worker-css-home-urls.js b/_includes/service-worker-css-home-urls.js
@@ -1 +1 @@
-"/assets/styles/style.home.css?rev=6c0bd9ef44d4a49a86572a7a86248296",
+"/assets/styles/style.home.css?rev=3b8973e93a74125dc6e26eb376c4b287",
diff --git a/_includes/service-worker-css-privacy-policy-urls.js b/_includes/service-worker-css-privacy-policy-urls.js
@@ -1 +1 @@
-"/assets/styles/style.privacypolicy.css?rev=8ebdfedf0b7a086e10b81e182c01dbd4",
+"/assets/styles/style.privacypolicy.css?rev=816b132770c5bd5a3544a729b17436b1",
diff --git a/_includes/service-worker-js-blog-urls.js b/_includes/service-worker-js-blog-urls.js
@@ -1 +1 @@
-"/assets/js/index.blog.min.js?rev=4f8b809675406a9d752d3841efbf6db7",
+"/assets/js/index.blog.min.js?rev=8b85e44c6e11896f741e6500b5e80b19",
diff --git a/_includes/service-worker-js-home-urls.js b/_includes/service-worker-js-home-urls.js
@@ -1 +1 @@
-"/assets/js/index.home.min.js?rev=fb8f1ee5543fc2361d7b474d5dccdcf7",
+"/assets/js/index.home.min.js?rev=765d9647ef7d53499c5079ea5f9ad954",
diff --git a/_js/home/home-header-animation.js b/_js/home/home-header-animation.js
@@ -1,34 +1,20 @@
 /* @flow */
-import { TweenLite, TweenMax } from 'gsap'
 import { scene3D } from './scene-3D'
+import { addCssClass } from '../common/css-class'
 
 const homeHeaderAnimation = (): void => {
-  hideLoaderAnimation(() => {
-    profileAnimation(() => {
-      scene3D()
-    })
-  })
+  animation('loader', 'hide')
+  animation('center-content', 'show')
+  animation('center-content-buttons', 'show')
+  animation('down-arrow', 'show')
+  scene3D()
 }
 
-const hideLoaderAnimation = (completionFunction: () => void): void => {
-  TweenLite.to('#loader', 0.3, {
-    opacity: 0,
-    onComplete: completionFunction
-  })
-}
-
-const profileAnimation = (completeFunction: () => void): void => {
-  TweenMax.to('.center-content', 0.5, {
-    opacity: 1,
-    onComplete: completeFunction
-  })
-  downArrowAnimation()
-}
-
-const downArrowAnimation = (): void => {
-  TweenMax.to('#down-arrow', 0.5, {
-    opacity: 1
-  })
+const animation = (elementId: string, animation: string): void => {
+  const element = document.getElementById(elementId)
+  if (element) {
+    addCssClass(element, animation)
+  }
 }
 
 export { homeHeaderAnimation }
diff --git a/_js/index.home.js b/_js/index.home.js
@@ -8,7 +8,7 @@ import { lazyLoadImages } from './common/lazy-load-images'
 document.addEventListener('DOMContentLoaded', () => {
   loadFont()
   cookieConsent()
-  homeHeaderAnimation()
   tabs()
   lazyLoadImages('.profile-image, .who-am-i-icon, .project-image, .timeline-image')
+  homeHeaderAnimation()
 })
diff --git a/_jsbuild/home/home-header-animation.js b/_jsbuild/home/home-header-animation.js
@@ -1,34 +1,20 @@
 /*  */
-import { TweenLite, TweenMax } from 'gsap'
 import { scene3D } from './scene-3D'
+import { addCssClass } from '../common/css-class'
 
 const homeHeaderAnimation = () => {
-  hideLoaderAnimation(() => {
-    profileAnimation(() => {
-      scene3D()
-    })
-  })
+  animation('loader', 'hide')
+  animation('center-content', 'show')
+  animation('center-content-buttons', 'show')
+  animation('down-arrow', 'show')
+  scene3D()
 }
 
-const hideLoaderAnimation = (completionFunction) => {
-  TweenLite.to('#loader', 0.3, {
-    opacity: 0,
-    onComplete: completionFunction
-  })
-}
-
-const profileAnimation = (completeFunction) => {
-  TweenMax.to('.center-content', 0.5, {
-    opacity: 1,
-    onComplete: completeFunction
-  })
-  downArrowAnimation()
-}
-
-const downArrowAnimation = () => {
-  TweenMax.to('#down-arrow', 0.5, {
-    opacity: 1
-  })
+const animation = (elementId, animation) => {
+  const element = document.getElementById(elementId)
+  if (element) {
+    addCssClass(element, animation)
+  }
 }
 
 export { homeHeaderAnimation }
diff --git a/_jsbuild/index.home.js b/_jsbuild/index.home.js
@@ -8,7 +8,7 @@ import { lazyLoadImages } from './common/lazy-load-images'
 document.addEventListener('DOMContentLoaded', () => {
   loadFont()
   cookieConsent()
-  homeHeaderAnimation()
   tabs()
   lazyLoadImages('.profile-image, .who-am-i-icon, .project-image, .timeline-image')
+  homeHeaderAnimation()
 })
diff --git a/assets/js/index.blog.min.js b/assets/js/index.blog.min.js
diff --git a/assets/js/index.home.min.js b/assets/js/index.home.min.js
diff --git a/assets/styles/style.blog.archive.css b/assets/styles/style.blog.archive.css
diff --git a/assets/styles/style.blog.home.css b/assets/styles/style.blog.home.css
diff --git a/assets/styles/style.blog.post.css b/assets/styles/style.blog.post.css
diff --git a/assets/styles/style.blog.tags.css b/assets/styles/style.blog.tags.css
diff --git a/assets/styles/style.cookiepolicy.css b/assets/styles/style.cookiepolicy.css
diff --git a/assets/styles/style.home.css b/assets/styles/style.home.css
diff --git a/assets/styles/style.privacypolicy.css b/assets/styles/style.privacypolicy.css
diff --git a/npm-debug.log b/npm-debug.log

Original file line number	Diff line number	Diff line change
`@@ -1 +1 @@`
`1`		`-<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=aa1217bce6b8de26b88f4912ad90f2b7">`
	`1`	`+<link rel="stylesheet" type="text/css" href="/assets/styles/style.blog.archive.css?rev=da9f35d89cf58f6a05aac6a0b0718ad1">`