SplineMaak een 3D-scrollanimatie en integreer die in Framer
Les 4 van 8Spline 3DBeginner12 min
In deze tutorial leren we hoe je een 3D-scrollanimatie maakt waarin een plant groeit terwijl de gebruiker scrolt. We stellen scroll-events in, voegen transities toe en verwerken camerabeweging. Tot slot sluiten we de interactieve 3D-scène in op een website, met Framer als websitebouwer.
👇Gebruik de links hieronder om het design uit de video te remixen:
🪴 Website en eindscène om te remixen: https://inspired-walkthroughs-144071.framer.app/ 🌱 3D-plantdesign (zonder animaties): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522
---
Ontdek meer geweldige makers en projecten #MadeInSpline op https://community.spline.design/
Wat je leert
- 0:00Intro
- 0:18Basisoefening met een kubus
- 1:20De instellingen van het Scroll-event bekijken
- 2:42De Play Settings voor de scrollanimatie aanpassen
- 3:06De groei van bladeren animeren
- 7:59Rotatie toevoegen aan de plantanimatie
- 9:10Camerabeweging toevoegen
- 10:29Exporteren als Viewer
- 10:40Je 3D-animatie insluiten in een Framer-site
