animations / about section

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 .nuxt/
 pages/test.vue
+.output/

components/home-page/Header.vue

@@ -33,8 +33,8 @@
       </defs>
     </svg>
 
-    <!-- <svg
+    <svg
-      class="arrow absolute h-[4.167vw] w-[4.167vw] rotate-180 lg:!top-[34vw]"
+      class="arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
       viewBox="0 0 80 80"
       fill="none"
       xmlns="http://www.w3.org/2000/svg"
@@ -48,7 +48,7 @@
         d="M44.167 33.3125V46.7083C44.167 47.5208 45.042 48.0208 45.7295 47.6042L48.0212 46.2708C54.0003 42.8333 54.0003 37.1667 48.0212 33.7292L45.7295 32.3958C45.042 32 44.167 32.5 44.167 33.3125Z"
         fill="#383E43"
       />
-    </svg> -->
+    </svg>
 
     <h1
       class="text-[7.277vw] lg:text-[3.718vw] font-[700] mt-[100px] lg:mt-[120px] lg:mt-[9.115vw]"
@@ -87,18 +87,34 @@ onMounted(() => {
         start: "center center",
         end: "+=5000",
       },
-      rotation: 500,
+      rotation: -800,
       duration: 3,
       ease: "none",
-    }),
+    });
     gsap.to(".animate #motion", {
-        strokeDashoffset: -300,
+      strokeDashoffset: 300,
       repeat: -1,
       ease: "none",
       duration: 5,
-      })
+    });
-
+    gsap.to(".arrow", {
+      strokeDashoffset: 300,
+    x: 700,
+     y: -130,
+     rotation: -90,
+      scrollTrigger: {
+        trigger: ".transform-bubbles",
+        scrub: 1,
+        start: "center center",
+        end: "+=5000",
+      },
+      //  motionPath: {
+      //   path: "#pathes",
+      //   align: "#pathes",
+      //   alignOrigin: [0.5, 0.5],
+      //   autoRotate: 180,
+      // },
+    });
   });
 });
-
 </script>

components/home-page/Slider.vue

@@ -22,8 +22,6 @@
       <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
     </p>
 
-
-
     <div class="absolute">
       <div
         ref="start"
@@ -46,6 +44,7 @@
             stroke-dasharray="8 8"
           />
         </svg>
+ 
         <svg
           class="big absolute"
           width="75.365vw"
@@ -54,6 +53,8 @@
           fill="none"
           xmlns="http://www.w3.org/2000/svg"
         >
+
+          
           <circle
             cx="723.5"
             cy="723.5"
@@ -62,6 +63,12 @@
             stroke-width="2"
             stroke-dasharray="8 8"
           />
+          <!-- <svg
+          class=" !absolute !mt-[74.5vw] !me-[10vw] rotate-[-12deg]"
+          width="61" height="60" viewBox="0 0 61 60" fill="none" xmlns="http://www.w3.org/2000/svg">
+            <path d="M45.9902 36.675L45.9902 23.325C45.9902 15.025 40.1115 11.65 32.9319 15.775L29.7298 17.625C28.9543 18.075 28.479 18.9 28.479 19.8L28.479 40.2C28.479 41.1 28.9543 41.925 29.7298 42.375L32.9319 44.225C40.1115 48.35 45.9902 44.975 45.9902 36.675Z" fill="#383E43"/>
+            <path d="M25.9775 38.025L25.9775 21.95C25.9775 20.975 24.9269 20.375 24.1013 20.875L21.3496 22.475C14.17 26.6 14.17 33.4 21.3496 37.525L24.1013 39.125C24.9269 39.6 25.9775 39 25.9775 38.025Z" fill="#383E43"/>
+            </svg> -->
         </svg>
       </div>
     </div>

package.json

