Bye bye gsap 🚀

Author: chicio

_css/profile-introduction.scss

@@ -15,6 +15,16 @@
     left: 0;
     background-color: #3F51B5;
     opacity: 0;
+
+    &.show {
+      animation: show-rendering-surface 0.5s linear;
+      animation-fill-mode: forwards;
+    }
+
+    @keyframes show-rendering-surface {
+      from {opacity: 0;}
+      to {opacity: 1;}
+    }
   }
 
   .center-content {

_includes/dependencies-css-home.html

@@ -1 +1 @@
-<link rel="stylesheet" type="text/css" href="/assets/styles/style.home.css?rev=3b8973e93a74125dc6e26eb376c4b287">
+<link rel="stylesheet" type="text/css" href="/assets/styles/style.home.css?rev=0d10a6f2ee4faf34089fc8f22257e7f3">

_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=4e02995ccb1fee007aef57c09aa6f02e"></script>
+<script type="text/javascript" src="/assets/js/index.home.min.js?rev=9a9d8152939d79b7c979b764ce9c674b"></script>
 {%include service-worker.html %}

_includes/service-worker-css-home-urls.js

@@ -1 +1 @@
-"/assets/styles/style.home.css?rev=3b8973e93a74125dc6e26eb376c4b287",
+"/assets/styles/style.home.css?rev=0d10a6f2ee4faf34089fc8f22257e7f3",

_includes/service-worker-js-home-urls.js

@@ -1 +1 @@
-"/assets/js/index.home.min.js?rev=765d9647ef7d53499c5079ea5f9ad954",
+"/assets/js/index.home.min.js?rev=4e02995ccb1fee007aef57c09aa6f02e",

_js/common/animation.js

@@ -0,0 +1,11 @@
+/* @flow */
+import { addCssClass } from '../common/css-class'
+
+const animation = (elementId: string, animation: string): void => {
+  const element = document.getElementById(elementId)
+  if (element) {
+    addCssClass(element, animation)
+  }
+}
+
+export { animation }

_js/home/home-header-animation.js

@@ -1,20 +1,11 @@
 /* @flow */
-import { scene3D } from './scene-3D'
-import { addCssClass } from '../common/css-class'
+import { animation } from '../common/animation'
 
 const homeHeaderAnimation = (): void => {
   animation('loader', 'hide')
   animation('center-content', 'show')
   animation('center-content-buttons', 'show')
   animation('down-arrow', 'show')
-  scene3D()
-}
-
-const animation = (elementId: string, animation: string): void => {
-  const element = document.getElementById(elementId)
-  if (element) {
-    addCssClass(element, animation)
-  }
 }
 
 export { homeHeaderAnimation }

_js/home/scene-3D.js

@@ -1,9 +1,9 @@
 import * as THREE from 'three'
 import OrbitControls from 'orbit-controls-es6'
-import { TweenMax } from 'gsap'
 import PLYLoader from 'three-ply-loader'
 import isWebGLEnabled from 'detector-webgl'
 import { isAMobileDevice } from '../common/mobile-device-detector'
+import { animation } from '../common/animation'
 
 const scene3D = () => {
   if (isWebGLEnabled && isAMobileDevice() === false) {
@@ -198,12 +198,7 @@ const floor = (textureLoader, completionFunction) => {
   })
 }
 
-const showRenderingSurfaceAnimation = () => {
-  TweenMax.to('#rendering-surface', 0.5, {
-    opacity: 1,
-    delay: 0.2
-  })
-}
+const showRenderingSurfaceAnimation = () => animation('rendering-surface', 'show')
 
 const setWindowResizeListener = (camera, renderer) => {
   window.addEventListener('resize', () => {

_js/index.home.js

@@ -1,14 +1,16 @@
 /* @flow */
 import { cookieConsent } from './common/cookie-consent'
 import { loadFont } from './common/load-font'
+import { lazyLoadImages } from './common/lazy-load-images'
 import { tabs } from './home/tabs'
 import { homeHeaderAnimation } from './home/home-header-animation'
-import { lazyLoadImages } from './common/lazy-load-images'
+import { scene3D } from './home/scene-3D'
 
 document.addEventListener('DOMContentLoaded', () => {
   loadFont()
   cookieConsent()
   tabs()
   lazyLoadImages('.profile-image, .who-am-i-icon, .project-image, .timeline-image')
   homeHeaderAnimation()
+  scene3D()
 })

_jsbuild/common/animation.js

@@ -0,0 +1,11 @@
+/*  */
+import { addCssClass } from '../common/css-class'
+
+const animation = (elementId, animation) => {
+  const element = document.getElementById(elementId)
+  if (element) {
+    addCssClass(element, animation)
+  }
+}
+
+export { animation }