From 900d87fa5550fd66e5dd05f23bad09e0b749b4ce Mon Sep 17 00:00:00 2001 From: HAM!DREZA Date: Sun, 5 May 2024 21:10:20 +0330 Subject: [PATCH] animations / about section --- .gitignore | 3 +- components/home-page/AboutUs.vue | 264 ++++++++++++++++++---- components/home-page/Header.vue | 46 ++-- components/home-page/Slider.vue | 11 +- package.json | 3 +- pages/index.vue | 19 +- pages/test.vue | 376 ++++++++++++------------------- 7 files changed, 418 insertions(+), 304 deletions(-) diff --git a/.gitignore b/.gitignore index 8637a11..c3776b8 100644 --- a/.gitignore +++ b/.gitignore @@ -1,3 +1,4 @@ node_modules/ .nuxt/ -pages/test.vue \ No newline at end of file +pages/test.vue +.output/ diff --git a/components/home-page/AboutUs.vue b/components/home-page/AboutUs.vue index da35fb5..31cc2dc 100644 --- a/components/home-page/AboutUs.vue +++ b/components/home-page/AboutUs.vue @@ -1,5 +1,5 @@ \ No newline at end of file + +// const boxes = gsap.utils.toArray('.panel'); +// const timeline = gsap.timeline({ +// scrollTrigger: { +// trigger: project, +// start: "center bottom", +// ease: "power2", +// toggleActions: "play none none reverse" +// } +// }) +// boxes.forEach((box, i) => { +// const anim = gsap.fromTo(box, +// {opacity: 0, y: 200}, +// {opacity: 1, y: 0}, "-=0.5"); +// ScrollTrigger.create({ +// trigger: box, +// animation: anim, +// toggleActions: "play none none reverse", +// repeat: -1 +// // once: true, +// }); +// }); + + + + + + + gsap.to("#crclrMotion", { + scrollTrigger: { + trigger: ".panel", + start: "top center", + }, + strokeDashoffset: 300, + repeat: 1, + ease: "none", + duration: 5, + }); + + + gsap.to(".box2", { + // y: 8000, + scrollTrigger: { + trigger: ".panel", + start: "top 80%", + end: () => + "+=4000", + // "+=" + 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", + alignOrigin: [0.5, 0.5], + autoRotate: 180, + }, + }); + + gsap.to(".line #aboutPath", { + strokeDashoffset: -300, + repeat: -1, + ease: "none", + duration: 5, + }); + }); + + gsap.set(panels, { + yPercent: (i) => (i ? 140 : 0), + }); + const tl = gsap.timeline({ + scrollTrigger: { + trigger: ".about", + start: "bottom center", + end: () => "+=" + 40 * panels.length + "%", + // y: 50000, + pin: true, + scrub: 1, + }, + y: 110000, + }); + panels.forEach((panel, index) => { + if (index) { + tl.to( + panel, + { + yPercent: 0, + ease: "none", + }, + "+=0.25" + ); + } + }); +}); + + + + + \ No newline at end of file diff --git a/components/home-page/Header.vue b/components/home-page/Header.vue index 5225501..8f466cb 100644 --- a/components/home-page/Header.vue +++ b/components/home-page/Header.vue @@ -4,13 +4,13 @@ class="!max-w-[100vw] transform-bubbles header h-[76.923vw] lg:h-[48.802vw] text-white flex flex-col items-center" > - +

{ start: "center center", end: "+=5000", }, - rotation: 500, + rotation: -800, duration: 3, ease: "none", - }), - gsap.to(".animate #motion", { - strokeDashoffset: -300, - repeat: -1, - ease: "none", - duration: 5, - }) - + }); + gsap.to(".animate #motion", { + strokeDashoffset: 300, + repeat: -1, + ease: "none", + duration: 5, + }); + gsap.to(".arrow", { + strokeDashoffset: 300, + x: 700, + y: -130, + rotation: -90, + scrollTrigger: { + trigger: ".transform-bubbles", + scrub: 1, + start: "center center", + end: "+=5000", + }, + // motionPath: { + // path: "#pathes", + // align: "#pathes", + // alignOrigin: [0.5, 0.5], + // autoRotate: 180, + // }, + }); }); }); - \ No newline at end of file diff --git a/components/home-page/Slider.vue b/components/home-page/Slider.vue index 6506a7d..2ae5de7 100644 --- a/components/home-page/Slider.vue +++ b/components/home-page/Slider.vue @@ -22,8 +22,6 @@ تومان

- -
+ + + +
diff --git a/package.json b/package.json index 0f19359..61e4a74 100644 --- a/package.json +++ b/package.json @@ -3,8 +3,9 @@ "private": true, "type": "module", "scripts": { - "build": "nuxt build", "dev": "nuxt dev", + "build": "nuxt build", + "start": "node .output/server/index.mjs", "generate": "nuxt generate", "preview": "nuxt preview", "postinstall": "nuxt prepare" diff --git a/pages/index.vue b/pages/index.vue index b5e9d31..42f1eba 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -1,11 +1,14 @@ diff --git a/pages/test.vue b/pages/test.vue index 8b7d978..8b4c831 100644 --- a/pages/test.vue +++ b/pages/test.vue @@ -1,256 +1,160 @@ \ No newline at end of file