3Dのスクロールアニメーションをつくって、Framerに組み込む

Spline 3D初級12分

このチュートリアルでは、ユーザーがスクロールすると植物が育つ3Dのスクロールアニメーションのつくり方を学びます。Scrollイベントを設定し、トランジションを加え、カメラの動きを取り入れます。最後に、WebビルダーとしてFramerを使って、インタラクティブな3DシーンをWebサイトに埋め込みます。

👇下のリンクから、動画で紹介したデザインをリミックスできます:

🪴 Webサイトと完成シーンのリミックス:https://inspired-walkthroughs-144071.framer.app/ 🌱 3Dの植物のデザイン(アニメーションなし):https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522

---

#MadeInSplineの素晴らしいクリエイターやプロジェクトをもっと見つけよう:https://community.spline.design/

学べること

  1. 0:00イントロ
  2. 0:18キューブを使った基本の練習
  3. 1:20Scrollイベントの設定を見る
  4. 2:42スクロールアニメーションの再生設定を調整する
  5. 3:06葉が伸びるアニメーション
  6. 7:59植物のアニメーションに回転を加える
  7. 9:10カメラの動きを加える
  8. 10:29Viewerとしてエクスポートする
  9. 10:403DアニメーションをFramerのサイトに埋め込む

関連リソース

関連するチュートリアル

すべてのチュートリアル