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Настройки события Scroll
  4. 2:42Настраиваем воспроизведение анимации при скролле
  5. 3:06Анимируем рост листьев
  6. 7:59Добавляем вращение в анимацию растения
  7. 9:10Добавляем движение камеры
  8. 10:29Экспорт через Viewer
  9. 10:40Встраиваем 3D-анимацию в сайт на Framer

Полезные материалы