update header animation

2 files changed, 34 insertions, 31 deletions

diff --git a/vnext/src/components/Header.js b/vnext/src/components/Header.js
index 43935f4c..68375d48 100644
--- a/vnext/src/components/Header.js
+++ b/vnext/src/components/Header.js
@@ -14,35 +14,10 @@ export default class Header extends React.Component {
         this.wScrollDiff = 0;
         this.header = React.createRef();
     }
-    componentDidMount() {
-        const header = this.header.current;
-        window.addEventListener('scroll', this.throttle(250, () => {
-            this.dHeight = document.body.offsetHeight;
-            this.wHeight = window.innerHeight;
-            this.wScrollCurrent = window.pageYOffset;
-            this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
-
-            if (this.wScrollCurrent <= 0) {
-                // scrolled to the very top; element sticks to the top
-                header.classList.remove(elClassHidden);
-                header.classList.remove(elClassBackground);
-            } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
-                // scrolled up; element slides in
-                header.classList.remove(elClassHidden);
-                header.classList.add(elClassBackground);
-            } else if (this.wScrollDiff < 0) {
-                // scrolled down
-                if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
-                    // scrolled to the very bottom; element slides in
-                    header.classList.remove(elClassHidden);
-                    header.classList.add(elClassBackground);
-                } else {
-                    // scrolled down; element slides out
-                    header.classList.add(elClassHidden);
-                }
-            }
-            this.wScrollBefore = this.wScrollCurrent;
-        }), { passive: true });
+    componentDidMount() {        
+        window.addEventListener('scroll', () => (!window.requestAnimationFrame) 
+        ? this.throttle(250, this.updateHeader)
+        : window.requestAnimationFrame(this.updateHeader), false);
     }
     throttle(delay, fn) {
         var last, deferTimer;
@@ -62,6 +37,34 @@ export default class Header extends React.Component {
             }
         };
     }
+    updateHeader = () => {
+        const header = this.header.current;
+        this.dHeight = document.body.offsetHeight;
+        this.wHeight = window.innerHeight;
+        this.wScrollCurrent = window.pageYOffset;
+        this.wScrollDiff = this.wScrollBefore - this.wScrollCurrent;
+
+        if (this.wScrollCurrent <= 0) {
+            // scrolled to the very top; element sticks to the top
+            header.classList.remove(elClassHidden);
+            header.classList.remove(elClassBackground);
+        } else if (this.wScrollDiff > 0 && header.classList.contains(elClassHidden)) {
+            // scrolled up; element slides in
+            header.classList.remove(elClassHidden);
+            header.classList.add(elClassBackground);
+        } else if (this.wScrollDiff < 0) {
+            // scrolled down
+            if (this.wScrollCurrent + this.wHeight >= this.dHeight && header.classList.contains(elClassHidden)) {
+                // scrolled to the very bottom; element slides in
+                header.classList.remove(elClassHidden);
+                header.classList.add(elClassBackground);
+            } else {
+                // scrolled down; element slides out
+                header.classList.add(elClassHidden);
+            }
+        }
+        this.wScrollBefore = this.wScrollCurrent;
+    }
     render() {
         return (<header ref={this.header}>{this.props.children}</header>);
     }
diff --git a/vnext/src/style/main.css b/vnext/src/style/main.css
index 3947b0b0..c5e33ef7 100644
--- a/vnext/src/style/main.css
+++ b/vnext/src/style/main.css
@@ -91,8 +91,8 @@ noscript article {
     top: 0;
     width: 100%;
     z-index: 10;
-    transition-duration: 0.5s;
-    transition-timing-function: cubic-bezier(0.215, 0.61, 0.355, 1);
+    transition-duration: 0.4s;
+    transition-timing-function: ease-in-out;
     transition-property: transform;
 }
 @supports (backdrop-filter: blur(10px)) {