From 0664ecb5d4ee985836a4ccf98262605dbe44fed0 Mon Sep 17 00:00:00 2001 From: gabaldon Date: Tue, 30 Jul 2024 12:24:03 +0200 Subject: [PATCH 01/12] feat(Animations): implement animations --- assets/svg/black-star.svg | 3 + assets/svg/blue-horizontal-star.svg | 5 +- assets/svg/zigzag.svg | 2 +- components/AnimatedArrow.vue | 36 +++++ components/ArrowButton.vue | 18 ++- components/FooterSection.vue | 1 + components/SocialLinks.vue | 15 ++ components/cards/ExplorerLink.vue | 17 +- components/sections/CoinSection.vue | 29 +++- components/sections/HeroSection.vue | 179 +++++++++++++++++++--- components/sections/NewsletterSection.vue | 32 +++- composables/use-gsap.ts | 10 ++ layouts/section.vue | 89 +++++++---- package.json | 1 + pages/index.vue | 8 - plugins/gsap.ts | 19 +++ pnpm-lock.yaml | 44 ++++++ 17 files changed, 435 insertions(+), 73 deletions(-) create mode 100644 assets/svg/black-star.svg create mode 100644 components/AnimatedArrow.vue create mode 100644 composables/use-gsap.ts create mode 100644 plugins/gsap.ts diff --git a/assets/svg/black-star.svg b/assets/svg/black-star.svg new file mode 100644 index 00000000..0136cea9 --- /dev/null +++ b/assets/svg/black-star.svg @@ -0,0 +1,3 @@ + + + diff --git a/assets/svg/blue-horizontal-star.svg b/assets/svg/blue-horizontal-star.svg index 62047b2b..58a29a96 100644 --- a/assets/svg/blue-horizontal-star.svg +++ b/assets/svg/blue-horizontal-star.svg @@ -1,3 +1,4 @@ - - + + + diff --git a/assets/svg/zigzag.svg b/assets/svg/zigzag.svg index edcbf530..a466a067 100644 --- a/assets/svg/zigzag.svg +++ b/assets/svg/zigzag.svg @@ -1,3 +1,3 @@ - + diff --git a/components/AnimatedArrow.vue b/components/AnimatedArrow.vue new file mode 100644 index 00000000..c0269232 --- /dev/null +++ b/components/AnimatedArrow.vue @@ -0,0 +1,36 @@ +
+ +
+ + + diff --git a/components/ArrowButton.vue b/components/ArrowButton.vue index 8b5f81d9..0a921286 100644 --- a/components/ArrowButton.vue +++ b/components/ArrowButton.vue @@ -1,8 +1,12 @@ @@ -10,7 +14,11 @@ diff --git a/components/cards/ExplorerLink.vue b/components/cards/ExplorerLink.vue index 7e71b78d..ef469a64 100644 --- a/components/cards/ExplorerLink.vue +++ b/components/cards/ExplorerLink.vue @@ -1,7 +1,13 @@ diff --git a/package.json b/package.json index ccda0383..9a5483c8 100644 --- a/package.json +++ b/package.json @@ -38,6 +38,7 @@ }, "dependencies": { "@nuxtjs/i18n": "^8.3.3", + "gsap": "^3.12.5", "lodash.snakecase": "^4.1.1", "vue-select": "^4.0.0-beta.3" } diff --git a/pages/index.vue b/pages/index.vue index c5bf940e..512223ef 100644 --- a/pages/index.vue +++ b/pages/index.vue @@ -4,7 +4,6 @@ - @@ -14,10 +13,3 @@ - - diff --git a/plugins/gsap.ts b/plugins/gsap.ts new file mode 100644 index 00000000..b5aeb07c --- /dev/null +++ b/plugins/gsap.ts @@ -0,0 +1,19 @@ +import { gsap } from 'gsap' +import { ScrollTrigger } from 'gsap/ScrollTrigger' +import { ScrollToPlugin } from 'gsap/ScrollToPlugin' +import { MotionPathPlugin } from 'gsap/MotionPathPlugin' +import { TextPlugin } from 'gsap/TextPlugin' +// nuxt will auto import defineNuxtPlugin, so our file will look clean +export default defineNuxtPlugin(() => { + // imported gsap and all plugins needed, then just register them + gsap.registerPlugin( + ScrollToPlugin, + ScrollTrigger, + TextPlugin, + MotionPathPlugin, + ) + // later you can use them by deconstructing useNuxtApp composable + // but everything you put in provide will be prefixed with $ symbol to + // prevent some collisions + return { provide: { gsap, ScrollToPlugin, ScrollTrigger } } +}) diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 7329f2cc..cb83bf9e 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -11,9 +11,18 @@ importers: '@nuxtjs/i18n': specifier: ^8.3.3 version: 8.3.3(magicast@0.3.4)(rollup@4.18.1)(vue@3.4.35(typescript@5.5.4)) + '@studio-freight/lenis': + specifier: ^1.0.42 + version: 1.0.42 + gsap: + specifier: ^3.12.5 + version: 3.12.5 lodash.snakecase: specifier: ^4.1.1 version: 4.1.1 + vue-scrollmagic: + specifier: ^1.2.0 + version: 1.2.0 vue-select: specifier: ^4.0.0-beta.3 version: 4.0.0-beta.6(vue@3.4.35(typescript@5.5.4)) @@ -1181,6 +1190,10 @@ packages: resolution: {integrity: sha512-LtoMMhxAlorcGhmFYI+LhPgbPZCkgP6ra1YL604EeF6U98pLlQ3iWIGMdWSC+vWmPBWBNgmDBAhnAobLROJmwg==} engines: {node: '>=18'} + '@studio-freight/lenis@1.0.42': + resolution: {integrity: sha512-HJAGf2DeM+BTvKzHv752z6Z7zy6bA643nZM7W88Ft9tnw2GsJSp6iJ+3cekjyMIWH+cloL2U9X82dKXgdU8kPg==} + deprecated: '''@studio-freight/lenis'' has been renamed to just ''lenis'', run ''npx @darkroom.engineering/codemods'' to update your dependecies accordingly.' + '@trysound/sax@0.2.0': resolution: {integrity: sha512-L7z9BgrNEcYyUYtF+HaEfiS5ebkh9jXqbszz7pC0hRBPaatV0XjSD3+eHrpqFemQfgwiFF0QPIarnIihIDn7OA==} engines: {node: '>=10.13.0'} @@ -2510,6 +2523,12 @@ packages: graphemer@1.4.0: resolution: {integrity: sha512-EtKwoO6kxCL9WO5xipiHTZlSzBm7WLT627TqC/uVRd0HKmq8NXyebnNYxDoBi7wt8eTWrUrKXCOVaFq9x1kgag==} + gsap@2.1.3: + resolution: {integrity: sha512-8RFASCqi2FOCBuv7X4o7M6bLdy+1hbR0azg+MG7zz+EVsI+OmJblYsTk0GEepQd2Jg/ItMPiVTibF7r3EVxjZQ==} + + gsap@3.12.5: + resolution: {integrity: sha512-srBfnk4n+Oe/ZnMIOXt3gT605BX9x5+rh/prT2F1SsNJsU1XuMiP0E2aptW481OnonOGACZWBqseH5Z7csHxhQ==} + gzip-size@7.0.0: resolution: {integrity: sha512-O1Ld7Dr+nqPnmGpdhzLmMTQ4vAsD+rHwMm1NLUmoUFFymBOMKxCCrtDxqdBRYXdeEPEi3SyoR4TizJLQrnKBNA==} engines: {node: ^12.20.0 || ^14.13.1 || >=16.0.0} @@ -3710,6 +3729,10 @@ packages: engines: {node: '>=14.0.0'} hasBin: true + scrollmagic@2.0.8: + resolution: {integrity: sha512-UYXEGBPVLziovXl3FjHGkY9c4UXKUKopIdXwWR2JapWxCo0U345wYegi7rcsv5vHf/ktc1bSNWy4QRFiV+Yccw==} + engines: {node: '>=0.10.x'} + scule@1.3.0: resolution: {integrity: sha512-6FtHJEvt+pVMIB9IBY+IcCJ6Z5f1iQnytgyfKMhDKgmzYG+TeH/wx1y3l27rshSbLiSanrR9ffZDrEsmjlQF2g==} @@ -4334,6 +4357,9 @@ packages: peerDependencies: vue: ^3.2.0 + vue-scrollmagic@1.2.0: + resolution: {integrity: sha512-4n+c35mHzEJeNdPShhXFVE9CY0e0318deAQtIF09Dglj4NKcYJXThTKic3gMMLCtyPwEj3derHlGg2Nsquzaaw==} + vue-select@4.0.0-beta.6: resolution: {integrity: sha512-K+zrNBSpwMPhAxYLTCl56gaMrWZGgayoWCLqe5rWwkB8aUbAUh7u6sXjIR7v4ckp2WKC7zEEUY27g6h1MRsIHw==} peerDependencies: @@ -5620,6 +5646,8 @@ snapshots: '@sindresorhus/merge-streams@2.3.0': {} + '@studio-freight/lenis@1.0.42': {} + '@trysound/sax@0.2.0': {} '@types/estree@1.0.5': {} @@ -7314,6 +7342,10 @@ snapshots: graphemer@1.4.0: {} + gsap@2.1.3: {} + + gsap@3.12.5: {} + gzip-size@7.0.0: dependencies: duplexer: 0.1.2 @@ -8619,6 +8651,8 @@ snapshots: immutable: 4.3.6 source-map-js: 1.2.0 + scrollmagic@2.0.8: {} + scule@1.3.0: {} semver@5.7.2: {} @@ -9326,7 +9360,17 @@ snapshots: '@vue/devtools-api': 6.6.3 vue: 3.4.35(typescript@5.5.4) +<<<<<<< HEAD vue-select@4.0.0-beta.6(vue@3.4.35(typescript@5.5.4)): +======= + vue-scrollmagic@1.2.0: + dependencies: + gsap: 2.1.3 + scrollmagic: 2.0.8 + vue: 2.7.16 + + vue-select@4.0.0-beta.6(vue@3.4.32(typescript@5.5.3)): +>>>>>>> daea6b1 (feat(Animations): implement animations) dependencies: vue: 3.4.35(typescript@5.5.4) From 6d3381500e78ada967e0cf43bb4e24b96bb1397b Mon Sep 17 00:00:00 2001 From: gabaldon Date: Thu, 1 Aug 2024 09:08:38 +0200 Subject: [PATCH 02/12] fix(style): avoid link text modify the size on hover --- assets/styles/tailwind.css | 16 ++++++++++---- components/FooterSection.vue | 31 ++++++++++++++++----------- components/cards/TutorialLink.vue | 8 ++----- components/cards/TutorialsSubList.vue | 2 +- 4 files changed, 34 insertions(+), 23 deletions(-) diff --git a/assets/styles/tailwind.css b/assets/styles/tailwind.css index e0af5d78..b470ace3 100644 --- a/assets/styles/tailwind.css +++ b/assets/styles/tailwind.css @@ -80,12 +80,20 @@ line-height: 1.5; } - .link-hover-style { - @apply hover:-mr-[5px] hover:font-semibold; + .link-list-item { + padding: 0; + margin: 0; } - .footer-hover-style { - @apply hover:-mr-[2.5px] hover:font-semibold; + .link-list-item .link { + @apply inline-block cursor-pointer text-left min-w-max w-full hover:font-semibold; + padding: 16px; + margin: -16px; + } + + .link::before { + @apply font-semibold block overflow-hidden h-[0px] invisible; + content: attr(data-text); } /* Button */ diff --git a/components/FooterSection.vue b/components/FooterSection.vue index a5b567d1..47c7406a 100644 --- a/components/FooterSection.vue +++ b/components/FooterSection.vue @@ -7,9 +7,9 @@ >