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

  1. 0:00Intro
  2. 0:18Grundövning med en kub
  3. 1:20En titt på inställningarna för scrollhändelsen
  4. 2:42Justera uppspelningsinställningarna för scrollanimationen
  5. 3:06Animera bladens tillväxt
  6. 7:59Lägga till rotation i växtanimationen
  7. 9:10Lägga till kamerarörelse
  8. 10:29Exportera som Viewer
  9. 10:40Bädda in din 3D-animation på en Framer-sajt

Relaterade resurser

Relaterade tutorials

Alla tutorials