From 99dd2c5327a0060ecac221834a8f5c794c907ee3 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Fe=CC=81lix=20Pe=CC=81ault?= <hello@flayks.com>
Date: Tue, 21 Apr 2020 15:21:50 +0200
Subject: [PATCH] Style and animations fixes

- Add a requestAnimationFrame for TitleSite (would not fire from a location to credits/choose)
- Center and adjust parallax scroll for massive titles
- Place illustration: max width and center
---
 src/animations/TitleSite.js    | 13 ++++++-------
 src/animations/index.js        |  2 +-
 src/style/_base.scss           |  2 ++
 src/style/pages/_homepage.scss |  5 +++++
 src/style/pages/_place.scss    |  3 ++-
 5 files changed, 16 insertions(+), 9 deletions(-)

diff --git a/src/animations/TitleSite.js b/src/animations/TitleSite.js
index 09cbe2d..f5717ba 100644
--- a/src/animations/TitleSite.js
+++ b/src/animations/TitleSite.js
@@ -21,12 +21,11 @@ export const animateIn = (scope, init) => {
     })
 
     // On scroll animation
-    const title = ScrollOut({
-        once: true,
-        targets: scope,
-        onShown: () => {
-            console.log('TitleSite show')
-            letters.restart()
-        }
+    requestAnimationFrame(() => {
+        const title = ScrollOut({
+            once: true,
+            targets: scope,
+            onShown: () => letters.restart()
+        })
     })
 }
diff --git a/src/animations/index.js b/src/animations/index.js
index 0fcbf9f..ccbd1fe 100644
--- a/src/animations/index.js
+++ b/src/animations/index.js
@@ -21,7 +21,7 @@ export const animateIn = () => {
     // Title: Parallax on scroll
     const translate = anime({
         targets: '#title-houses',
-        translateX: ['7%', '-15%'],
+        translateX: window.innerWidth <= 1920 ? ['25%', '-15%'] : ['7%', '-7%'],
         translateZ: [0, 0],
         easing: 'linear',
         duration: animDuration,
diff --git a/src/style/_base.scss b/src/style/_base.scss
index a197ea4..7f6df5a 100644
--- a/src/style/_base.scss
+++ b/src/style/_base.scss
@@ -57,6 +57,7 @@ button {
     line-height: 1;
     color: $color-secondary;
     letter-spacing: -2vw;
+    text-align: center;
     pointer-events: none;
     user-select: none;
 
@@ -65,6 +66,7 @@ button {
     }
     @include breakpoint (1920px) {
         font-size: rem(900px);
+        letter-spacing: -40px;
     }
 
     &, span {
diff --git a/src/style/pages/_homepage.scss b/src/style/pages/_homepage.scss
index 6030e76..f7edb47 100644
--- a/src/style/pages/_homepage.scss
+++ b/src/style/pages/_homepage.scss
@@ -7,6 +7,11 @@
     .title-parallax {
         margin-top: -#{pxVW(160)};
         margin-left: -#{pxVW(160)};
+
+        @include breakpoint (1920px) {
+            margin-top: -160px;
+            margin-left: auto;
+        }
     }
 
     // Description
diff --git a/src/style/pages/_place.scss b/src/style/pages/_place.scss
index e2d2574..1720dc2 100644
--- a/src/style/pages/_place.scss
+++ b/src/style/pages/_place.scss
@@ -167,13 +167,14 @@
         top: 0;
         left: 0;
         width: 100%;
-        max-width: 1920px;
         height: 100%;
         will-change: transform, opacity;
 
         .parallax {
             width: 100%;
             height: 100%;
+            max-width: 1760px;
+            margin: 0 auto;
         }
         &_img {
             position: relative;