Створіть 3D-анімацію прокручування й інтегруйте її у Framer

Урок 4 з 8Spline 3DПочатковий12 хв

У цьому уроці ми навчимося створювати 3D-анімацію прокручування, у якій рослина росте, поки користувач гортає сторінку. Ми налаштуємо події прокручування, додамо переходи й рух камери. Наостанок вбудуємо інтерактивну 3D-сцену на сайт, використовуючи Framer як конструктор.

👇За посиланнями нижче можна зробити ремікс дизайну з відео:

🪴 Сайт і ремікс фінальної сцени: 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:20Огляд налаштувань події прокручування
  4. 2:42Налаштовуємо параметри відтворення для анімації прокручування
  5. 3:06Анімуємо ріст листя
  6. 7:59Додаємо обертання до анімації рослини
  7. 9:10Додаємо рух камери
  8. 10:29Експорт як Viewer
  9. 10:40Вбудовуємо 3D-анімацію на сайт у Framer

Корисні матеріали