Minor changes

src/App.svelte

@@ -3,44 +3,16 @@
   import StartVideo from './assets/StartVideo.gif'
   import ScrollTextComponent from './lib/ScrollTextComponent.svelte'
   import { Parallax, ParallaxLayer, StickyLayer } from 'svelte-parallax';
-  import ZSpacer from './lib/ZSpacer.svelte';
+  import ZSpacer from './lib/Universal/ZSpacer.svelte';
+  import Cube3D from './lib/Cube3D.svelte';
+  import WeAreText from './lib/WeAreText.svelte';
 
   window.onload = function() {
-    window.scrollTo(0, 100);
+    window.scrollTo(0, 100); // Real
+    //window.scrollTo(0, 3000); // debug
   };
 
   let scrollPos: number = 0;
-  let rotation: number = 0;
-
-  let startPosAnim: number = 150;
-  let endPosAnim: number = 1600;
-
-  function rotateCube() {
-    //incremtent
-    rotation += 90;
-  }
-  
-
-  $: {
-    let time = (scrollPos - startPosAnim)/endPosAnim;
-    rotation = lerp(0, 360, clamp(time, 0, 1), true);
-    console.log(time + " -> " + rotation);
-  }
-
-
-  function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
-    const lerped: number = from + (to - from) * time;
-    
-    if (clamped) {
-      return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
-    }
-
-    return lerped;
-  }
-
-  function clamp(value: number, min: number, max: number): number {
-      return Math.min(Math.max(value, min), max);
-  }
 </script>
 
 <svelte:window bind:scrollY={scrollPos} />
@@ -53,31 +25,29 @@
     <a href="#about">About</a>
   </div> 
 
-  <Parallax sections={3} config={{stiffness: 0.2, damping: 0.3}}>
+  <Parallax sections={10} config={{stiffness: 0.2, damping: 0.3}}>
     <ParallaxLayer rate={0} span={3} style="background-color: #242424;" />
 
-    <StickyLayer offset={{ top: 0, bottom: 2 }}>
-      <button on:click={rotateCube}>
-        Rotate
-      </button>
-
-      <div class="horizontal" style="padding: 200px;">
-        <div>
-          test {scrollPos}
-        </div>
-    
+    <StickyLayer class="align-center" offset={{ top: 1, bottom: 6.5 }}>
+      <div class="horizontal" style="padding: 200px;">    
         <ZSpacer/>
-    
-        <div id="cube-3d-container">
-          <div id="cube3d" style="transform:rotateY({rotation}deg);">
-            <div class="front">1</div>
-            <div class="back">2</div>
-            <div class="right">3</div>
-            <div class="left">4</div>
-            <div class="top">5</div>
-            <div class="bottom">6</div>
-          </div>
-        </div>
+        <Cube3D/>
+      </div>
+    </StickyLayer>
+
+    <StickyLayer class="align-center" offset={{ top: 0, bottom: 6.5 }}>
+      <WeAreText/>
+    </StickyLayer>
+
+    <StickyLayer offset={{ top: 0, bottom: 10 }}>
+      <div>
+        {scrollPos}
+      </div>
+    </StickyLayer>
+
+    <StickyLayer offset={{ top: 5.4, bottom: 10 }} style="background-color: #242424;">
+      <div class="align-center" style="font-size: 100px; padding-top: 200px;">
+        The deprived devs
       </div>
     </StickyLayer>
   </Parallax>
@@ -106,6 +76,6 @@
 </main>
 
 <style>
-@import './cube3d.css';
+
 </style>
 

src/app.css

@@ -66,4 +66,33 @@ body {
 .horizontal{
   display: flex;
   justify-content: flex-start;
+}
+
+.big-text {
+  font-size: 125px;
+}
+
+.no-wrap {
+  text-wrap: nowrap;
+  white-space: nowrap;
+}
+
+.no-interact {
+  pointer-events: none;
+}
+
+.hide{
+  visibility: hidden;
+}
+
+/* ================================================ */
+/* Aligning */
+/* ================================================ */
+.align-center {
+  align-content: center;
+  align-items: center;
+  justify-content: center;
+  display: flex;
+  text-align: center;
+  vertical-align: middle;
 }

src/cube3d.css

@@ -1,110 +0,0 @@
-/* .rotate1{
-  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
-} */
-/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
-
-:root {
-    --cube-size: 400px;
-}
-
-#cube-3d-container {
-    width: var(--cube-size);
-    height: var(--cube-size);
-    position: relative;
-    perspective: 1000px;
-    -moz-perspective: 1000px;
-    padding: 25px;
-  }
-  
-  #cube3d {
-    width: 100%;
-    height: 100%;
-    position: absolute;
-    transform-style: preserve-3d;
-    transition: transform 1s ease-out;
-  }
-  
-  #cube3d div {
-    width: var(--cube-size);
-    height: var(--cube-size);
-    display: block;
-    position: absolute;
-    border: none;
-    line-height: var(--cube-size);
-    text-align: center;
-    font-size: 50px;
-    font-weight: bold;
-  }
-  
-  .front {
-    background: rgba(255,0,0,.5);
-  }
-  
-  .back {
-    background: rgba(0,255,0,.5);
-  }
-  
-  .right {
-    background: rgba(0,0,255,.5);
-  }
-  
-  .left {
-    background: rgba(0,255,255,.5);
-  }
-  
-  .top {
-    background: rgba(255,0,255,.5);
-  }
-  
-  .bottom {
-    background: rgba(255,255,0,.5);
-  }
-    
-  /* .front {
-    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
-  }
-  
-  .back {
-    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
-  }
-  
-  .right {
-    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
-  }
-  
-  .left {
-    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
-  }
-  
-  .top {
-    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
-  }
-  
-  .bottom {
-    background: url('https://i1.sndcdn.com/avatars-IesRuX9vhlBZzVuz-1H6bOA-t500x500.jpg');
-  } */
-  
-  #cube3d .front  {
-    transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
-    -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
-  }
-  #cube3d .back {
-    transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) );
-    -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) );
-  }
-  #cube3d .right  {
-    transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-    -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-  }
-  #cube3d .left   {
-    transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-    -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-  }
-  #cube3d .top    {
-    transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-    -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
-  }
-  #cube3d .bottom {
-    transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-    -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
-  }

