Spline
Vertrieb kontaktierenJetzt loslegen

Eine 3D-Scroll-Animation erstellen und in Framer einbinden

Spline 3DEinsteiger12 Min.

In diesem Tutorial lernen wir, wie du eine 3D-Scroll-Animation erstellst, in der eine Pflanze wächst, während gescrollt wird. Wir richten Scroll-Events ein, fügen Übergänge hinzu und bauen Kamerabewegungen ein. Zum Schluss betten wir die interaktive 3D-Szene mit Framer als Website-Baukasten in eine Website ein.

👇 Über die Links unten kannst du das Design aus dem Video remixen:

🪴 Website und Remix der finalen Szene: https://inspired-walkthroughs-144071.framer.app/ 🌱 3D-Pflanzendesign (ohne Animationen): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522

---

Entdecke weitere großartige Creator und Projekte #MadeInSpline auf https://community.spline.design/

Das lernst du

  1. 0:00Intro
  2. 0:18Einfache Übung mit einem Würfel
  3. 1:20Ein Blick auf die Einstellungen des Scroll-Events
  4. 2:42Die Play Settings für die Scroll-Animation anpassen
  5. 3:06Wachsende Blätter animieren
  6. 7:59Der Pflanzenanimation eine Drehung hinzufügen
  7. 9:10Kamerabewegung hinzufügen
  8. 10:29Als Viewer exportieren
  9. 10:40Deine 3D-Animation in eine Framer-Website einbetten

Weitere Ressourcen

Ähnliche Tutorials

Alle Tutorials
Interaktive, fließende 3D-Formen gestalten, die dem Cursor folgen

Spline 3DEinsteiger12 Min.

Einem 3D-Objekt eine Follow-Interaktion hinzufügen

Spline 3DEinsteiger6 Min.

Eine 3D-Website mit Spline und Framer designen

Spline 3DEinsteiger14 Min.