Sitio Web de Chakana Studio
Una construcción personalizada en Webflow para un estudio de animación nominado a los Emmy, enfocada en mostrar trabajo de motion de alta calidad, con interacciones de scroll-snap y animaciones Lottie optimizadas.
Contenido
Resumen
El Desafío
Nuestro Enfoque
Tecnologías y Herramientas
Servicios
Sobre Este Proyecto
Chakana Studio es un estudio de animación y post-producción con sede en Nueva York que colabora con artistas digitales globalmente y acompaña a los clientes desde el desarrollo de concepto hasta la edición final. Cofundado por Jeffrey Carrillo (Director Creativo) y Mishell Cárdenas (Animadora y Productora Principal), el estudio opera entre Nueva York y los Andes, con un cuerpo de trabajo que obtuvo una nominación en los 64° Premios Emmy Anuales de Nueva York en 2021 por un anuncio de servicio público producido en colaboración con eContent.
Cuando Chakana se acercó a Menta, necesitaban un sitio web donde el trabajo mismo llevara la experiencia. El brief de su equipo de diseño interno pedía un sitio visualmente intenso capaz de alojar un volumen sustancial de animaciones, videos y piezas de motion 2D sin degradar la calidad o el rendimiento de la página. La sección de inicio en particular requería un comportamiento de scroll controlado con precisión para encuadrar cada proyecto secuencialmente.
Menta entregó un encargo de desarrollo web enfocado implementando la dirección visual existente de Chakana en Webflow, con tres construcciones técnicas centrales: un pipeline multimedia optimizado que equilibra peso de archivo y calidad entre formatos de video, Lottie y GIF; una interacción de scroll-snap personalizada para desktop en la sección de inicio; y un pipeline de producción de After Effects a Lottie reconstruido sin dependencias de plugins para garantizar una exportación limpia.
El Desafío
DESAFÍO 1
Volumen Multimedia Sin Pérdida de Calidad
El portafolio de Chakana depende de la fidelidad visual, pero su librería de animaciones 2D y motion graphics significaba que el sitio tenía que manejar un gran volumen de assets de video, Lottie y GIF manteniendo tiempos de carga aceptables. Sin una optimización cuidadosa de assets, el sitio habría comprometido las animaciones por las que Chakana es conocido, o habría comprometido la experiencia de usuario con tiempos de carga largos.
DESAFÍO 2
Scroll-Snap de Desktop en la Sección de Inicio
La sección de inicio requería una presentación sección por sección donde cada bloque encaja completamente en la vista a medida que el usuario hace scroll, sin estados parciales entre secciones. Webflow no incluye este comportamiento de forma nativa, e implementarlo sin entrar en conflicto con el comportamiento de scroll natural en tablet y mobile requirió un enfoque técnico deliberado.
DESAFÍO 3
Exportación de After Effects a Lottie con Dependencias de Plugins
Varias de las animaciones fuente de Chakana se construyeron en After Effects usando plugins de terceros. Estos plugins no son compatibles con Bodymovin, la herramienta de exportación estándar de Lottie, lo que significaba que las animaciones no podían exportarse limpiamente sin reconstruir partes de ellas desde el origen.
Nuestro Enfoque
Solución 1
Pipeline de Exportación Multi-Formato Optimizado
Cada asset se procesó a través de pruebas repetidas de exportación en distintos formatos y ajustes de compresión hasta encontrar el equilibrio correcto entre fidelidad visual y peso de archivo. Los archivos Lottie se priorizaron donde fue posible por su naturaleza liviana, los GIF se reservaron para loops cortos, y el video completo se usó selectivamente. El resultado es un sitio que carga a velocidades aceptables mientras preserva la calidad de la que depende la reputación del estudio.
Solución 2
CSS Scroll-Snap Dirigido a Desktop
Se introdujo código personalizado para aplicar el comportamiento de scroll-snap exclusivamente en viewports de desktop. El contenido de la sección de inicio se estructuró para acomodar este layout restringido, mientras que los breakpoints de tablet y mobile conservaron el scroll natural. El resultado preservó la presentación cinemática buscada en desktop sin forzar un layout que se degradara en pantallas más pequeñas.
Solución 3
Reconstrucción de Animación Sin Plugins
Trabajando con Chakana, las animaciones afectadas se revisaron directamente en After Effects para reemplazar los efectos basados en plugins con técnicas nativas de After Effects que exportan limpiamente a Lottie. Esto mantuvo el trabajo de animación consistente en todo el sitio y evitó el workaround de recurrir a video o GIF para secuencias que se beneficiaban del renderizado liviano de Lottie.
Tecnologías y Herramientas
Cada proyecto requiere las herramientas correctas. Esto es lo que impulsó esta implementación.
Webflow
Figma
Lottie
Adobe Creative Suite
Empecemos
¿Listo para dejar de perder negocios en la mesa?
60
+
Proyectos entregados
9
+
Países
Partner Certificado de Webflow
Honor de los Webby Awards
Seguimos un proceso estructurado de dos reuniones. Una evaluación honesta de tu presencia digital actual y un camino claro hacia adelante. Eso es todo.
Tiempo de respuesta típico: dentro de 12 horas hábiles