feat: impl animation

[re-taro]

closed #76 closed #109 closed #151

[github-actions[bot]]

🚧 Deploy Preview building...

Name	Link
🔨 Latest commit	018840edef411125683d6cf8fecc4eb5b236a13f
🔍 Latest deploy log	https://github.com/suzuka-kosen-festa/2024-hp/actions/runs/9747276390

---

[github-actions[bot]]

🚧 Deploy Preview building...

Name	Link
🔨 Latest commit	018840edef411125683d6cf8fecc4eb5b236a13f
🔍 Latest deploy log	https://github.com/suzuka-kosen-festa/2024-hp/actions/runs/9747276390

---

[github-actions[bot]]

✅ Deploy Preview ready!

Name	Link
🔨 Latest commit	018840edef411125683d6cf8fecc4eb5b236a13f
🔍 Latest deploy log	https://github.com/suzuka-kosen-festa/2024-hp/actions/runs/9747276390
😎 Deploy Preview Url	https://896c1151.2024-hp.pages.dev

---

[github-actions[bot]]

Size Change: +27.2 kB (+21.78%) 🚨

Total Size: 152 kB

Filename	Size	Change
build/client/assets/DropdownCloser-C3g0PKqK.js	0 B	-1.39 kB (removed)	🏆
build/client/assets/DropdownRoot-Thoe_O_G.js	0 B	-1 kB (removed)	🏆
build/client/assets/DropdownScrollArea-BvEFIWx2.js	0 B	-222 B (removed)	🏆
build/client/assets/DropdownTrigger-Drpopbm5.js	0 B	-611 B (removed)	🏆
build/client/assets/entry.client-CFBKdjm-.js	0 B	-288 B (removed)	🏆
build/client/assets/manifest-27491d5c.js	0 B	-577 B (removed)	🏆
build/client/assets/remix-run_react-Cw75vGyj.js	0 B	-11.6 kB (removed)	🏆
build/client/assets/root-3MnJ8W0z.js	0 B	-1.55 kB (removed)	🏆
build/client/assets/route-BhrZsZNh.js	0 B	-7.18 kB (removed)	🏆
build/client/assets/route-DJ8pB1ou.js	0 B	-212 B (removed)	🏆
build/client/assets/route-uuALWpTQ.css	0 B	-1.84 kB (removed)	🏆
build/client/assets/server-build-CgROmnlz.css	0 B	-2.43 kB (removed)	🏆
build/client/assets/styles.css-CkZGCodR.js	0 B	-175 B (removed)	🏆
build/client/assets/DropdownCloser-CG-CWp4X.js	1.39 kB	+1.39 kB (new file)	🆕
build/client/assets/DropdownRoot-DzTbf6Ig.js	1.12 kB	+1.12 kB (new file)	🆕
build/client/assets/DropdownScrollArea-Den_WWtR.js	220 B	+220 B (new file)	🆕
build/client/assets/DropdownTrigger-D7kIgj_H.js	756 B	+756 B (new file)	🆕
build/client/assets/entry.client-kn01JuM9.js	286 B	+286 B (new file)	🆕
build/client/assets/gsap_react-CN3gSmwE.js	474 B	+474 B (new file)	🆕
build/client/assets/gsap-8pyHVpao.js	26.9 kB	+26.9 kB (new file)	🆕
build/client/assets/manifest-6fc11945.js	621 B	+621 B (new file)	🆕
build/client/assets/remix-run_react-DTNSY7qB.js	11.6 kB	+11.6 kB (new file)	🆕
build/client/assets/root-09AZnMUK.js	1.64 kB	+1.64 kB (new file)	🆕
build/client/assets/route-BtmWQLyX.css	2.08 kB	+2.08 kB (new file)	🆕
build/client/assets/route-Czdvp8Ss.js	347 B	+347 B (new file)	🆕
build/client/assets/route-P-2_CMBZ.js	6.01 kB	+6.01 kB (new file)	🆕
build/client/assets/server-build-Cz3VM3g3.css	2.68 kB	+2.68 kB (new file)	🆕
build/client/assets/styles.css-D0Us1VYr.js	174 B	+174 B (new file)	🆕

ℹ️ View Unchanged

