animations / add GSAP package

2024-05-04 19:55:34 +03:30
parent 10a012ec8e
commit 839a085e55
8 changed files with 606 additions and 96 deletions
@@ -1,26 +1,156 @@
 <template>
-  <div class="-z-[1] relative mt-[140vw] lg:mt-[50vw] flex flex-col items-center justify-center">
-   <div class="relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center">
-       <svg class="absolute" width="48.125vw" height="48.125vw" viewBox="0 0 924 924" fill="none" xmlns="http://www.w3.org/2000/svg">
-           <circle cx="462" cy="462" r="461" stroke="#878787" stroke-width="2" stroke-dasharray="8 8"/>
-           </svg>
-           <svg class="absolute" width="75.365vw" height="75.365vw" viewBox="0 0 1447 1447" fill="none" xmlns="http://www.w3.org/2000/svg">
-               <circle cx="723.5" cy="723.5" r="722.5" stroke="#878787" stroke-width="2" stroke-dasharray="8 8"/>
-               </svg>
+  <div
+    ref="main"
+    id="flipSection"
+    class="-z-[1] relative mt-[100vw] lg:mt-[50vw] flex flex-col items-center justify-center"
+  >
+    <img
+      src="/public/images/assal.png"
+      alt="product-name"
+      class="z-[10] ax w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
+    />
+    <h1
+      class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]"
+    >
+      عسل آقای عسل
+    </h1>
+    <p
+      class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold"
+      dir="rtl"
+    >
+      510,000
+      <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
+    </p>

-        
-               
-       <img
-         src="/public/images/assal.png"
-         alt="product-name"
-         class="w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
-       />
-       <h1 class="font-bold text-[4.038vw] lg:text-[2.21vw] text-[#383E43] my-[2.083vw]">عسل آقای عسل</h1>
-       <p class="text-[3.59vw] lg:text-[1.823vw] text-[#383E43] font-semibold" dir="rtl">
-           510,000
-           <span class="text-[2.836vw] lg:text-[0.833vw] font-[400]">تومان</span>
-       </p>

-   </div>
+
+    <div class="absolute">
+      <div
+        ref="start"
+        class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
+      >
+        <svg
+          class="small absolute"
+          width="40.125vw"
+          height="40.125vw"
+          viewBox="0 0 924 924"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="462"
+            cy="462"
+            r="461"
+            stroke="#878787"
+            stroke-width="2"
+            stroke-dasharray="8 8"
+          />
+        </svg>
+        <svg
+          class="big absolute"
+          width="75.365vw"
+          height="75.365vw"
+          viewBox="0 0 1447 1447"
+          fill="none"
+          xmlns="http://www.w3.org/2000/svg"
+        >
+          <circle
+            cx="723.5"
+            cy="723.5"
+            r="722.5"
+            stroke="#878787"
+            stroke-width="2"
+            stroke-dasharray="8 8"
+          />
+        </svg>
+      </div>
+    </div>
  </div>
-</template>
+</template>
+
+
+
+<script setup>
+// test
+import { ScrollTrigger } from "gsap/ScrollTrigger";
+import { Flip } from "gsap/Flip";
+gsap.registerPlugin(ScrollTrigger, Flip);
+import gsap from "gsap";
+const main = ref();
+const start = ref();
+const end = ref();
+let ctx;
+onMounted(() => {
+  const anim = gsap.fromTo(
+    ".ax",
+    { autoAlpha: 0, y: 50 },
+    { duration: 1, autoAlpha: 1, y: 0 }
+  );
+  ScrollTrigger.create({
+    trigger: ".ax",
+    animation: anim,
+    repeat: -1,
+    scrub: true,
+    toggleActions: "play none none none",
+  }),
+    gsap
+      .timeline({
+        scrollTrigger: {
+          trigger: "#flipSection",
+          scrub: true,
+          pin: true,
+          start: "center center",
+          end: "+=800vw",
+        },
+      })
+      .from(".start", {
+        scale: 0.1,
+      }),
+    gsap.to(".small", {
+      scrollTrigger: {
+        trigger: "#flipSection",
+        scrub: 1,
+        start: "center center",
+        end: "+=800",
+      },
+      rotation: 500,
+      duration: 3,
+      ease: "none",
+    });
+  gsap.to(".big", {
+    scrollTrigger: {
+      trigger: "#flipSection",
+      scrub: 1,
+      start: "center center",
+      end: "+=800",
+    },
+    rotation: -500,
+    duration: 3,
+    ease: "none",
+  });
+});
+</script>
+
+<style scoped>
+.start.active {
+  visibility: hidden;
+}
+
+.start {
+  visibility: visible;
+}
+.start.flipping {
+  visibility: visible;
+}
+.end {
+  display: none;
+}
+
+.end.active {
+  display: flex !important;
+}
+.start,
+.start.flipping {
+  visibility: visible;
+}
+</style>