SplineCréer une animation 3D au défilement et l’intégrer dans Framer
Spline 3DDébutant12 min
Dans ce tutoriel, nous apprenons à créer une animation 3D au défilement où une plante pousse à mesure que l’utilisateur fait défiler la page. Nous configurons des événements de défilement, ajoutons des transitions et intégrons un mouvement de caméra. Enfin, nous intégrons la scène 3D interactive à un site web en utilisant Framer comme outil de création de sites.
👇Utilisez les liens ci-dessous pour remixer le design présenté dans la vidéo :
🪴 Remix du site web et de la scène finale : https://inspired-walkthroughs-144071.framer.app/ 🌱 Design 3D de la plante (sans animations) : https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522
---
Découvrez d’autres créateurs et projets incroyables #MadeInSpline sur https://community.spline.design/
Ce que vous allez apprendre
- 0:00Intro
- 0:18Exercice de base avec un cube
- 1:20Les réglages de l’événement Scroll
- 2:42Ajuster les réglages de lecture de l’animation au défilement
- 3:06Animer la croissance des feuilles
- 7:59Ajouter une rotation à l’animation de la plante
- 9:10Ajouter un mouvement de caméra
- 10:29Exporter en Viewer
- 10:40Intégrer votre animation 3D à un site Framer
