javaneh/components/home-page/Slider.vue

<template>
  <div
    ref="main"
    id="flipSection"
    class="-z-[1] relative mt-[100vw] lg:mt-[25vw] flex flex-col items-center justify-center"
  >
    <img
      src="/public/images/assal.png"
      alt="product-name"
      class="z-[100] 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>

    <div class="absolute">
      <div
        ref="start"
        class="start relative w-[87.69%] lg:w-[91.82%] flex flex-col items-center justify-center"
      >

      <div class="absolute small">
        <svg
        class="absolute -left-[0vw] top-[27.25vw] h-[8.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
       viewBox="0 0 82 82" fill="none" xmlns="http://www.w3.org/2000/svg">
          <path d="M42.7144 57.3336L54.2759 50.6586C61.4639 46.5086 61.4473 39.73 54.2852 35.5748L51.082 33.7267C50.3046 33.2801 49.3524 33.281 48.573 33.731L30.9061 43.931C30.1267 44.381 29.6499 45.2051 29.6479 46.1017L29.6468 49.7998C29.6642 58.08 35.5264 61.4836 42.7144 57.3336Z" fill="#383E43"/>
          <path d="M31.5397 40.6771L45.461 32.6396C46.3054 32.1521 46.2997 30.9422 45.4539 30.4773L42.6924 28.8942C35.5302 24.739 29.6413 28.139 29.6587 36.4192L29.6489 39.6023C29.6503 40.5547 30.6953 41.1646 31.5397 40.6771Z" fill="#383E43"/>
          </svg>
          
        <svg

          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>

      </div>
 <div class="absolute big">
  <svg
  class="absolute left-[38vw] -top-[2.3vw]  md:-top-[1.8] h-[5.128vw] md:h-[4.271vw] w-[7.128vw] md:w-[4.271vw]"
 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
  
     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
     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>
    </div>
  </div>
</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: "+=500vw",
        },
      })
      .from(".start", {
        scale: 0.1,
      }),
    gsap.to(".small", {
      scrollTrigger: {
        trigger: "#flipSection",
        scrub: 1,
        start: "center center",
        end: "+=350",
      },
      rotation: 500,
      duration: 3,
      ease: "none",
    });
  gsap.to(".big", {
    scrollTrigger: {
      trigger: "#flipSection",
      scrub: 1,
      start: "center center",
      end: "+=350vw",
    },
    rotation: -500,
    duration: 3,
    ease: "slow(0.7,0.7,false)",
  });
});
</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>