@@ -3,8 +3,9 @@
   "private": true,
   "type": "module",
   "scripts": {
-    "build": "nuxt build",
     "dev": "nuxt dev",
+    "build": "nuxt build",
+    "start": "node .output/server/index.mjs",
     "generate": "nuxt generate",
     "preview": "nuxt preview",
     "postinstall": "nuxt prepare"

pages/index.vue

@@ -1,4 +1,5 @@
 <template>
+  <client-only>
     <home-pageHeader />
     <home-pageAboutUs />
     <home-pageSlider />
@@ -7,5 +8,7 @@
     <home-pageProductSampleForm />
     <home-pageMediaSlider />
     <home-pageInstagram />
+
+  </client-only>
 </template>
 

pages/test.vue

@@ -1,256 +1,160 @@
 <template>
-  <div ref="main" class="scroller relative h-[1000px]">
+  <div class="description blue">
-    <section class="orange">
+    <div>
-      <div class="text">This is some text inside of a div block.</div>
+      <h1>Side by Side Layered pinning</h1>
+      <p>Use pinning to layer panels on top of each other as you scroll.</p>
+      <div class="scroll-down">
+        Scroll down
+        <div class="arrow"></div>
+      </div>
+    </div>
+  </div>
+
+  <div class="sections">
+    <div class="container-page">
+      <div class="contento">
+        <h2>This is random content</h2>
+      </div>
+      <div class="contento">
+        <h2>This is another content</h2>
+      </div>
+    </div>
+    <div class="panels">
+      <section class="panel red">ONE</section>
+      <section class="panel orange">TWO</section>
+      <section class="panel purple">THREE</section>
+      <section class="panel green">FOUR</section>
+    </div>
+  </div>
+
+  <section class="spacer">
+    <h1>The End!</h1>
+    <h1>Happy Tweening!</h1>
   </section>
 
-    <section class="black">
+  <header>
-      <div class="text-wrap">
+    <a href="https://greensock.com/scrolltrigger">
-        <div class="panel-text blue-text">Blue</div>
+      <img
-        <div class="panel-text red-text">Red</div>
+        class="greensock-icon"
-        <div class="panel-text orange-text">Orange</div>
+        src="https://s3-us-west-2.amazonaws.com/s.cdpn.io/16327/scroll-trigger-logo-light.svg"
-        <div class="panel-text purple-text">Purple</div>
+        width="200"
-      </div>
+        height="64"
-
+      />
-      <div class="p-wrap">
+    </a>
-        <div class="panel blue"></div>
+  </header>
-        <div class="panel red"></div>
-        <div class="panel orange"></div>
-        <div class="panel purple"></div>
-      </div>
-    </section>
-
-    <section class="blue"></section>
-  </div>
 </template>
 
 <script setup>
-import { onMounted, onUnmounted, ref } from "vue";
+// import { onMounted, onUnmounted, ref } from "vue";
 import gsap from "gsap";
 import { ScrollTrigger } from "gsap/ScrollTrigger";
-import {Scrollbar} from "gsap/Scrollbar"
+//  import {Scrollbar} from "gsap/Scrollbar"
-import { MotionPathPlugin } from "gsap/MotionPathPlugin";
+// import { MotionPathPlugin } from "gsap/MotionPathPlugin";
-gsap.registerPlugin(ScrollTrigger, Scrollbar);
+gsap.registerPlugin(ScrollTrigger);
 
-const main = ref();
+// const main = ref();
-let ctx;
+// let ctx;
 
 onMounted(() => {
-
+  console.clear();
-        let bodyScrollBar = Scrollbar.init(document.body, {
+  const panels = gsap.utils.toArray(".panel");
-          damping: 0.1,
+  console.log("panels :", panels);
-          delegateTo: document,
+  gsap.set(panels, {
+    yPercent: (i) => (i ? 100 : 0),
   });
   
- 
+const tl = gsap.timeline({
-  ScrollTrigger.scrollerProxy(".scroller", {
-    scrollTop(value) {
-      if (arguments.length) {
-        bodyScrollBar.scrollTop = value;
-      }
-      return bodyScrollBar.scrollTop;
-    },
-  });
-  bodyScrollBar.addListener(ScrollTrigger.update);
-
-  gsap.set(".panel", { zIndex: (i, target, targets) => targets.length - i });
-
-  var images = gsap.utils.toArray(".panel:not(.purple)");
-
-  images.forEach((image, i) => {
-    var tl = gsap.timeline({
   scrollTrigger: {
-        trigger: "section.black",
+    trigger: ".sections",
-        scroller: ".scroller",
+    start: "top top",
-        start: () => "top -" + window.innerHeight * (i + 0.5),
+    end: () => "+=" + 100 * panels.length + "%",
-        end: () => "+=" + window.innerHeight,
-        scrub: true,
-        toggleActions: "play none reverse none",
-        invalidateOnRefresh: true,
-      },
-    });
-
-    tl.to(image, { height: 0 });
-  });
-
-  gsap.set(".panel-text", {
-    zIndex: (i, target, targets) => targets.length - i,
-  });
-
-  var texts = gsap.utils.toArray(".panel-text");
-
-  texts.forEach((text, i) => {
-    var tl = gsap.timeline({
-      scrollTrigger: {
-        trigger: "section.black",
-        scroller: ".scroller",
-        start: () => "top -" + window.innerHeight * i,
-        end: () => "+=" + window.innerHeight,
-        scrub: true,
-        toggleActions: "play none reverse none",
-        invalidateOnRefresh: true,
-      },
-    });
-
-    tl.to(text, { duration: 0.33, opacity: 1, y: "50%" }).to(
-      text,
-      { duration: 0.33, opacity: 0, y: "0%" },
-      0.66
-    );
-  });
-
-  ScrollTrigger.create({
-    trigger: "section.black",
-    scroller: ".scroller",
-    scrub: true,
-    markers: true,
     pin: true,
-    start: () => "top top",
+    scrub: 1,
-    end: () => "+=" + (images.length + 1) * window.innerHeight,
+    markers: true
-    invalidateOnRefresh: true,
+  }
 });
+
+panels.forEach((panel, index) => {
+  if (index) {
+    tl.to(
+      panel,
+      {
+        yPercent: 0,
+        ease: "none"
+      },
+      "+=0.25"
+    );
+  }
+});
+
 });
 </script>
 
 <style scoped>
-body,
+.sections {
-html {
+    width: 100%;
-  margin: 0;
+    position: relative;
-}
+    height: 90vh;
-.scroller {
-  height: 100vh;
-}
-
-.orange {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
     display: flex;
+  }
+  .panels {
+    width: 50%;
+    /*   height: 100vh; */
+    background: lime;
+ 
+    position: relative;
+
+  }
+  .container-page {
+    width: 50%;
+    background-color: purple;
+  }
+  .container-page h2 {
+    font-size: 30px;
+  }
+  .panel {
     height: 100vh;
-  -webkit-box-pack: center;
+    width: 100%;
-  -webkit-justify-content: center;
+    margin-bottom: 100px !important;
-  -ms-flex-pack: center;
+    margin-left: auto;
-  justify-content: center;
+    display: flex !important;
-  -webkit-box-align: center;
+    justify-content: center !important;
-  -webkit-align-items: center;
+    align-items: center !important;
-  -ms-flex-align: center;
+    position: absolute;
-  align-items: center;
+    top: 0;
-  background-color: #753500;
+    left: 0;
   }
   
-.text {
+  .description {
-  color: #fff;
-}
-
-.black {
-  display: -webkit-box;
-  display: -webkit-flex;
-  display: -ms-flexbox;
-  display: flex;
     height: 100vh;
-  -webkit-justify-content: space-around;
-  -ms-flex-pack: distribute;
-  justify-content: space-around;
-  -webkit-box-align: center;
-  -webkit-align-items: center;
-  -ms-flex-align: center;
-  align-items: center;
-  background-color: #070707;
   }
   
   .blue {
-  height: 100vh;
+    background-color: blue;
-  background-color: #00026d;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: white;
   }
   
-.text-wrap {
+  .blue h1 {
-  position: relative;
+    margin: 0 0 1rem 0;
-  overflow: hidden;
-  width: 450px;
-  height: 80vh;
-}
-
-.panel-text {
-  position: absolute;
-  left: 0%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  z-index: 1;
-  width: 100%;
-  height: 100%;
-  font-size: 40px;
-  text-transform: uppercase;
-  font-weight: 900;
     text-align: center;
-  background-color: #070707;
-
-  transform: translateY(100%);
-  opacity: 0;
   }
   
-.panel-text.blue-text {
+  .green {
-  color: blue;
+    height: 100vh;
   }
 
-.panel-text.red-text {
+  section.spacer {
-  color: red;
-}
-
-.panel-text.purple-text {
-  color: purple;
-}
-
-.panel-text.orange-text {
-  color: orange;
-}
-
-.p-wrap {
-  position: relative;
-  overflow: hidden;
-  width: 450px;
-  height: 80vh;
-}
-
-.panel {
-  position: absolute;
-  left: 0%;
-  top: 0%;
-  right: 0%;
-  bottom: 0%;
-  z-index: 1;
     width: 100%;
-  height: 100%;
+    height: 100vh;
-  background-image: url("../images/5ed12171d9d512cb2feead83_5.jpg");
+    background: #333;
-  background-position: 50% 50%;
+    display: flex;
-  background-size: cover;
+    flex-direction: column;
-  background-repeat: no-repeat;
+    justify-content: center;
+    align-items: center;
+    color: white;
   }
   
-.panel._2 {
-  z-index: 1;
-  background-image: url("../images/5f5a5b3515c4dd0c2c455925_110642301_938622823267359_7859124022958180678_n201.jpg");
-}
-
-.panel.blue {
-  z-index: auto;
-}
-
-.panel.red {
-  z-index: auto;
-  background-color: red;
-  background-image: none;
-}
-
-.panel.orange {
-  z-index: auto;
-  background-color: #cf5d00;
-  background-image: none;
-}
-
-.panel.purple {
-  z-index: auto;
-  background-color: #808;
-  background-image: none;
-}
 </style>