| Filename | Size | | :--- | :---: | | `build/client/assets/builder.io_partytown-Bi0d9J1h.js` | 1.71 kB | | `build/client/assets/clsx-BeLtu-UY.js` | 238 B | | `build/client/assets/cookie-CXUWDbkB.js` | 125 B | | `build/client/assets/info-box-CC-M0JjV.js` | 263 B | | `build/client/assets/message-text-D4_GwoPH.js` | 312 B | | `build/client/assets/react-CqoKa5N2.js` | 2.86 kB | | `build/client/assets/react-dom-BCcPfFbu.js` | 41.5 kB | | `build/client/assets/react-router-CHihYdUD.js` | 3.43 kB | | `build/client/assets/react-router-dom-CQGFM_Hu.js` | 3.27 kB | | `build/client/assets/remix-run_router-Co8cMhQr.js` | 16.3 kB | | `build/client/assets/remix-run_server-runtime-BTiKZhkm.js` | 74 B | | `build/client/assets/root-D5Tl0fmt.css` | 554 B | | `build/client/assets/scheduler-CmR-7K7A.js` | 1.62 kB | | `build/client/assets/set-cookie-parser-l0sNRNKZ.js` | 21 B | | `build/client/assets/styles-BmNDHTUz.css` | 229 B | | `build/client/assets/temporal-polyfill-CHqPwivh.js` | 20.8 kB | | `build/client/assets/theme.css.ts-BJj-RLFQ.css` | 184 B | | `build/client/assets/turbo-stream-C8id1KUB.js` | 1.47 kB | | `build/client/assets/vanilla-extract_dynamic-4t5P_9P6.js` | 307 B | | `build/client/assets/vanilla-extract_private-wmIxdIeL.js` | 409 B | | `build/client/assets/web3-storage_multipart-parser-l0sNRNKZ.js` | 21 B |

_{compressed-size-action}

[github-actions[bot]]

✅ Deploy Storybook Preview ready!

Name	Link
🔨 Latest commit	018840edef411125683d6cf8fecc4eb5b236a13f
🔍 Latest deploy log	https://github.com/suzuka-kosen-festa/2024-hp/actions/runs/9747276390
😎 Deploy Preview Url	https://f3538084.2024-hp-sb.pages.dev

---

[github-actions[bot]]

⚡️ Lighthouse report for the deploy preview of this PR

URL	Performance	Accessibility	Best Practices	SEO	PWA	Report
/	🟠 77	🟢 100	🟢 96	🟢 100	🔴 NaN	Report

[Bayathy]

この「Tap to Start」がガタガタになるのってどうにもならんのだっけ

[re-taro]

文字の太さ的にどうしようもない。ちょっと調整します

[re-taro]

消したほうが見やすいわ

[Bayathy]

これFIgma上だとそんなアレではないんだけどねぇ、消しちゃっても大丈夫です

[re-taro]

原因不明で再現性がないですが、時々Daysが000の状態で画面で止まります。普通のリロードでは治らず、スーパーリロードで治ります (これとは別件で、ページを読み込んだ瞬間に一瞬真っ暗になったり、一瞬000と表示されたりするのが気になったり...こっちのプライオリティは低いです)

@shiron-dev これねぇ再現性がないと対応が難しいですね。issueには切ります。

また、この画面のDAYS、ちょっと見にくくね？ってなってます。デザインより文字が潰れてる...?

@shiron-dev @Bayathy これはGSAP(というよりJSアニメーション)が悪さをしていてsvgが壊れるんですよね。再現性◯なんですけど修正方法が立っていません。

[re-taro]

原因はわかりました。修正できるか検討します

@shiron-dev @Bayathy これはGSAP(というよりJSアニメーション)が悪さをしていてsvgが壊れるんですよね。再現性◯なんですけど修正方法が立っていません。

[re-taro]

修正ed

[re-taro]

原因不明で再現性がないですが、時々Daysが000の状態で画面で止まります。普通のリロードでは治らず、スーパーリロードで治ります

悪化しました

これがちでどういう経路で起こっているか教えてほしいかも

[re-taro]

あーSSR時にGSAPのコードを読みに行って死んでCSRに切り替わっているからか。ちょっと確認しますね

[shiron-dev]

plainなchrom(バージョン: 126.0.6478.127（Official Build） （arm64）)でスーパーリロードすると二回に一回ぐらい発生します。適当にリロードすればほぼほぼ再現できるので.har等々どんな情報でも提供できます。

あと、サブリミナル効果みたいに一瞬だけHeroページが表示されるのも若干気になる。

https://github.com/suzuka-kosen-festa/2024-hp/assets/54439127/e20969f2-3ca4-45da-9f09-8c09ceb53d53

[re-taro]

アニメーション中に連打するとバグる

2024-07-01.15.23.48.mov

これは僕が実装サボったからですねwww

修正します