Slide header down from top on small screens

Author: lorensr

css/raw.js

@@ -52,6 +52,7 @@ main.-landing {
 }
 .landing-header {
   width: 43vw;
+  transform: translateX(-100%);
 }
 .book-title {
   margin: 5vh 0 15vh 0;
@@ -63,6 +64,7 @@ main.-landing {
 @media (max-width: ${iPadMaxW}px) {
   .landing-header {
     width: 100vw;
+    transform: translateY(-100%);
   }
 
   .book-title {

pages/index.js

@@ -23,7 +23,7 @@ import Ripple from '../components/ripple'
 import Emoji from '../components/emoji'
 
 import muiTheme from '../lib/muitheme'
-import { white, color, grey } from '../lib/styles'
+import { white, color, grey, iPadMaxW } from '../lib/styles'
 import withData from '../lib/withData'
 
 // fixes "Warning: Unknown prop `onTouchTap` on <label> tag."
@@ -64,15 +64,31 @@ class Index extends Component {
     const logos = ReactDOM.findDOMNode(this.logos)
     const comingSoon = ReactDOM.findDOMNode(this.comingSoon)
 
+    const headerStart = (window.screen.width > iPadMaxW
+      ? {
+        x: -header.offsetWidth, // '-100%' percentage not supported
+      }
+      : {
+        y: -header.offsetHeight,
+      }
+    )
+
+    const headerDest = (window.screen.width > iPadMaxW
+      ? {
+        x: 0,
+      }
+      : {
+        y: 0,
+      }
+    )
+
     const animation = new TimelineLite({ paused: true })
 
     // timeline.to(header, 2, { rotationX: 0, scale: 1.3 })
 
     const path = 'M0,0 C0.46,0 0.804,0.243 0.87,0.368 0.928,0.478 0.884,0.4 1,1'
     const ease = CustomEase.create('steep-fall', path)
-    TweenLite.set(header, {
-      x: -header.offsetWidth, // '-100%' percentage not supported
-    })
+    TweenLite.set(header, headerStart)
     TweenLite.set(introPara, {
       x: -50,
       opacity: 0,
@@ -89,7 +105,7 @@ class Index extends Component {
     animation
     .delay(0.6) // wait for browser to not be busy. todo requestIdleCallback
     .to(header, 1, {
-      x: 0,
+      ...headerDest,
       ease: Power2.easeIn,
     })
     .to(introPara, 1.5, {
@@ -136,7 +152,6 @@ class Index extends Component {
                 backgroundColor: color,
                 color: white,
                 willChange: 'transform',
-                transform: 'translateX(-100%)',
               }}
               ref={(header) => { this.header = header }}
               >