src/lib/Cube3D.css

@@ -0,0 +1,86 @@
+/* .rotate1{
+  transform: rotateX(0deg) rotateY(90deg) rotateZ(0deg);
+} */
+/* demo: https://codepen.io/mrosati84/pen/kWwXLg */
+
+#cube-3d-container {
+  width: var(--cube-size);
+  height: var(--cube-size);
+  position: relative;
+  perspective: 500px;
+  -moz-perspective: 1000px;
+  padding: 25px;
+}
+
+#cube3d {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  transform-style: preserve-3d;
+  transition: transform 1s cubic-bezier(0,1.32,0,.92);
+}
+
+#cube3d div {
+  display: block;
+  border: none;
+  line-height: var(--cube-size);
+  text-align: center;
+  font-size: 65px;
+}
+
+.cube-sides {
+  position: absolute;
+  width: var(--cube-size);
+  height: var(--cube-size);
+
+  text-decoration: underline;
+  text-underline-offset: 24px;
+}
+
+/* #front {
+} */
+/*
+#back {
+  background: var(--cube-color);
+}
+
+#right {
+  background: var(--cube-color);
+}
+
+#left {
+  background: var(--cube-color);
+}
+
+#top {
+  background: var(--cube-color);
+}
+
+#bottom {
+  background: var(--cube-color);
+} */
+
+#cube3d #front  {
+  transform: rotateY(0deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( 0deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #back {
+  transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+  -moz-transform: rotateX( 180deg ) translateZ( calc(var(--cube-size) / 2) ) rotateZ(180deg);
+}
+#cube3d #right  {
+  transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #left   {
+  transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateY( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+/* #cube3d #top    {
+  transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX(  90deg ) translateZ( calc(var(--cube-size) / 2) );
+}
+#cube3d #bottom {
+  transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+  -moz-transform: rotateX( -90deg ) translateZ( calc(var(--cube-size) / 2) );
+} */

src/lib/Cube3D.svelte

@@ -0,0 +1,155 @@
+<script lang="ts">
+    import planeImg from './images/PlaneGrid.png';
+    import cubeSideImg from './images/CubeTexture.png';
+
+    // Hyperparameters (fine to change)
+    let startPosAnim: number = 1200; // Starts at scroll value
+    let endPosAnim: number = 4000; // Ends at scroll value
+    let parallexOutPadding = 700;
+    let parallaxOutLength = 400; // How long the exit anim is
+
+
+
+    // Define, don't touch
+    let scrollPos: number = 0;
+    let cubeRotY: number = 0;
+    let cubeRotX: number = 0;
+
+    // Total length of animation
+    let totalAnimLength: number = endPosAnim - startPosAnim;
+
+    // Front side text after fully scrolled
+    let frontSideText: string[] = ["overlooked", "DEPRIVED"];
+
+    function updateUI(){
+        // Calculates the cube roation
+        let time = (scrollPos - startPosAnim)/totalAnimLength;
+        cubeRotY = lerp(0, 360, clamp(time, 0, 1), true);
+
+        // Start exit anim after main anim
+        time = (scrollPos - (endPosAnim + parallexOutPadding))/(parallaxOutLength + parallexOutPadding);
+        cubeRotX = lerp(0, 15, clamp(time, 0, 1), true);
+
+        // if rotated cube 180deg then change text
+        let frontSide = document.getElementById('front');
+        if (!!frontSide) // if not null
+        {
+            if (scrollPos - startPosAnim < totalAnimLength / 2){
+                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[1], frontSideText[0]);
+            }
+            else {
+                frontSide.innerHTML = frontSide.innerHTML.replace(frontSideText[0], frontSideText[1]);
+            }
+        }
+
+        // Hide plane3d if plane3d turned pass camera
+        let plane3d = document.getElementById('plane3D');
+        if (!!plane3d) // if not null
+        {
+            if (cubeRotX <= 10){
+                plane3d.classList.remove("hide");
+            }
+            else{
+                plane3d.classList.add("hide");
+            }
+        }
+    }
+
+    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
+        const lerped: number = from + (to - from) * time;
+        
+        if (clamped) {
+        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
+        }
+
+        return lerped;
+    }
+
+    function clamp(value: number, min: number, max: number): number {
+        return Math.min(Math.max(value, min), max);
+    }
+</script>
+
+<svelte:window bind:scrollY={scrollPos} on:scroll={updateUI}/>
+
+<style>
+  @import './Cube3D.css';
+
+    :root {
+        --cube-size: 400px;
+        --cube-color: rgba(125, 125, 125, 1);
+    }
+
+  #plane3D {
+    --plane-size: 2500px;
+
+    width: var(--plane-size);
+    height: var(--plane-size);
+
+    position: absolute;
+
+    transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    -moz-transform: 
+        rotateX( -90deg ) 
+        translateZ(calc(var(--plane-size) * -0.34))
+        translateX(calc(var(--plane-size) * -0.45));
+    }
+
+    .image {
+        transform: translateX(calc(var(--cube-size)*-0.5));
+    }
+
+    .text{
+        margin: 0;
+    }
+</style>
+
+<div id="cube-3d-container">
+    <div id="cube3d"style="transform: rotateY({cubeRotY}deg) rotateX({cubeRotX}deg);">
+        <div id="front" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                overlooked
+            </p>
+        </div>
+
+        <div id="back" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                constrained
+            </p>
+        </div>
+
+        <div id="right" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                drained
+            </p>
+        </div>
+
+        <div id="left" class="cube-sides">
+            <img src="{cubeSideImg}" class="image" style="width: 100%; position: absolute;" alt="cube side texture"/>
+            <p class="text" style="position: relative;">
+                underfunded
+            </p>
+        </div>
+
+        <!-- <div id="top" class="cube-sides">
+            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
+            5
+        </div>
+
+        <div id="bottom" class="cube-sides">
+            <img src="{cubeSideImg}" style="width: 100%;" alt="cube side texture"/>
+            6
+        </div> -->
+
+        
+
+        <img id="plane3D" src={planeImg} alt="3D ground plane"/>
+    </div>
+
+</div>

