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

fixed animation bugs

Browse Source
This commit is contained in:
HAM!DREZA
2024-05-09 23:16:54 +03:30
parent 0ac988a9c7
commit ba0c128832
8 changed files with 307 additions and 146 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/home-page/Header.vue
+33 -33
View File
@@ -4,7 +4,7 @@
class="!max-w-[100vw] transform-bubbles header h-[76.923vw] md:h-[48.802vw] text-white flex flex-col items-center"
>
<svg
class="flex md:hidden absolute animate rotating-mobile rotating"
class="flex md:hidden absolute animate rotateSvg"
width="100vw"
height="58vw"
viewBox="0 0 390 239"
@@ -34,6 +34,23 @@
</defs>
</svg>
<svg
class="mobileArrow block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]"
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="hidden md:flex rotating-bubbles animate absolute rotating -top-[50.231vw] md:!-top-[8.8vw] h-[120.513vw] md:h-[44.688vw] w-[95%] !overflow-x-hidden md:w-[44.688vw]"
viewBox="0 0 858 858"
@@ -63,19 +80,7 @@
</linearGradient>
</defs>
</svg>
<svg class="block md:hidden h-[9.744vw] w-[9.744vw] absolute mt-[53vw]" 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="hidden md:block arrow absolute h-[4.167vw] w-[4.167vw] md:!top-[33.75vw]"
viewBox="0 0 80 80"
@@ -123,7 +128,6 @@ let ctx;
onMounted(() => {
ctx = gsap.context((self) => {
gsap.to(".rotating-bubbles", {
scrollTrigger: {
trigger: ".transform-bubbles",
@@ -131,20 +135,9 @@ onMounted(() => {
start: "center center",
end: "+=5000",
},
rotation: -800,
rotation: -600,
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",
ease: "slow(0.7,0.7,false)",
});
gsap.to(".animate #motion", {
@@ -164,13 +157,20 @@ onMounted(() => {
start: "center center",
end: "+=5000",
},
// motionPath: {
// path: "#pathes",
// align: "#pathes",
// alignOrigin: [0.5, 0.5],
// autoRotate: 180,
// },
});
});
gsap.to(".mobileArrow", {
strokeDashoffset: 300,
x: 700,
y: -100,
rotation: -90,
scrollTrigger: {
trigger: ".transform-bubbles",
scrub: 1,
start: "center 20%",
end: "+=5000",
},
});
});
</script>