Spline
Habla con ventasEmpieza a crear

Crea una animación 3D con scroll e intégrala en Framer

Lección 4 de 8Spline 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

  1. 0:00Introducción
  2. 0:18Ejercicio básico con un cubo
  3. 1:20Un vistazo a la configuración del evento Scroll
  4. 2:42Ajustar la configuración de reproducción de la animación con scroll
  5. 3:06Animar el crecimiento de las hojas
  6. 7:59Añadir rotación a la animación de la planta
  7. 9:10Añadir movimiento de cámara
  8. 10:29Exportar como Viewer
  9. 10:40Insertar tu animación 3D en un sitio de Framer

Recursos relacionados