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

@@ -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()
+        })
     })
 }

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,

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 {

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

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;