src/lib/ScrollTextComponent.svelte

@@ -66,20 +66,6 @@
         margin:auto;
         z-index: 0;
     }
-
-    .big-text {
-        font-size: 100px;
-        pointer-events: none;
-    }
-
-    .no-wrap {
-        text-wrap: nowrap;
-        white-space: nowrap;
-    }
-
-    .no-interact {
-        pointer-events: none;
-    }
 </style>
 
 <div style="height: 100vh;">

src/lib/WeAreText.svelte

@@ -0,0 +1,65 @@
+<script lang="ts">
+    import ZSpacer from "./Universal/ZSpacer.svelte";
+
+    // Hyperparams
+    let startExit = 4700;
+    let exitLength = 2000;
+    let exitScreenLength = 700;
+
+    // Define, don't touch
+    let scrollPos: number = 0;
+    let extraPosY = 0;
+    let rotation = 0;
+
+    $:{
+        let time = (scrollPos - startExit) / exitLength;
+        extraPosY = lerp(0, -exitScreenLength, time, true);
+        rotation = lerp(0, 50, time, true);
+    }
+
+    function lerp(from: number, to: number, time: number, clamped: boolean = false) : number {
+        const lerped: number = from + (to - from) * time;
+        
+        if (clamped) {
+        return from < to ? clamp(lerped, from, to) : clamp(lerped, to, from);
+        }
+
+        return lerped;
+    }
+
+    function clamp(value: number, min: number, max: number): number {
+        return Math.min(Math.max(value, min), max);
+    }
+</script>
+
+<svelte:window bind:scrollY={scrollPos} />
+
+<div class="horizontal">
+    <div id="WeAreHolder" style="margin-right: 45vw;">
+        <div style="transform: translate(0, {extraPosY}px) rotateX({rotation}deg);">    
+            <div class="no-wrap no-interact big-text align-center"
+            style="padding: -10px 10px 0px 10px;">
+                We are
+            </div>
+        </div>
+    </div>
+    <ZSpacer/>
+</div>
+
+<style>
+#WeAreHolder {
+    transition: transform 1s cubic-bezier(0,1.32,0,.92);
+    transform-style: preserve-3d;
+
+    perspective: 1000px;
+    -moz-perspective: 1000px;
+}
+
+#WeAreHolder div>div {
+    padding: 0px 30px -5px 30px;
+    /* border-radius: 40px; */
+    /* background: rgba(57, 57, 57, 0.201); */
+    /* border-bottom: 5px solid rgb(189, 189, 189); */
+
+}
+</style>