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/AboutUs.vue
+3 -2
View File
@@ -234,10 +234,11 @@ onMounted(() => {
scrollTrigger: {
trigger: ".panel",
start: "top center",
end: "+=50"
},
strokeDashoffset: 300,
repeat: 1,
ease: "none",
ease: "slow(0.7,0.7,false)",
duration: 5,
});
@@ -273,7 +274,7 @@ onMounted(() => {
const tl = gsap.timeline({
defaults: {
duration: 1,
ease: "power1.inOut",
ease: "slow(0.7,0.7,false)",
},
scrollTrigger: {
trigger: ".about",
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>
components/home-page/MediaSlider.vue
+5 -7
View File
@@ -13,16 +13,16 @@
</p>
<div class="hidden md:flex h-[50px] me-[0.5vw]">
<svg
class="cursor-pointer "
class="cursor-pointer h-[2.604vw] w-[2.604vw]"
@click="this.$refs.carousel.next()"
width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" transform="rotate(-180 25 25)" stroke="#878787"/>
<path d="M22.0002 17.0799L28.5202 23.5999C29.2902 24.3699 29.2902 25.6299 28.5202 26.3999L22.0002 32.9199" stroke="#878787" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
<svg
class="cursor-pointer ms-[0.5vw]"
class="cursor-pointer ms-[0.5vw] h-[2.604vw] h-[2.604vw]"
@click="this.$refs.carousel.prev()"
width="50" height="50" viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
viewBox="0 0 50 50" fill="none" xmlns="http://www.w3.org/2000/svg">
<circle cx="25" cy="25" r="24.5" stroke="#383E43"/>
<g clip-path="url(#clip0_836_14507)">
<path d="M27.9998 32.9201L21.4798 26.4001C20.7098 25.6301 20.7098 24.3701 21.4798 23.6001L27.9998 17.0801" stroke="#383E43" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" stroke-linejoin="round"/>
@@ -122,9 +122,7 @@
>
ادامه مطلب
<svg
class="ms-3"
width="24"
height="24"
class="ms-3 h-[1.25vw] w-[1.25vw]"
viewBox="0 0 24 24"
fill="none"
xmlns="http://www.w3.org/2000/svg"
components/home-page/RoadMap.vue
+32 -8
View File
@@ -50,13 +50,13 @@
</svg>
<svg
class="motionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
class="mobileMotionPath block absolute md:hidden mt-[20vw] w-[98vw] h-[359.487vw]"
viewBox="0 0 390 1402"
fill="none"
xmlns="http://www.w3.org/2000/svg"
>
<path
id="motionPath"
id="mobileMotionPath"
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"
@@ -64,8 +64,8 @@
</svg>
<svg
class="block md:hidden box z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
id="motionSVG"
class="block md:hidden mobilBox z-[1] absolute mt-[8vw] h-[15.385vw] w-[15.385vw]"
id="mobileMotionSVG"
width="60"
height="60"
viewBox="0 0 60 60"
@@ -120,16 +120,14 @@ onMounted(() => {
gsap.to("#motionSVG", {
scrollTrigger: {
trigger: "#motionSVG",
start: "top 30%",
start: "top 10%",
end: () =>
"+=" +
document.querySelector("#motionPath").getBoundingClientRect().height,
scrub: 1,
},
ease: pathEase("#motionPath"), // the ease of the snap animation ("power3" by default)
// y: 700,
ease: "slow(0.7,0.7,false)",
y: document.querySelector("#motionPath").getBoundingClientRect().height,
// immediateRender: true,
motionPath: {
path: "#motionPath",
align: "#motionPath",
@@ -137,6 +135,32 @@ onMounted(() => {
autoRotate: -90,
},
});
gsap.to(".mobileMotionPath #mobileMotionPath", {
strokeDashoffset: -300,
repeat: -1,
ease: "none",
duration: 5,
});
gsap.to("#mobileMotionSVG", {
scrollTrigger: {
trigger: "#mobileMotionSVG",
start: "top 20%",
end: () =>
"+=" +
document.querySelector("#mobileMotionPath").getBoundingClientRect().height,
scrub: 1,
},
ease: "slow(0.7,0.7,false)", // the ease of the snap animation ("power3" by default)
// y: 700,
y: document.querySelector("#mobileMotionPath").getBoundingClientRect().height,
// immediateRender: true,
motionPath: {
path: "#mobileMotionPath",
align: "#mobileMotionPath",
alignOrigin: [0.5, 0.5],
autoRotate: -90,
},
});
function pathEase(path, config = {}) {
let axis = config.axis || "y",
precision = config.precision || 1,
components/home-page/Slider.vue
+1 -7
View File
@@ -83,12 +83,6 @@
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>
@@ -144,7 +138,7 @@ onMounted(() => {
},
rotation: 500,
duration: 3,
ease: "none",
ease: "slow(0.7,0.7,false)",
});
gsap.to(".big", {
scrollTrigger: {