Desarrollo del Sitio Web de eContent
Un encargo de desarrollo que convirtió un sitio limitado por la plataforma Wix en una experiencia interactiva reconocida por los Webby, construida alrededor de animación con scroll y motion design en Lottie.
Contenido
Resumen
El Desafío
Nuestro Enfoque
Tecnologías y Herramientas
Servicios
Sobre Este Proyecto
eContent es una empresa de creación de contenido y marketing digital especializada en ayudar a organizaciones de salud a conectar y construir relaciones con la comunidad hispana. Con oficinas en Nueva York, Miami y Dallas, la empresa atiende clientes en la intersección de la comunicación de salud y el marketing multicultural.
Cuando eContent se acercó a Menta, su sitio existente en Wix limitaba el nivel de interactividad y animación personalizada que su marca requería. El nuevo sitio necesitaba mostrar su portafolio, presentar a su equipo, y entregar una experiencia de scroll construida alrededor del movimiento y la interacción personalizada, sin depender de los frameworks visuales de las plataformas de video estándar.
Menta entregó un encargo de desarrollo web enfocado en animación avanzada de scroll, integración con la API de Vimeo para control de video personalizado, e implementación de un diseño animado basado en Lottie creado en colaboración con un estudio externo de motion graphics.
El Desafío
DESAFÍO 1
Video de Marca Sin UI Nativa del Reproductor
El diseño requería video embebido con control de volumen personalizado, sin mostrar la interfaz nativa de YouTube o Vimeo. Webflow no tiene soporte nativo para este nivel de control de video, requiriendo una solución técnica completamente personalizada para mantener la integridad visual del sitio.
DESAFÍO 2
Animaciones de Scroll Horizontal Sincronizadas
Una sección clave presenta un layout de scroll horizontal con tres segmentos, cada uno requiriendo animaciones separadas activadas por scroll y sincronizadas con la posición del usuario en la página. Coordinar múltiples líneas de tiempo de animación dentro de un contenedor horizontal es técnicamente complejo en Webflow.
DESAFÍO 3
Diseño Animado Personalizado Multi-Elemento
El cliente proveyó un diseño vectorial estático con cuatro elementos animados distintos que necesitaban traducirse a movimiento activado por scroll. Esto requirió colaboración con un estudio externo de motion graphics e implementación técnica precisa dentro del sistema de interacciones de Webflow.
Nuestro Enfoque
Solución 1
API de Vimeo con Control de Volumen Personalizado
El video se embebió vía Vimeo y se controló a través de la API del Reproductor de Vimeo con JavaScript personalizado. Esto habilitó el control de volumen y la gestión de reproducción sin mostrar ningún elemento de interfaz de Vimeo, manteniendo la experiencia visual totalmente alineada con el sistema de diseño del sitio.
Solución 2
Scroll de Página Completa como Motor de Animación
En lugar de activar animaciones por posición de sección, se usó el scroll de toda la página como el único motor de animación. Esto permitió un cálculo preciso basado en porcentaje para cada segmento dentro de la sección de scroll horizontal, manteniendo las tres animaciones sincronizadas con la posición real del usuario.
Solución 3
Pipeline de After Effects a Lottie
Trabajando con el estudio de motion graphics Chakana Studio, los cuatro elementos animados se construyeron en After Effects y se exportaron a formato Lottie. Los archivos se integraron en Webflow con lógica de activación por scroll aplicada, entregando la experiencia animada personalizada en un formato liviano y listo para web.
Tecnologías y Herramientas
Cada proyecto requiere las herramientas correctas. Esto es lo que impulsó esta implementación.
Webflow
Figma
Lottie
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