Skapa en 3D-scrollanimation och integrera den i Framer
Spline 3DNybörjare12 min
I den här tutorialen lär vi oss att skapa en 3D-scrollanimation där en växt växer medan användaren scrollar. Vi ställer in scrollhändelser, lägger till övergångar och tar in kamerarörelse. Till sist bäddar vi in den interaktiva 3D-scenen på en webbplats med Framer som webbyggare.
👇 Använd länkarna nedan för att remixa designen i videon:
🪴 Webbplats och färdig scen att remixa: https://inspired-walkthroughs-144071.framer.app/ 🌱 3D-design av växten (utan animationer): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522
---
Upptäck fler fantastiska kreatörer och projekt #MadeInSpline på https://community.spline.design/
Det här lär du dig
- 0:00Intro
- 0:18Grundövning med en kub
- 1:20En titt på inställningarna för scrollhändelsen
- 2:42Justera uppspelningsinställningarna för scrollanimationen
- 3:06Animera bladens tillväxt
- 7:59Lägga till rotation i växtanimationen
- 9:10Lägga till kamerarörelse
- 10:29Exportera som Viewer
- 10:40Bädda in din 3D-animation på en Framer-sajt



