danak/javaneh
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

completed animations on desktop size

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-08 22:59:17 +03:30
parent 9e8d5abc19
commit a41a54788d
8 changed files with 434 additions and 259 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home-page/AboutUs.vue
+26 -22
View File
@@ -1,5 +1,5 @@
<template>
<div class="about flex justify-center pt-[6.3vw]">
<div id="dynamic" class="about flex justify-center pt-[6.3vw]">
<div class="relative w-[81.04%]">
<div class="absolute -right-[0.8vw] -mt-[2.2vw]">
<h1 class="text-[6.469vw] lg:text-[2.5vw] text-[#383E43] font-bold">
@@ -94,7 +94,9 @@
/>
</svg>
<div class="panels relative">
<div class="mt-[16vw] md:mt-0 panels relative">
<div
class="panel first leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-white rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
>
@@ -118,7 +120,7 @@
</div>
<div
class="panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
class="hidden md:block panel leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-yellow-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:!top-[10]"
>
<h1
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
@@ -139,7 +141,7 @@
</p>
</div>
<div
class="panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
class="hidden md:block panel pnl leading-[1.458vw] absolute w-full lg:w-[27.76vw] bg-red-200 rounded-[25px] pb-[7vw] lg:pb-[2.8vw] p-2 md:start-[42.5vw] top-[18vw] lg:top-[9.2vw]"
>
<h1
class="mt-[5vw] lg:mt-[1.3vw] text-[5.11vw] lg:text-[1.335vw] ps-4 lg:ps-8"
@@ -160,9 +162,8 @@
</p>
</div>
</div>
<svg
class="absolute mt-[95vw] right-0 block lg:hidden"
class="absolute mt-[75vw] right-0 block lg:hidden"
width="66"
height="30"
viewBox="0 0 66 30"
@@ -221,13 +222,14 @@ const main = ref();
let ctx;
const pnl = ref()
onMounted(() => {
if (window.innerWidth < 768) {
document.getElementById("dynamic").classList.remove("about")
}
const panels = gsap.utils.toArray(".panel");
gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 1 });
console.clear();
gsap.set(panels, { xPercent: 0, yPercent: 100, autoAlpha: 2 });
ctx = gsap.context((self) => {
gsap.to("#crclrMotion", {
scrollTrigger: {
trigger: ".panel",
@@ -247,11 +249,8 @@ onMounted(() => {
start: "top 80%",
end: () =>
"+=3000",
// "+=" + 150 * panels.length + "%",
// "+=" + document.querySelector(".about").getBoundingClientRect().width,
scrub: 1,
},
// ease: pathEase("#motionPath"), // the ease of the snap animation ("power3" by default)
motionPath: {
path: "#aboutPath",
align: "#aboutPath",
@@ -272,29 +271,34 @@ onMounted(() => {
yPercent: (i) => (i ? 140 : 0),
});
const tl = gsap.timeline({
defaults: {
duration: 1,
ease: "power1.inOut",
},
scrollTrigger: {
trigger: ".about",
start: "bottom center",
end: () => "+=" + 40 * panels.length + "%",
// y: 50000,
pin: true,
scrub: 1,
},
y: 11000,
});
panels.forEach((panel, index) => {
if (index) {
tl.to(
panel,
{
y: -window.innerHeight * 0.001,
yPercent: 0,
ease: "none",
y:-window.innerHeight * 0.001,
yPercent: 0,
},
"+=0.25"
);
}
"<",
).to(panel,{
autoAlpha: 0,
})
});
});
</script>
components/home-page/Header.vue
+60 -5
View File
@@ -4,7 +4,38 @@
class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center"
>
<svg
class="hidden lg:flex rotating-bubbles animate absolute rotating -top-[59.231vw] lg:!-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[95%] !overflow-x-hidden lg:w-[44.688vw]"
class="flex md:hidden absolute animate rotating-mobile rotating"
width="390"
height="239"
viewBox="0 0 390 239"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<circle
id="motion"
cx="195"
cy="4"
r="234.5"
stroke="url(#paint0_linear_1248_31458)"
stroke-dasharray="5 5"
/>
<defs>
<linearGradient
id="paint0_linear_1248_31458"
x1="195"
y1="-231"
x2="195"
y2="239"
gradientUnits="userSpaceOnUse"
>
<stop offset="0.499986" stop-color="white" stop-opacity="0" />
<stop offset="1" stop-color="white" />
</linearGradient>
</defs>
</svg>
<svg
class="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] lg:!-top-[8.8vw] h-[120.513vw] lg:h-[44.688vw] w-[95%] !overflow-x-hidden lg:w-[44.688vw]"
viewBox="0 0 858 858"
fill="none"
xmlns="http://www.w3.org/2000/svg"
@@ -32,9 +63,20 @@
</linearGradient>
</defs>
</svg>
<svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute top-[55vw]" viewBox="0 0 38 38" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="19" cy="19" r="19" fill="white"/>
<path d="M13.5 16.5526V21.4476C13.5 24.4909 15.6542 25.7284 18.285 24.2159L19.4583 23.5376C19.7425 23.3726 19.9167 23.0701 19.9167 22.7401V15.2601C19.9167 14.9301 19.7425 14.6276 19.4583 14.4626L18.285 13.7842C15.6542 12.2717 13.5 13.5092 13.5 16.5526Z" fill="#383E43"/>
<path d="M20.833 16.0574V21.9516C20.833 22.3091 21.218 22.5291 21.5205 22.3458L22.5288 21.7591C25.1597 20.2466 25.1597 17.7533 22.5288 16.2408L21.5205 15.6541C21.218 15.4799 20.833 15.6999 20.833 16.0574Z" fill="#383E43"/>
</svg>
<svg
class="arrow absolute h-[4.167vw] w-[4.167vw] lg:!top-[33.75vw]"
class="hidden md:block 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"
@@ -80,6 +122,7 @@ let ctx;
onMounted(() => {
ctx = gsap.context((self) => {
gsap.to(".rotating-bubbles", {
scrollTrigger: {
trigger: ".transform-bubbles",
@@ -91,6 +134,18 @@ onMounted(() => {
duration: 3,
ease: "none",
});
gsap.to(".rotating-mobile", {
scrollTrigger: {
trigger: ".transform-bubbles",
scrub: 1,
start: "center center",
end: "+=200",
},
rotation: 0,
duration: 3,
ease: "none",
});
gsap.to(".animate #motion", {
strokeDashoffset: 300,
repeat: -1,
@@ -99,9 +154,9 @@ onMounted(() => {
});
gsap.to(".arrow", {
strokeDashoffset: 300,
x: 700,
y: -130,
rotation: -90,
x: 700,
y: -130,
rotation: -90,
scrollTrigger: {
trigger: ".transform-bubbles",
scrub: 1,
components/home-page/RoadMap.vue
+7 -9
View File
@@ -8,6 +8,7 @@
نقشه راه از تولید به مصرف محصولات شینان
</h2>
<div ref="main" class="relative mt-[10vw] lg:mt-0 flex justify-center">
<svg
id="motionSVG"
class="hidden lg:block box z-[1] absolute mt-[8vw] lg:mt-[2.4vw] h-[15.385vw] w-[15.385vw] lg:h-[5.625vw] lg:w-[5.625vw]"
@@ -33,6 +34,7 @@
fill="#383E43"
/>
</svg>
<svg
class="motionPath hidden lg:block absolute mt-[8vw] w-[81.146vw] h-[107.604vw]"
viewBox="0 0 1558 2066"
@@ -49,14 +51,9 @@
</svg>
<svg
class="box hidden absolute"
id="motionSVG"
class="box2 block md:hidden !mt-[18vw] absolute"
id="motionSVG2"
width="60" height="60" viewBox="0 0 60 60" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="30" cy="30" r="29.5" stroke="#383E43" stroke-dasharray="5 5"/>
<circle cx="30" cy="30" r="18" fill="white"/>
@@ -64,8 +61,9 @@
<path d="M33.2104 32L26.7804 32C26.3904 32 26.1504 32.42 26.3504 32.75L26.9904 33.85C28.6404 36.72 31.3604 36.72 33.0104 33.85L33.6504 32.75C33.8404 32.42 33.6004 32 33.2104 32Z" fill="#383E43"/>
</svg>
<svg
class="motionPath block absolute lg:hidden mt-[20vw]"
class="motionPath2 block absolute md:hidden mt-[20vw]"
width="98vw"
height="359.487vw"
viewBox="0 0 390 1402"
@@ -73,7 +71,7 @@
xmlns="http://www.w3.org/2000/svg"
>
<path
id="motionPath"
id="motionPath2"
d="M195.25 -8.51273e-06L195.211 9.21222C195.094 36.7434 172.743 59 145.212 59L50 59C22.3858 59 5.86356e-05 81.3858 5.88568e-05 109L6.27834e-05 599C6.30047e-05 626.614 22.3858 649 50.0001 649L339.999 649C367.613 649 389.999 671.386 389.999 699L389.999 1238C389.999 1265.61 367.613 1288 339.999 1288L245 1288C217.386 1288 195 1310.39 195 1338L195 1402"
stroke="#383E43"
stroke-dasharray="5 5"
components/home-page/Slider.vue
+52 -32
View File
@@ -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>