created animation for the box-contents

Moshe-jpg · Sep 26, 2023 · 8b0006e · 8b0006e
1 parent 9cfa98b
commit 8b0006e
Show file tree

Hide file tree

Showing 7 changed files with 200 additions and 101 deletions.
diff --git a/dist/assets/index-10b89392.css → dist/assets/index-91e5d634.css b/dist/assets/index-10b89392.css → dist/assets/index-91e5d634.css
diff --git a/dist/assets/index-306cfb0a.js → dist/assets/index-e93ca72b.js b/dist/assets/index-306cfb0a.js → dist/assets/index-e93ca72b.js
diff --git a/dist/index.html b/dist/index.html
@@ -6,8 +6,8 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <meta name="iPhone 15 Pro Landing Page" content="Website similar to Apple iPhone 15 Pro’s landing page which is built using React.js, WebGi, Three.js, GSAP ScrollTrigger." />
     <title>iPhone 15 Pro</title>
-    <script type="module" crossorigin src="/iphone-15/assets/index-306cfb0a.js"></script>
-    <link rel="stylesheet" href="/iphone-15/assets/index-10b89392.css">
+    <script type="module" crossorigin src="/iphone-15/assets/index-e93ca72b.js"></script>
+    <link rel="stylesheet" href="/iphone-15/assets/index-91e5d634.css">
   </head>
   <body>
     <div id="root"></div>

diff --git a/src/App.css b/src/App.css
@@ -534,9 +534,14 @@ nav .link-styled {
   font-size: 26px;
 }
 
+.specs-container .content h3 p {
+  font-weight: normal;
+}
+
 .specs-container .content span {
   color: var(--blue);
   font-size: 36px;
+  font-weight: 600;
 }
 
 .specs-container .img-container {
@@ -679,6 +684,7 @@ nav .link-styled {
 
 .box-contents-container {
   width: 100%;
+  min-height: 80vh;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -687,6 +693,19 @@ nav .link-styled {
   color: var(--black);
 }
 
+/* animation */
+
+.box-contents-container .contents-container {
+  overflow: hidden;
+}
+
+/* @media screen and (min-width:999.1px){
+  .box-contents-container .contents-container img {
+    transform: translateY(-110%);
+    transition: transform 1.5s ease-in-out;
+  }
+} */
+
 
 .box-contents-container h4 {
   color: var(--black);
@@ -702,6 +721,7 @@ nav .link-styled {
   justify-content: center;
   flex-direction: column;
   width: 350px;
+  min-height: 450px;
   margin-bottom: 50px;
 }
 .box-contents-container .contents-container img {

diff --git a/src/components/BuyIphone.jsx b/src/components/BuyIphone.jsx
@@ -1,4 +1,5 @@
 import React, { Component } from "react";
+import boxContentsAnimation from "../lib/box-contents-animation";
 import naturalTitanium from "../assets/images/natural-titanium.png";
 import whiteTitanium from "../assets/images/white-titanium.png";
 import blackTitanium from "../assets/images/black-titanium.png";
@@ -33,12 +34,18 @@ class BuyIphone extends Component {
     this.state = {
       selectedColor: this.colors[0], // Default to the first color
     };
+
+    this.boxContentsRef = React.createRef();
   }
 
   handleColorClick(color) {
     this.setState({ selectedColor: color });
   }
 
+  componentDidMount() {
+    boxContentsAnimation();
+  }
+
   render() {
     return (
       <div className="buy-iphone">
@@ -79,21 +86,22 @@ class BuyIphone extends Component {
             <button className="buying-options-btn">
               <header>Finance</header>
               <p>
-                $44.12/mo.per month for 24 mo. monthsafter trade-in *<br></br><br></br>
+                $44.12/mo.per month for 24 mo. monthsafter trade-in *<br></br>
+                <br></br>
                 From $21.77/mo.per month over 36 mo.months after trade-in with
                 select carrier deals
               </p>
               <footer>Pay over time at 0% APR.</footer>
             </button>
           </div>
         </div>
-        <div className="box-contents-container">
+        <div className="box-contents-container" ref={this.boxContentsRef}>
           <h4>What's in the Box?</h4>
-          <div className="contents-container">
+          <div className="contents-container container-1">
             <img src={boxIphone} alt="iPhone 15 Pro"></img>
             <p>iPhone 15 Pro</p>
           </div>
-          <div className="contents-container">
+          <div className="contents-container container-2">
             <img src={boxCharger} alt="USB-C Charger Cable"></img>
             <p>USB-C Charge Cable</p>
           </div>

diff --git a/src/lib/box-contents-animation.js b/src/lib/box-contents-animation.js
@@ -0,0 +1,72 @@
+import gsap from "gsap";
+import { ScrollTrigger } from "gsap/all";
+// import VanillaTilt from "vanilla-tilt";
+
+const boxContentsAnimation = () => {
+  gsap.registerPlugin(ScrollTrigger);
+
+  let mm = gsap.matchMedia();
+
+  const boxContent = gsap.utils.toArray(
+    ".box-contents-container .contents-container"
+  );
+
+  mm.add("(min-width: 999.1px)", () => {
+    boxContent.forEach((content) => {
+      const boxImg = gsap.utils.toArray(content.querySelector("img"));
+
+      boxImg.forEach((img) => {
+        gsap.set(img, {
+          y: "-150%",
+          transition: "transform 1.5s ease-in-out",
+        });
+
+        gsap.to(img, {
+          y: 0,
+          scrollTrigger: {
+            trigger: img,
+            start: "top 85%",
+            scrub: true,
+          },
+        });
+      });
+    });
+  });
+
+  mm.add("(max-width: 999px)", () => {
+    const boxImg1 = document.querySelector(
+      ".box-contents-container .contents-container img[alt='iPhone 15 Pro']"
+    );
+    const boxImg2 = document.querySelector(
+      ".box-contents-container .contents-container img[alt='USB-C Charger Cable']"
+    );
+
+    gsap.set(boxImg1, { x: "-150%", autoAlpha: 0 });
+    gsap.set(boxImg2, { x: "150%", autoAlpha: 0 });
+
+    gsap.to(boxImg1, {
+      x: 0,
+      autoAlpha: 1,
+      duration: 1.5,
+      scrollTrigger: {
+        trigger: boxImg1,
+        start: "top 90%",
+        end: "top 75%",
+        once: true,
+      },
+    });
+    gsap.to(boxImg2, {
+      x: 0,
+      autoAlpha: 1,
+      duration: 1.5,
+      scrollTrigger: {
+        trigger: boxImg2,
+        start: "top 90%",
+        end: "top 75%",
+        once: true,
+      },
+    });
+  });
+};
+
+export default boxContentsAnimation;
diff --git a/src/lib/specs-animation.js b/src/lib/specs-animation.js
@@ -13,11 +13,10 @@ const specsAnimation = () => {
 
   mm.add("(min-width: 999.1px)", () => {
     imgElems.forEach((img) => {
-      gsap.set(img, { autoAlpha: 0, clipPath: "circle(0% at 50% 50%)" });
+      gsap.set(img, { clipPath: "circle(0% at 50% 50%)" });
       gsap.to(img, {
-        autoAlpha: 1,
-        duration: 2,
         clipPath: "circle(100% at 50% 50%)",
+        duration: 1.5,
         scrollTrigger: {
           trigger: img,
           start: "top 85%",