add initial layout of pie in the animation

apache · Oct 9, 2021 · 5e765f5 · 5e765f5
1 parent de25a19
commit 5e765f5
Show file tree

Hide file tree

Showing 3 changed files with 123 additions and 29 deletions.
diff --git a/_jade/components/svg/entry-pie.svg b/_jade/components/svg/entry-pie.svg
diff --git a/_scss/_pages.index.scss b/_scss/_pages.index.scss
@@ -148,6 +148,8 @@ body {
         z-index: -100;
 
         svg {
+            width: 700px;
+            height: 700px;
             max-width: 100%;
             max-height: 100%;
         }
@@ -554,6 +556,10 @@ body {
             svg {
                 height: 41px;
                 width: 41px;
+
+                path {
+                    vector-effect: non-scaling-stroke;
+                }
             }
 
         }

diff --git a/js/index.js b/js/index.js
@@ -123,6 +123,15 @@ window.lazyLoadOptions = {
     // Index animation
     window.startMagic = function () {
         function start() {
+            var svgBoundingRect = document.querySelector('.home-feature-trailer-cover svg').getBoundingClientRect();
+            var rect = {
+                left: svgBoundingRect.left,
+                top: svgBoundingRect.top,
+                width: svgBoundingRect.width,
+                height: svgBoundingRect.height,
+            };
+
+            // Get rect before hiding.
             $('#main').addClass('cinematic-mode');
 
             document.getElementById('home-feature-trailer-close-btn').onclick = function () {
@@ -134,7 +143,11 @@ window.lazyLoadOptions = {
                 featureTrailer.resume();
             }
             else {
-                featureTrailer.init(document.getElementById('home-feature-trailer-viewport'))
+                featureTrailer.init(document.getElementById('home-feature-trailer-viewport'), {
+                    initialPieLayout: rect,
+                    initialPieAnimation: false,
+                    updateURLHash: false
+                })
                 isInited = true;
             }
         }