Interactions 2.0 es el resultado de meses de investigación, pruebas de usuario, revisiones de diseño e ingenio técnico. Aunque ya estamos trabajando en mejoras y funciones adicionales, Interactions 2.0 ofrece más que suficiente para que crees animaciones e interacciones realmente innovadoras.
Para saber más sobre lo que ofrece IX2, echa un vistazo a:
- Nuevo curso: Animaciones e interacciones web
- Resumen de funciones de Interactions 2.0
- Página de lanzamiento de Interactions 2.0
Funciones de Interactions 2.0
Esto es lo que incluye el lanzamiento de hoy:
Animaciones basadas en línea de tiempo
Crear animaciones complejas y secuenciadas es más fácil que nunca con nuestro nuevo enfoque, que te permite animar varios elementos de tu sitio y gestionarlo todo en una única línea de tiempo unificada. Además de simplificar la creación inicial y las iteraciones, la nueva línea de tiempo hace que el mantenimiento de animaciones complejas sea mucho más rápido y fluido. También te permite previsualizar tu animación directamente en el panel de interacciones.
Interacciones de progreso de desplazamiento
Vincula animaciones y movimiento al progreso del desplazamiento para crear efectos fluidos y dinámicos como el paralaje, y previsualiza tus interacciones en vivo mientras diseñas.
Interacciones de posición del ratón
Vincula el movimiento a la posición del cursor en los ejes X e Y para llevar la interactividad de tus sitios a un nuevo nivel.
Visibilidad específica por punto de interrupción
Ahora puedes activar o desactivar interacciones y animaciones específicas en puntos de interrupción concretos para optimizar tu sitio para los visitantes de cualquier dispositivo.
Nuevos estilos para transformar
Interactions 2.0 también introduce un nuevo conjunto de propiedades de estilo para transformar, incluyendo el color de fondo, el color del borde y el color del texto.
Cómo afecta Interactions 2.0 a las interacciones existentes
Cualquier sitio que tenga configuradas interacciones antiguas siempre tendrá acceso al interruptor de interacciones heredadas, por lo que nunca perderás tu trabajo actual. Además, a menos que haya conflictos entre las interacciones antiguas y las nuevas (varias interacciones afectando al mismo elemento), ambos sistemas coexistirán pacíficamente, lo que significa que tus sitios pueden tener una mezcla de ambos mientras haces la transición entre sistemas.
Diseña interacciones y animaciones sin escribir código
Crea interacciones y animaciones complejas sin tener que tocar ni una línea de código.
¿Listo para aprender Interactions 2.0?
Nuestro nuevo curso de Webflow University te pondrá al día con Interactions 2.0 en aproximadamente una hora. Te guía a través de varias animaciones e interacciones increíbles, y ofrece consejos sobre cuándo y dónde incluirlas en tu sitio.
¿Qué sigue para Interactions 2.0?
Ya estamos trabajando a toda máquina en la creación de más funciones y mejoras para IX2.0, incluyendo:
Añadir interacciones a Símbolos, Listas de colección y Páginas de colección
En esta versión inicial, no podrás aplicar interacciones y animaciones a Símbolos, Listas de colección o elementos en una Página de colección, pero esto es lo primero en nuestra lista de mejoras.
Hacer que sea más fácil reutilizar animaciones
También estamos trabajando para que las animaciones sean más fáciles de reutilizar, de modo que cuando añadas una animación a una clase, todos los demás elementos con esa clase obtengan automáticamente la misma animación. Mientras tanto, puedes usar el panel de interacciones heredadas para aquellas que quieras reutilizar en un gran número de elementos.
Mejoras de rendimiento
Ya hemos incorporado amplias optimizaciones de rendimiento para que tus interacciones sean limpias y rápidas —por ejemplo, aplicando la propiedad will-change en el CSS fuente de tu sitio—, pero seguiremos buscando formas de optimizar el rendimiento, especialmente en sitios con muchas interacciones.
Controles de desplazamiento (scroll offset)
También incorporaremos soporte para controles de desplazamiento, lo que te permitirá definir con precisión cuándo comienzan tus interacciones basadas en el scroll.
Biblioteca de "efectos rápidos"
Por último, planeamos crear una biblioteca de "efectos rápidos" —como aparecer y subir, desaparecer, énfasis y otros patrones de animación comunes— para acelerar drásticamente tu trabajo de diseño de interacciones.
¡Estamos deseando ver lo que creas! Asegúrate de compartir tus creaciones en Twitter usando el hashtag #WebflowIX2.
