SplineCrea una animación 3D con scroll e intégrala en Framer
Spline 3DPrincipiante12 min
En este tutorial aprenderemos a crear una animación 3D con scroll en la que una planta crece a medida que el usuario se desplaza. Configuraremos eventos de scroll, añadiremos transiciones e incorporaremos movimiento de cámara. Por último, insertaremos la escena 3D interactiva en un sitio web usando Framer como creador de sitios.
👇Usa los enlaces de abajo para remezclar el diseño que aparece en el vídeo:
🪴 Remix del sitio web y la escena final: https://inspired-walkthroughs-144071.framer.app/ 🌱 Diseño 3D de la planta (sin animaciones): https://app.spline.design/file/c4dc75ac-ebaf-4b00-a6cc-a1e47347f522
---
Descubre más creadores y proyectos increíbles #MadeInSpline en https://community.spline.design/
Lo que aprenderás
- 0:00Introducción
- 0:18Ejercicio básico con un cubo
- 1:20Un vistazo a la configuración del evento Scroll
- 2:42Ajustar la configuración de reproducción de la animación con scroll
- 3:06Animar el crecimiento de las hojas
- 7:59Añadir rotación a la animación de la planta
- 9:10Añadir movimiento de cámara
- 10:29Exportar como Viewer
- 10:40Insertar tu animación 3D en un sitio de Framer
