diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index 005928c963654fed391fee0ae57d14426a450fee..805946aaebf7e95e50a0a958af728a22387f8ff4 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -10,35 +10,6 @@ import { Controller, Scene } from 'react-scrollmagic'
 import { Tween, Timeline } from 'react-gsap'
 import styled from 'styled-components'
 
-const style = {
-  emphesis: css`
-    color: yellow;
-  `
-}
-
-const TweenStyled = styled.div`
-  .section {
-    height: 100vh;
-  }
-
-  .tween {
-    width: 100px;
-    height: 100px;
-    background-color: red;
-    margin: 0 !important;
-    position: relative;
-    left: calc(50% - 50px);
-  }
-
-  .stagger {
-    width: 50px;
-    height: 50px;
-    left: 700px;
-    background-color: green;
-    position: relative;
-  }
-`
-
 export const IndexPage = () => (
   <>
     <div className="stars"></div>
@@ -57,58 +28,47 @@ export const IndexPage = () => (
         </ul>
       </div>
     </div>
-    <div>
-      <TweenStyled>
-        <div id="trigger-comet" />
-        <Controller>
-          <Scene triggerElement="#trigger-comet" duration={1200} pin={false}>
-            {progress => (
-              <Tween
-                from={{
-                  css: {
-                    left: '-150px',
-                    top: '-35vh'
-                  }
-                }}
-                to={{
-                  css: {
-                    left: '120vw',
-                    top: '30vh'
-                  }
-                }}
-                totalProgress={progress}
-                paused
-              >
-                <div className="comet"></div>
-              </Tween>
-            )}
-          </Scene>
-        </Controller>
-      </TweenStyled>
-      <div className="nebula" />
-      <div className="textcard textcard-cloud">
-        <div className="textcard-content">
-          <h2>The Cloud</h2>
-          <p>
-            The cloud is a place of fluffiness with things of fluff and rain and rainbows.
-            Fluffiness is how soft something is, rocks arent fluffy, clouds are. So buy our product
-            and be fluffy!
-          </p>
+    <div id="trigger-comet" />
+    <Controller>
+      <Scene triggerElement="#trigger-comet" duration={1200} pin={false}>
+        {progress => (
+          <Tween
+            from={{
+              css: {
+                left: '-150px',
+                top: '-35vh'
+              }
+            }}
+            to={{
+              css: {
+                left: '120vw',
+                top: '30vh'
+              }
+            }}
+            totalProgress={progress}
+            paused
+          >
+            <div className="comet"></div>
+          </Tween>
+        )}
+      </Scene>
+      <Scene duration={4800} offset={250} pin>
+        <div className="cloud-section">
+          <div className="nebula" />
+          <div className="textcard textcard-cloud">
+            <div className="textcard-content">
+              <h2>The Cloud</h2>
+              <p>
+                The cloud is a place of fluffiness with things of fluff and rain and rainbows.
+                Fluffiness is how soft something is, rocks arent fluffy, clouds are. So buy our
+                product and be fluffy!
+              </p>
+            </div>
+          </div>
         </div>
-      </div>
-      <div id="animation-end"></div>
-    </div>
-    {/* <div>
-        <h2>Hi people</h2>
-        <p>Welcome to your new Gatsby site.</p>
-        <p>Now go build something great.</p>
-        <p>
-        <Link to="/another-page/">Go to another page</Link>
-        </p>
-        <p>
-        <Link to="/all/">See content generated from Markdown files</Link>
-        </p>
-        </div> */}
+      </Scene>
+    </Controller>
+    <div id="animation-end"></div>
   </>
 )
 
diff --git a/src/styles/scroll-animate.scss b/src/styles/scroll-animate.scss
index 2304b0ac6aaefd1efa7b854a2e726c1b71a42228..b60001f4b0e4fefc80f02642b0d13948ef2e80b4 100644
--- a/src/styles/scroll-animate.scss
+++ b/src/styles/scroll-animate.scss
@@ -39,3 +39,7 @@
 #animation-end {
     margin-top: 10000px;
 }
+
+.cloud-section {
+    height: 100vh;
+}