Finishing improving animation 🚀

Author: chicio

_includes/critical.css

@@ -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=88e5014643486fc0bae94c82bdf081e6"></script>
+<script type="text/javascript" src="/assets/js/index.blog.min.js?rev=c323aa96de6441210c450dec7dfcd86d"></script>
 {%include service-worker.html %}

_includes/dependencies-blog.html

@@ -1 +1 @@
-"/assets/js/index.blog.min.js?rev=88e5014643486fc0bae94c82bdf081e6",
+"/assets/js/index.blog.min.js?rev=c323aa96de6441210c450dec7dfcd86d",

_includes/service-worker-blog-urls.js

@@ -1,14 +1,19 @@
 /* @flow */
-import { TimelineMax } from 'gsap'
+import { TweenLite } from 'gsap'
 import { enableScroll } from '../common/scroll-manager'
+import { addCssClass } from '../common/css-class'
 
 const blogAnimation = (): void => {
-  const showBlogTimeline: TimelineMax = new TimelineMax({ delay: 0.2 })
-  showBlogTimeline.to('#loader', 0.2, { opacity: 0 })
-  showBlogTimeline.to('#loading-screen', 0.4, {
-    xPercent: -100,
-    onComplete: enableScroll
-  }, '+=0.4')
+  TweenLite.to('#loading-screen', 0.3, {
+    opacity: 0,
+    onComplete: onCompleteAnimation,
+    delay: 0.5
+  })
+}
+
+const onCompleteAnimation = () => {
+  addCssClass(document.getElementById('loading-screen'), 'd-none')
+  enableScroll()
 }
 
 export { blogAnimation }

_js/blog/blog-animation.js

@@ -1,14 +1,19 @@
 /*  */
-import { TimelineMax } from 'gsap'
+import { TweenLite } from 'gsap'
 import { enableScroll } from '../common/scroll-manager'
+import { addCssClass } from '../common/css-class'
 
 const blogAnimation = () => {
-  const showBlogTimeline = new TimelineMax({ delay: 0.2 })
-  showBlogTimeline.to('#loader', 0.2, { opacity: 0 })
-  showBlogTimeline.to('#loading-screen', 0.4, {
-    xPercent: -100,
-    onComplete: enableScroll
-  }, '+=0.4')
+  TweenLite.to('#loading-screen', 0.3, {
+    opacity: 0,
+    onComplete: onCompleteAnimation,
+    delay: 0.5
+  })
+}
+
+const onCompleteAnimation = () => {
+  addCssClass(document.getElementById('loading-screen'), 'd-none')
+  enableScroll()
 }
 
 export { blogAnimation }