GSAPとAIで自社のWebflowサイトにアニメーションを追加した手順

おはようございます。
月曜ですね。
10月も最終週です。
みなさんいかがお過ごしでしょうか。

僕は、「帰らなきゃな〜」と考えつづけ、
未だタイにいるというなんとも執念深い動きを見せております。

さて、今日はGSAP × Webflow × AIで自社サイトを少しだけアプデしたのでそのお話です。

GSAP × Webflow × AI｜今、流行りのGSAPでサイトをアプデした手順

このセクションはガッツリWebflowユーザーに沿って書いていきます。
今後ブログなどで本リリースします。メルマガでは挑戦したい人がいたらサポートしようかなと思い書いています。

ステップはこちら

1. GASPのWebflowテンプレをGPTで検索

2. 参考のテンプレの使い方動画YoutubeをAIに読ませる

3. 同じコードをAI生成する

4. カスタムの方法をAIと相談

5. 最終盤を作成し、Webflowサイトへコピペ

上位と同じステップで1時間もあれば達成できるようになります。
（ここに辿り着くまでに半日かかったけどね）

メルマガでは詳細は省きます。長くなりすぎるので。
上記の流れだけ頭にあればすぐに実施できるはず。

今度ブログ記事にするのでその際にまたメールしますね。
以上の流れで作ったのはサイト内のページ移管の際に起こるアニメーションです。

実際のサイトはこちら
→https://www.webharu.com/

まだTOPページ専用のアニメーションが作成できてませんが、サイト内ページ移管はいい感じだと思ってます

短めだけど月曜なのでゴリゴリ仕事してきます。
盛り上がっていきましょう！

PS：集中する方法

最近多くの考えが頭の中を巡っており、「どうしよう、どうしよう」とずっと考えていました。

しかしふと「利口ぶって考えているなんて、まるで凡人じゃないか。今は悩んでいる人や不安な人の方が多い時期だろ」と吹っ切れ、頭の中を空にする。思考を止める。を実践しています。

すると、不思議なことにめっちゃくちゃ生産性が上がっています。頭で考えている時間は無駄になることの方がおおいので、適度に思考停止して生きていきます🥴

最近の朝活風景