# Crea una animación 3D con scroll e intégrala en Framer - Spline Academy (https://spline.design/es/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer)

> 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…

1. [Academy](https://spline.design/es/academy)
2. [Tutoriales](https://spline.design/es/academy/tutorials)
3. Crea una animación 3D con scroll e intégrala en Framer

# Crea 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

1. [0:00Introducción](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=0s)
2. [0:18Ejercicio básico con un cubo](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=18s)
3. [1:20Un vistazo a la configuración del evento Scroll](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=80s)
4. [2:42Ajustar la configuración de reproducción de la animación con scroll](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=162s)
5. [3:06Animar el crecimiento de las hojas](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=186s)
6. [7:59Añadir rotación a la animación de la planta](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=479s)
7. [9:10Añadir movimiento de cámara](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=550s)
8. [10:29Exportar como Viewer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=629s)
9. [10:40Insertar tu animación 3D en un sitio de Framer](https://www.youtube.com/watch?v=j5sEe5NQtUU&t=640s)

## Recursos relacionados

- [Plant Growth ScrollPlantilla](https://app.spline.design/academy/tutorials/create-a-3d-scroll-animation-integrate-into-framer?redirect-duplicate-template-uuid=5f6456e9-ed1e-4f80-8ba5-a9c8a9ec9f5f&is-2d-file=false)
- [How state-based animation worksDocumento](https://docs.spline.design/interaction-states-events-and-actions/how-state-based-animation-works)
- [Scroll EventDocumento](https://docs.spline.design/interaction-states-events-and-actions/events/scroll-event)
- [Integrating with FramerDocumento](https://docs.spline.design/integrations/integrating-with-framer)

## Resumen

- Spline 3D
- 12 min
- Principiante

## Parte de

- [Exportación e integración en Spline](https://spline.design/es/academy/collections/export-integration-in-spline/create-a-3d-scroll-animation-integrate-into-framer)

## Tutoriales relacionados

[Todos los tutoriales](https://spline.design/es/academy/tutorials)

[Modela formas fluidas 3D interactivas que siguen al cursorSpline 3DPrincipiante12 min](https://spline.design/es/academy/tutorials/shape-interactive-3d-fluid-shapes-that-follow-the-cursor)[Cómo añadir una interacción Follow a un objeto 3DSpline 3DPrincipiante6 min](https://spline.design/es/academy/tutorials/how-to-add-a-follow-interaction-to-a-3d-object)[Diseña un sitio web 3D con Spline y FramerSpline 3DPrincipiante14 min](https://spline.design/es/academy/tutorials/designing-a-3d-website-with-spline-and-framer)

[Spline](https://spline.design/es)

El editor 3D y 2D para equipos y sus agentes. Publica en la web, iOS y Android.

#### Pregúntale a la IA sobre Spline

#### Productos

- [Diseño 3D](https://spline.design/es/3d-design)
- [Hana](https://spline.design/es/hana)
- [Omma](https://omma.build)
- [Generación 3D con IA](https://spline.design/es/ai-generate)
- [Spline MCP](https://spline.design/es/mcp)
- [Spline Arena](https://spline.design/es/arena)
- [Precios](https://spline.design/es/pricing)
- [Enterprise](https://spline.design/es/enterprise)

#### Runtimes

- [Web](https://spline.design/es/web)
- [iOS](https://spline.design/es/ios)
- [Android](https://spline.design/es/android)

#### Apps

- [Descargar](https://spline.design/es/download)
- [Spline Mirror](https://spline.design/spline-mirror)
- [Descargar Spline Mirror](https://spline.design/download-mirror)

#### Aprende

- [Docs](https://docs.spline.design/)
- [Academy](https://spline.design/es/academy)
- [API de Spline](https://www.npmjs.com/package/@splinetool/runtime)
- [Soluciones](https://spline.design/solutions)

#### Comunidad

- [Comunidad de Spline](https://community.spline.design)
- [Blog](https://spline.design/es/blog)
- [Novedades](https://spline.design/es/changelog)
- [Educación](https://spline.design/es/education)
- [Contra](https://spline.design/contra)
- [Afiliados](https://spline.design/es/affiliate)

#### Empresa

- [Clientes](https://spline.design/es/customers)
- [Empleo](https://www.ycombinator.com/companies/spline/jobs)
- [Seguridad](https://spline.design/es/security)

#### Legal

- [Términos y condiciones](https://spline.design/terms)
- [Privacidad](https://spline.design/privacy)

#### Contacto

- [help@spline.design](mailto:help@spline.design)
- [jobs@spline.design](mailto:jobs@spline.design)

© 2026 - Spline, Inc.