recriação total da animação + extras

Author: 1Matzh

css/animation.css

@@ -1,56 +1,111 @@
-canvas {
-    width: 100vw;
-    height: 100vh;
-    object-fit: cover;
+@import './global.css';
+
+/* ------------  SECTION STYLING ------------  */
+.section-anim {
+    width: 100%;
+    min-height: 100vh;
+    background: var(--bg-primary);
+    color: var(--txt-primary);
 }
 
-.anim-text {
-    position: fixed;
-    z-index: 2;
-    color: white;
+/* ------------ SCROLL SECTIONS ------------ */
+.scroll-section {
+    width: 100%;
+    height: calc(100vh - 44px);
+    position: relative;
+    overflow: hidden;
+}
+
+/* Canvas Element */
+.canvas-elem {
     width: 100%;
-    bottom: 40%;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    z-index: 1;
 }
 
-.anim-title,
-.anim-desc,
-.anim-btn {
+/* Main & Message Element Positioning */
+.msg-elem {
+  width: max-content;
+  position: absolute;
+  top: 44%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  text-align: center;
+  z-index: 5;
+}
+.msg-elem {
+  transform: translate(-50%, 0%);
+  opacity: 0;
+}
+
+/* SECTION */
+.section-anim .canvas-elem canvas {
+    width: 100%;
+}
+
+/* ------------  LAYOUT STYLING ------------  */
+
+/* Message Element */
+.msg-elem h2, h3, button {
     text-align: center;
-    
+    color: white;
 }
 
-.anim-title {
+.msg-elem h2 {
     font-size: 70px;
     letter-spacing: 10.5px;
     font-weight: 700;
+    font-family: 'Orbitron';
 }
 
-.anim-desc {
+.msg-elem h3 {
     font-size: 24px;
     font-weight: 400;
+    line-height: 34px;
+    font-style: normal;
+    font-family: 'Inter';
 }
 
-.anim-btn {
+/* Button Element */
+.msg-elem button {
+    font-family: 'Orbitron';
     cursor: pointer;
     position: absolute;
     font-size: 16px;
     font-weight: 700;
     margin-top: 30px;
-    left: 50%;
     transform: translateX(-50%);
+    align-content: center;
     background-color: transparent;
-    border: 2px solid white;;
+    border: 2px solid white;
+    transition: all 0.5s;
+}
+
+.msg-elem button:hover {
+    transform: translateX(-50%) scale(1.1);
+    color: black;
 }
 
-@media screen and (max-width: 1024px) {
-    .anim-text {
-        font-size: 2rem;
-        right: 50%;
-        bottom: 25%;
-        transform: translate(50%, 50%);
-    }
+/* Button Animation */
+.msg-elem button::before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    background-color: white;
+    z-index: -1;
+    transform-origin: bottom;
+    transition-timing-function: cubic-bezier(0.5, 1.6, 0.4, 0.7);
+    transform: scaleY(0);
+    transition: all 0.5s;
+}
+
+.msg-elem button:hover::before {
+    transform: scaleY(1);
+}
 
-    h1 {
-        font-size: 2rem;
-    }
-}

index.html

@@ -48,7 +48,8 @@ <h1 class="hero-title">
                             _Explore novos horizontes!
                         </h1>
 
-                        <p class="hero-description">Bem-vindo à revolução das viagens interplanetárias! A revolução das viagens interplanetárias!
+                        <p class="hero-description">Bem-vindo à revolução das viagens interplanetárias! A revolução das
+                            viagens interplanetárias!
                         </p>
                     </hgroup>
                     <button class="outline-button">VOE AO ESPAÇO</button>
@@ -97,13 +98,15 @@ <h1 class="hero-title">
                 </div>
             </div>
         </section>
-        <section class="anim-section">
-            <div class="anim-text">
-                <h2 class="anim-title">_UMA EXPERIÊNCIA</h2>
-                <h3 class="anim-desc">Bem-vindo à revolução das viagens interplanetárias! A revolução das viagens interplanetárias!</h3>
-                <button class="anim-btn">VOE AO ESPAÇO</button>
+        <section class="section-anim scroll-section spaceship">
+            <div class="msg-elem">
+                <h2>_UMA EXPERIÊNCIA</h2>
+                <h3>Bem-vindo à revolução das viagens interplanetárias! A revolução das viagens interplanetárias!</h3>
+                <button>VOE AO ESPAÇO</button>
+            </div>
+            <div class="canvas-elem">
+                <canvas id="spaceship"></canvas>
             </div>
-            <canvas class="canvas"></canvas>
         </section>
 
         <section id="introduction-section">
@@ -132,14 +135,15 @@ <h1 class="title-introduction-section">Reserve Sua Viagem Espacial Agora!</h1>
                 <article>
                     <hgroup>
                         <h1>Sobre Nós</h1>
-                        <p class="intro-font">Somos a <span>Orbit Trips</span>, apaixonados pela exploração espacial. </p> 
+                        <p class="intro-font">Somos a <span>Orbit Trips</span>, apaixonados pela exploração espacial.
+                        </p>
                     </hgroup>
                     <hr>
                     <p>Nossa missão é tornar o
                         espaço acessível a todos. <wbr />Com tecnologia de ponta e segurança de primeira linha, oferecemos
                         aventuras inesquecíveis. Junte-se a nós na jornada estelar.
                     </p>
-                    </article>
+                </article>
             </div>
             <div class="img">
                 <img src="./imgs/rocket_01.png" alt="Imagem de um foguete">
@@ -170,7 +174,7 @@ <h3>Pacote de viagem: <span>"Aventura na Lua"</span></h3>
                                 </ul>
                             </div>
                             <div class="description">
-                               
+
                                 <p>Explore a maravilha lunar como nunca antes! Nosso pacote "Aventura na Lua" oferece
                                     uma experiência incomparável, com passeios emocionantes pela superfície lunar,
                                     vistas deslumbrantes da Terra e a oportunidade de deixar sua pegada na história.
@@ -204,7 +208,7 @@ <h3>Pacote de viagem: <span>"Sistema Solar"</span></h3>
                                 </ul>
                             </div>
                             <div class="description">
-                               
+
                                 <p>Prepare-se para a aventura mais épica da sua vida com nosso pacote "Além do Sistema
                                     Solar". Explore os mundos distantes do sistema solar, incluindo planetas, luas e
                                     asteroides. Esta é a viagem que todos os verdadeiros exploradores espaciais sonham
@@ -238,7 +242,7 @@ <h3>Pacote de viagem: <span>"Órbita Estelar"</span></h3>
                                 </ul>
                             </div>
                             <div class="description">
-                               
+
                                 <p>Desafie a gravidade e entre em órbita terrestre com nosso pacote "Órbita Estelar".
                                     Experimente vistas panorâmicas incomparáveis da Terra, flutue livremente no espaço e
                                     testemunhe o nascer e o pôr do sol a cada 90 minutos. Esta é uma jornada única que o
@@ -263,7 +267,7 @@ <h2 class="title-rocket">O Foguete <span>Infinity Soarer</span></h2>
                 <div class="wrapper-dedscription-rocket">
                     <p class="description-rocket">Nossas Viagens Espaciais são impulsionadas por tecnologia de ponta e
                         inovação, e nosso foguete reutilizável é a peça central de nossas incríveis aventuras.</p>
-                        <hr>
+                    <hr>
                     <p class="description-rocket">Projetado para levar você ao espaço com segurança e eficiência, nosso
                         foguete representa o futuro da exploração espacial.</p>
                 </div>
@@ -339,17 +343,18 @@ <h3>Se inscreva</h3>
     </script>
 
 
-    <!-- GSAP -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"
-        integrity="sha512-VEBjfxWUOyzl0bAwh4gdLEaQyDYPvLrZql3pw1ifgb6fhEvZl9iDDehwHZ+dsMzA0Jfww8Xt7COSZuJ/slxc4Q=="
-        crossorigin="anonymous" referrerpolicy="no-referrer">
-        </script>
-    <!-- ScrollTrigger -->
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/ScrollTrigger.min.js"
-        integrity="sha512-v8B8T8l8JiiJRGomPd2k+bPS98RWBLGChFMJbK1hmHiDHYq0EjdQl20LyWeIs+MGRLTWBycJGEGAjKkEtd7w5Q=="
-        crossorigin="anonymous" referrerpolicy="no-referrer">
-        </script>
-    <script src="./js/animateOnScroll.js"></script>
+    <!-- GSAP CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.10.4/gsap.min.js"></script>
+
+
+    <!-- ScrollMagic CDN -->
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.min.js"></script>
+    </script>
+
+
+    <!-- JS Files -->
     <script src="./js/app.js"></script>
 </body>
 

js/app.js

@@ -1,61 +1,69 @@
-const canvas = document.querySelector(".canvas");
-canvas.width = window.innerWidth;
-canvas.height = window.innerHeight;
+const section2 = document.querySelector(".section-anim");
+const msgText = section2.querySelector(".msg-elem");
+
+const canvas2 = document.getElementById("spaceship");
+const context2 = canvas2.getContext("2d");
 document.documentElement.style.overflowX = 'hidden';
+canvas2.width = 1458;
+canvas2.height = 820;
 
-const context = canvas.getContext("2d");
-const frameCount = 158;
+/* ScrollMagic Controller */
+let controller = new ScrollMagic.Controller();
 
-const currentFrame = (index) => `./img/spaceship-frames/spaceship_anim_${index.toString().padStart(3, "0")}.jpg`;
+const images2 = [];
+const headturn = {
+  frame: 0,
+};
+const frameCount2 = 158;
 
-const images = [];
-let ball = { frame: 0 };
+// Populating images
+const currentFrame2 = (index) => `./img/spaceship-frames/spaceship_anim_${index.toString().padStart(3, "0")}.jpg`;
 
-for (let i = 0; i < frameCount; i++) {
+for (let i = 0; i < frameCount2; i++) {
   const img = new Image();
-  img.src = currentFrame(i);
-  console.log(currentFrame(i));
-  images.push(img);
+  img.src = currentFrame2(i);
+  images2.push(img);
 }
 
-gsap.to(ball, {
-  frame: frameCount - 1,
-  snap: "frame",
-  ease: "none",
-  scrollTrigger: {
-    scrub: 0.5,
-    pin: "canvas",
-    end: "500%",
-  },
-  onUpdate: render,
-});
-
-gsap.fromTo(
-  ".anim-text",
-  {
-    opacity: 0,
-  },
-  {
-    opacity: 1,
-    scrollTrigger: {
-      scrub: 1,
-
-      start: "30%",
-      end: "0.0001%",
-    },
-    
-    onComplete: () => {
-      gsap.to(".anim-text", { opacity: 0 });
+// GSAP Timeline #2
+let tl2 = gsap.timeline();
+tl2
+  .add("start0")
+
+  /* Main Text Animation */
+  .to(msgText, { delay: 1, duration: 3.5, opacity: 1}, "start0")
+  .to(msgText, { duration: 3.5, opacity: 0})
+
+  /* BG 'Image Change' Animation */
+  .to(
+    headturn,
+    {
+      duration: 9,
+      frame: frameCount2 - 1,
+      snap: "frame",
+      ease: "none",
+      onUpdate: render2,
     },
-  }
-);
+    "start0"
+  );
 
-images[0].onload = render;
+// ScrollMagic Scene #2
+let scene2 = new ScrollMagic.Scene({
+  triggerElement: ".section-anim",
+  duration: "4000",
+  triggerHook: 0,
+  //   offset: "100",
+})
+  .setTween(tl2)
+  .setPin(".section-anim")
+  .addTo(controller);
 
-function render() {
-  context.canvas.width = images[0].width;
-  context.canvas.height = images[0].height;
+// Initial image loading
+images2[0].onload = render2;
 
-  context.clearRect(0, 0, canvas.width, canvas.height);
-  context.drawImage(images[ball.frame], 0, 0);
+// Rendering image on canvas
+function render2() {
+  context2.clearRect(0, 0, canvas2.width, canvas2.height);
+  context2.drawImage(images2[headturn.frame], 0, 0);
 }
+