Cumbre Outdoor lanzaba una nueva línea y quería una experiencia memorable, con mucho movimiento, pero sin que el sitio se volviera pesado y lento.
El reto
Lograr una landing con motion de alto impacto que cargara rápido incluso en móviles con conexión limitada, y que respetara a quienes prefieren menos animación.
La solución
Usamos animaciones basadas solo en transform y opacity, scroll suave con Lenis y reveal
sincronizado con GSAP, todo con respaldo para prefers-reduced-motion.
- Hero con narrativa scroll-driven.
- Imágenes optimizadas en AVIF/WebP y carga diferida.
- Animaciones que se desactivan para quien lo prefiere.
Decisiones técnicas clave
Para lograr el balance entre motion y rendimiento, tomamos decisiones específicas:
- Animaciones solo con
transformyopacity: estas propiedades las acelera la GPU, no sobrecargan el hilo principal del navegador y no provocan reflow. Todo el motion se siente fluido a 60fps incluso en móviles de gama media. - Lenis para scroll suave: reemplazamos el scroll nativo con una experiencia cinemática, sincronizada con GSAP y ScrollTrigger para que los elementos aparezcan exactamente cuando el usuario los mira.
- Respeto por
prefers-reduced-motion: detectamos la preferencia del usuario y desactivamos automáticamente las animaciones, garantizando accesibilidad sin fricción.
Resultados
La campaña de lanzamiento convirtió muy por sobre lo esperado, con métricas de rendimiento de primer nivel: un sitio espectacular y rapidísimo. El LCP de 1.2s y el CLS de 0.01 demuestran que el motion de alto impacto no está reñido con la velocidad.
