Recientemente adquirimos GreenSock Animation Platform (GSAP) y la hicimos totalmente gratuita para que todos puedan usarla, dando rienda suelta a nuevas dosis de inspiración y creatividad.
Para aprovechar este impulso, lanzamos el Webflow x GSAP Community Challenge, que animó a los diseñadores a crear con GSAP, tomarse libertades creativas y superar los límites de lo que esta herramienta puede hacer por ellos.
Durante cuatro semanas, propusimos cuatro retos a los diseñadores para poner a prueba sus habilidades y ampliar las fronteras de la animación. Echemos un vistazo a algunas de las propuestas creativas más destacadas de nuestros ganadores y finalistas.
Reto 1: Rompiendo los límites de la tipografía
El primer reto desafiaba a los diseñadores a crear una animación creativa que descompusiera o revelara texto; piensa en efectos de máquina de escribir o poesía revuelta.
Thomas Carré, un desarrollador creativo freelance especializado en interacciones y animaciones frontend, ganó este reto aportando humor a su creación, Hover Killer. Es un juego sobre la muerte de los efectos "hover", donde los usuarios escriben un texto que luego "matan" al pasar el ratón por encima, con efectos de sonido incluidos.
Al abordar el reto, Thomas se centró en la función SplitText de GSAP con un enfoque creativo novedoso. Para darle vida, construyó toda la estructura y el estilo en Webflow en un solo día y añadió un cargador para guiar a los usuarios a través de la experiencia.
La experiencia del cargador fue especialmente importante para enganchar a los usuarios desde el principio. Thomas añade: "Estoy orgulloso del pequeño momento de narrativa que ayuda a mantener a la gente interesada desde el primer segundo. Establece el tono, crea expectación y luego simplemente me dejé llevar con todas mis bromas privadas".
Aquí tienes un vistazo a cómo creó Hover Killer:
Otras propuestas que merece la pena ver son las de Isaac Farrow con Black Terminal y Kabarza con Nothing Is Original!
Reto 2: Jugando con la interactividad y el arrastre
Para el segundo reto, pedimos a los diseñadores que crearan una experiencia que implicara lanzar, girar, encajar o arrastrar elementos por la pantalla. Ilja van Eck, cofundador de la plataforma de diseño Osmo y diseñador y desarrollador Webflow freelance, ganó el reto combinando los plugins Draggable e Inertia en su divertido juego de cañones, Osmo Alt Text Minigame.
En el juego, el objetivo del usuario es hacer coincidir los textos alternativos con cuadros de imagen vacíos, pero con un giro: deben usar un cañón para disparar el texto alternativo hacia las cajas y revelar las imágenes correspondientes. El juego demuestra cómo los diseñadores pueden usar la tecnología de forma creativa para que la gente se interese por temas importantes, como la accesibilidad web. Esta propuesta ganó por su competencia técnica y por la idea en sí. Disparar acciones cuando los elementos se cruzan requiere una lógica ingeniosa.
Menciones honoríficas para este reto: Filip Zrnzevic con Audio Visualizer Experiment y Dennis Snellenberg con 404 Error Minigame
Reto 3: Transformando visuales en algo nuevo
El tercer reto requería que los diseñadores transformaran formas o dieran vida a dibujos lineales usando DrawSVG y MorphSVG. Youness Benammou, desarrollador Webflow freelance, y su hija de 16 años, Ambreen, colaboraron en su proyecto para reinventar el típico juego de memoria con su Mini Memory Game. En el juego, los usuarios deben emparejar cartas de objetos personalizados (como un trébol de cuatro hojas), animados con MorphSVG. Los usuarios pueden voltear las cartas para revelarlas y emparejarlas.
“Esta victoria es especialmente significativa porque trabajé en el proyecto con mi hija de 16 años, que aspira a ser diseñadora web”, dice Youness. “Compartir este momento con ella lo hace realmente especial”.
Este proyecto utiliza morphSVG para las animaciones de las formas. El equipo de GSAP votó por este trabajo, ya que requiere una preparación minuciosa de los recursos para lograr unas transformaciones tan fluidas.
Otras propuestas para este reto vinieron de Maria Karava con The core y Dennis Snellenberg con Logo Quiz
Reto 4: Cobrando impulso con la animación
El último reto animaba a los diseñadores a usar velocidad, aceleración y fricción. ¡Queríamos que fueran mucho más allá del típico confeti explosivo!
Dave Post, director de DevOps en la agencia creativa y digital Junction, creó un divertido juego interactivo al estilo Pong llamado CTRL ALT DELETE. Para ahorrar tiempo, aprovechó el modo Agente de Cursor y construyó un prototipo funcional en pocas horas. Luego, añadió interacciones con el plugin Physics2D de GSAP, rediseñó las cuadrículas de cambio de color, calibró el seguimiento manual y logró que el juego se sintiera fluido y preciso mediante curvas de aceleración.
Dave está especialmente orgulloso de la animación dinámica de la cuadrícula de píxeles y del control de la paleta mediante seguimiento manual. Estas dos funciones, una visual y otra experimental, representan lo que más le apasiona de la animación web: combinar un diseño audaz con una interactividad innovadora para crear una experiencia divertida y memorable.
Esto es especialmente cierto en la animación dinámica de la cuadrícula, que le da al juego su personalidad. Añade: "Cada vez que la pelota toca algo o se activa un bonus, la cuadrícula 'detona' en un estallido de color y movimiento. Como esas reacciones dependen de los eventos del juego en tiempo real, la pantalla nunca se ve igual dos veces, y la respuesta hace que cada intercambio sea mucho más dramático".
Al preguntarle por el control de la paleta mediante seguimiento manual, admite que fue lo que más tiempo le llevó perfeccionar. "Convertir la señal de la cámara web en un movimiento preciso y de baja latencia, incluyendo un paso de calibración rápida, permite a los jugadores dejar el teclado y controlar el juego con sutiles movimientos de muñeca. Es una interacción inusual para un clon de Pong en el navegador, y lograrlo en tan poco tiempo fue una verdadera victoria".
Otras menciones honoríficas de este reto fueron para Filip Zrnzevic con 8-Bit Snake Exploding Game y James Vreeken con PageInvader
Siguiendo con la exploración de proyectos creativos con GSAP
Más allá de los ganadores individuales, este desafío demostró el increíble talento de nuestra comunidad. Desde juegos centrados en la accesibilidad hasta experimentos de seguimiento manual, estos creadores dieron vida a sus ideas más ingeniosas usando GSAP.
Este reto es solo el comienzo. Mantente atento al próximo desafío de GSAP y, mientras tanto, mira todas las propuestas y explora los sitios web con GSAP creados por la comunidad de Webflow.
GSAP ahora es 100% gratuito
GSAP ahora es totalmente gratuito para toda la comunidad web, brindando a los desarrolladores más libertad para aprovechar todo el potencial del movimiento impulsado por GSAP.
