completed animations on desktop size
This commit is contained in:
HAM!DREZA
@@ -2,12 +2,12 @@
|
||||
<div
|
||||
ref="main"
|
||||
id="flipSection"
|
||||
class="-z-[1] relative mt-[100vw] lg:mt-[50vw] flex flex-col items-center justify-center"
|
||||
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-[10] ax w-[18.205vw] lg:w-[17.292vw] h-[20.521vw]"
|
||||
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]"
|
||||
@@ -27,8 +27,17 @@
|
||||
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="small absolute"
|
||||
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"
|
||||
@@ -44,32 +53,43 @@
|
||||
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
|
||||
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 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>
|
||||
@@ -107,7 +127,7 @@ onMounted(() => {
|
||||
scrub: true,
|
||||
pin: true,
|
||||
start: "center center",
|
||||
end: "+=800vw",
|
||||
end: "+=500vw",
|
||||
},
|
||||
})
|
||||
.from(".start", {
|
||||
@@ -118,7 +138,7 @@ onMounted(() => {
|
||||
trigger: "#flipSection",
|
||||
scrub: 1,
|
||||
start: "center center",
|
||||
end: "+=800",
|
||||
end: "+=350",
|
||||
},
|
||||
rotation: 500,
|
||||
duration: 3,
|
||||
@@ -129,11 +149,11 @@ onMounted(() => {
|
||||
trigger: "#flipSection",
|
||||
scrub: 1,
|
||||
start: "center center",
|
||||
end: "+=800",
|
||||
end: "+=350vw",
|
||||
},
|
||||
rotation: -500,
|
||||
duration: 3,
|
||||
ease: "none",
|
||||
ease: "slow(0.7,0.7,false)",
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
Reference in New Issue
Block a user