Animaciones receptivas para cada tamaño de pantalla y dispositivo | trucos CSS

Antes de que mi carrera saltara al desarrollo, hice un montón de gráficos en movimiento en After Effects. Pero incluso con esa experiencia, todavía encontré la animación web bastante confusa.

Los gráficos de video se proyectan en una relación de aspecto específica y luego se exportan. ¡Listo! Pero no hay ninguna "configuración de exportación" en la web. Simplemente enviamos el código al mundo y nuestras animaciones tienen que adaptarse a cualquier dispositivo en el que aterricen.

¡Así que hablemos de animación receptiva! ¿Cómo abordar mejor la animación en la web salvaje salvaje? Veremos algunos enfoques generales, algunos consejos específicos de GSAP y algunos principios de movimiento. Comencemos con un poco de encuadre…

¿Cómo se utilizará esta animación?

El artículo de Zach Saucier sobre animación receptiva recomienda dar un paso atrás para pensar en el resultado final antes de saltar al código.

¿La animación será un módulo que se repite en varias partes de su aplicación? ¿Necesita escalar en absoluto? Tener esto en cuenta puede ayudar a determinar el método por el cual se debe escalar la animación y ahorrarle esfuerzo.

este es un gran consejo enorme parte del diseño de animación receptiva es saber si esa animación necesita escalar y cómo, y luego elegir el enfoque correcto desde el principio.

La mayoría de las animaciones se dividen en las siguientes categorías:

• Fijado: Animaciones para cosas como íconos o cargadores que mantienen el mismo tamaño y relación de aspecto en todos los dispositivos. ¡Nada de qué preocuparse aquí! Codifique algunos valores de píxeles allí y continúe con su día.
• líquido: Animaciones que deben adaptarse sin problemas a diferentes dispositivos. La mayoría de las animaciones de diseño entran en esta categoría.
• Dirigido: Animaciones que son específicas de un dispositivo o tamaño de pantalla en particular, o que cambian significativamente en un punto de interrupción en particular, como animaciones solo de escritorio o interacciones que se basan en una interacción específica del dispositivo, como tocar o mantener presionado.

Las animaciones suaves y con un propósito requieren diferentes formas de pensar y tomar decisiones. Vamos a ver…

Animación suave

Me gusta andy campana dice: Sea el mentor del navegador, no su microadministrador: proporcione al navegador algunas reglas y consejos sólidos, luego déjelo tomar las decisiones correctas para las personas que lo visitan. (Ellos están aquí las diapositivas de esta presentación).

La animación suave se trata de dejar que el navegador haga el trabajo pesado. Muchas animaciones se pueden adaptar fácilmente a diferentes contextos simplemente usando las unidades correctas desde el principio. Si cambia el tamaño de este lápiz, puede ver que la animación utiliza unidades de ventana gráfica se escala sin problemas a medida que el navegador se ajusta:

El cuadro morado incluso cambia de ancho en diferentes puntos de interrupción, pero dado que usamos porcentajes para moverlo, la animación también se escala con él.

Animar propiedades de diseño como left y top puede causar el cambio de formato del diseño y la animación nerviosa, así que apéguese a las transformaciones y la opacidad siempre que sea posible.

Sin embargo, no estamos limitados a estas unidades: veamos otras opciones.

Unidades SVG

Una de las cosas que me encantan de trabajar con SVG es que podemos usar unidades de animación personalizadas de SVG que reaccionan de inmediato. La clave realmente está en el nombre - Escalable Gráficos vectoriales. En SVG-land, todos los elementos se dibujan en coordenadas específicas. El espacio SVG es como una hoja interminable de papel cuadriculado donde podemos organizar los elementos. viewBox define las dimensiones del papel cuadriculado que podemos ver.

viewBox="0 0 100 50”

En esta próxima demostración, nuestro SVG viewBox es 100 unidades de ancho y 50 unidades de altura. Esto significa que si animamos el elemento con 100 unidades en el eje x, siempre se moverá todo el ancho de su SVG principal, sin importar cuán grande o pequeño sea ese SVG. Cambia el tamaño de la demostración para verla.

Animar un elemento secundario en función del ancho del contenedor principal es un pequeño truco en HTML-land. Hasta ahora, teníamos que capturar el ancho del elemento principal con JavaScript, lo cual es bastante fácil cuando estás animando. from posición transformada pero ligeramente más estacionaria al animar to en algún lugar, como se puede ver en la siguiente demostración. Si su punto final es una posición transformada y cambia el tamaño de la pantalla, deberá ajustar manualmente esa posición. Desordenado... 🤔

Si ajusta los valores al cambiar el tamaño, recuerde reboteo incluso activar la función después de que el navegador haya terminado de cambiar el tamaño. Cambiar el tamaño de los oyentes activa múltiples eventos cada segundo, por lo que actualizar las propiedades para cada evento es mucho trabajo para el navegador.

¡Pero ese tope de velocidad de dibujos animados pronto será cosa del pasado! Tambor por favor... 🥁

Después de casi 15 años como una función muy solicitada (¿imposible?), ¡las consultas basadas en el tamaño y las unidades de contenedor se han entregado tanto en Chrome/Edge 105 como en Safari 16! Firefox no se queda atrás.

(también: ¡hay un prototipo de solicitudes de estilo!)https://t.co/A2zgd9l4FC

— Mía (@TerribleMia) 15 de septiembre de 2022

Unidades de contenedores! cosas maravillosas Al momento de escribir esto, solo funcionan en Chrome y Safari, pero tal vez para cuando estés leyendo esto, tendremos Firefox. Véalos en acción en esta próxima demostración. ¡Mira a estos pequeños, vamos! ¿No es emocionante, la animación que es relativa a los elementos principales?

Transiciones de diseño suaves con FLIP

Como mencionamos anteriormente, en SVG-land, cada elemento está perfectamente dispuesto en una sola cuadrícula y es muy fácil moverse de forma receptiva. En HTML-land, es mucho más complicado. Para crear diseños receptivos, usamos varios métodos de posicionamiento y sistemas de diseño diferentes. Una de las principales dificultades con la animación web es que mucho los cambios de diseño no se pueden animar. Tal vez un elemento necesita ser movido fuera de posición relative a fixedo algunos elementos secundarios de un contenedor flexible deben reposicionarse suavemente alrededor de la ventana gráfica. Tal vez un elemento incluso deba volver a ser padre y moverse a una posición completamente nueva en el DOM.

Difícil, ¿eh?

F. La técnica FLIP está aquí para salvar el día; nos permite animar fácilmente estas cosas imposibles. La premisa básica es:

• Primero: Toma la posición inicial de los elementos involucrados en la transición.
• Ultimo: Mueve los elementos y toma la posición final.
• Rotación: calcule los cambios entre el primer y el último estado y aplique transformaciones para devolver los elementos a su posición original. Esto hace que parezca que los artículos todavía están en el primero posición, pero en realidad no lo son.
• Tocar: Eliminar transformaciones invertidas y animarlas falso primero estado a ultimo condición.

¡Aquí hay una demostración usando el complemento FLIP de GSAP, que hace todo el trabajo duro por usted!

Si quiere saber un poco más sobre la implementación de vainilla, vaya a Paul Lewis entrada en el blog — él es el cerebro detrás de la técnica FLIP.

Escalado suave de SVG

Me tienes... no lo es De Verdad consejo de animación. ¡Pero la configuración adecuada de la escena es imprescindible para una buena animación! SVG se escala muy bien de forma predeterminada, pero podemos controlar cómo se escala aún más con el preserveAspectRatiolo cual es muy conveniente cuando la relación de aspecto del elemento SVG y viewBox las proporciones son diferentes. Funciona casi de la misma manera que background-position y background-size propiedades en CSS. La declaración consta de un valor de alineación (background-position) y un Reunión o Rebanado referencia (background-size).

En cuanto a las referencias de Meet and Slice, slice es como background size: covery meet es como background-size: contain.

• preserveAspectRatio="MidYMax slice" — Alinear con la mitad del eje x, la parte inferior del eje y y escalar para cubrir toda la ventana gráfica.
• preserveAspectRatio="MinYMin meet" — Alinear a la izquierda en el eje x, arriba en el eje y y escalar hacia arriba, manteniendo todo viewBox visible.

tom molinero lleva esto un paso más allá usando overflow: visible en CSS y un elemento contenedor para revelar "escena izquierda" y "escena derecha" manteniendo la altura limitada:

Para animaciones SVG receptivas, puede ser conveniente usar la ventana gráfica SVG para crear una vista que recorte y escale por debajo de un cierto ancho del navegador, mientras revela más de la animación SVG a la derecha y a la izquierda cuando el navegador es más ancho que eso. Podemos lograr esto agregando un desbordamiento visible en el SVG y concatenándolo con el max-height envoltorio para evitar que el SVG se escale demasiado verticalmente.

Lienzo con escala suave

El lienzo es mucho más eficiente para animaciones complejas. mucho de partes móviles que la animación SVG o HTML DOM, pero también es inherentemente más complejo. ¡Tienes que trabajar para obtener esas ganancias de productividad! A diferencia de SVG, que tiene maravillosos módulos adaptables y escalables listos para usar, <canvas> hay que gestionarlo y gestionarlo un poco.

me gusta montar el mio <canvas> por lo que funciona más o menos igual que SVG (podría ser parcial) con un hermoso sistema de unidades para trabajar y una relación de aspecto fija. <canvas> también debe volver a dibujarse cada vez que algo cambie, así que asegúrese de retrasar el redibujado hasta que el navegador termine de cambiar el tamaño o rebote.

jorge francisco recoger eso también pequeña biblioteca encantadora que tu le permite definir un lienzo viewBox atributo y preserveAspectRatio ¡Al igual que SVG!

Animación con propósito

A veces, es posible que deba adoptar un enfoque menos fluido y más directo para su animación. Los dispositivos móviles tienen mucho menos espacio y menos rendimiento de animación que las máquinas de escritorio. Por lo tanto, tiene sentido proporcionar animación reducida a los usuarios de dispositivos móviles, potencialmente incluso sin animación:

¡A veces, la mejor animación de respuesta móvil no es ninguna animación! Para UX móvil, priorice permitir que el usuario consuma contenido rápidamente en lugar de esperar a que terminen las animaciones. Las animaciones móviles deben mejorar el contenido, la navegación y las interacciones, no ralentizarlas. eric van holtz

Para hacer esto, podemos usar consultas de medios para apuntar a tamaños de ventana gráfica específicos, ¡tal como lo hacemos cuando diseñamos con CSS! Aquí hay una demostración simple que muestra la animación CSS manejada usando consultas de medios y la animación GSAP manejada con gsap.matchMedia():

¡La simplicidad de esta demostración esconde mucha magia! Las animaciones de JavaScript requieren un poco más de configuración y limpieza para funcionar correctamente en un solo tamaño de pantalla específico. He visto horrores en el pasado donde las personas simplemente ocultan la animación de una vista en CSS con opacity: 0pero la animación aún se ejecuta en segundo plano usando recursos. 😱

Si el tamaño de la pantalla ya no coincide, la animación debe destruirse y liberarse para la recolección de basura, y los elementos afectados por la animación deben eliminarse de cualquier estilo en línea introducido por el movimiento para evitar conflictos con otros estilos. a gsap.matchMedia()fue un proceso difícil. Tuvimos que rastrear cada animación y administrarlo todo manualmente.

gsap.matchMedia() en cambio, le permite meter fácilmente su código de animación en una función que se ejecuta solo cuando se especifica consulta de los medios Luego, cuando ya no coincida, todas las animaciones GSAP y Activadores de desplazamiento en esta función se devuelven automáticamente. La consulta de medios donde aparecen las animaciones hace todo el trabajo pesado por ti. ¡Está en GSAP 3.11.0 y es un cambio de juego!

Tampoco estamos limitados por el tamaño de la pantalla. ¡Hay muchas funciones de medios que puede usar!

(prefers-reduced-motion) /* find out if the user would prefer less animation */

(orientation: portrait) /* check the user's device orientation */

(max-resolution: 300dpi) /* check the pixel density of the device */

En la siguiente demostración, agregamos un cheque para prefers-reduced-motion por lo que cualquier usuario que encuentre la animación desorientada no se molestará por las cosas.

Y echa un vistazo a la otra demostración divertida de Tom Miller en la que usa las proporciones del dispositivo para ajustar la animación:

Pensando fuera de la caja, fuera de los tamaños de pantalla

Hay más en pensar en la animación receptiva que solo los tamaños de pantalla. Diferentes dispositivos permiten diferentes interacciones y es fácil confundirse cuando no se tiene esto en cuenta. Si está creando estados de espera en CSS, puede usar hover función multimedia para comprobar si el usuario primario un mecanismo de entrada puede flotar sobre los elementos.

@media (hover: hover) {
 /* CSS hover state here */
}

Algunos consejos de Jake Whiteley:

Muchas veces basamos nuestras animaciones en el ancho del navegador, asumiendo ingenuamente que los usuarios de escritorio quieren estados de espera. Personalmente, tuve muchos problemas en el pasado en los que cambiaba a un diseño de escritorio de> 1024 px pero podía detectar en JS, lo que resultaba en una falta de coincidencia donde el diseño era para escritorio pero JS era para dispositivos móviles. En estos días, confío en el cursor y el puntero para proporcionar paridad y manejar las superficies de ipad Pro o Windows (que pueden cambiar el tipo de puntero dependiendo de si la cubierta está apagada o no)

/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)

A continuación, fusionaré mis solicitudes de diseño de CSS y mis solicitudes de JavaScript, por lo que considero que el dispositivo de entrada es un factor importante mantenido de ancho, no al revés.

Consejos para ScrollTrigger

Si utiliza GSAP Complemento ScrollTriggerhay una pequeña utilidad útil que puede conectar para reconocer fácilmente las capacidades táctiles del dispositivo: ScrollTrigger.isTouch.

• 0 – No tocar (solo puntero/ratón)
• 1 – con solo un toque dispositivo (como un teléfono)
• 2 – el dispositivo puede aceptar tocar entrada y Puntero del ratón (como las tabletas de Windows)

if (ScrollTrigger.isTouch) {
  // any touch-capable device...
}

// or get more specific: 
if (ScrollTrigger.isTouch === 1) {
  // touch-only device
}

Otro consejo para la animación sensible activada por desplazamiento...

La siguiente demostración a continuación mueve una galería de imágenes horizontalmente, pero el ancho cambia según el tamaño de la pantalla. Si cambia el tamaño de la pantalla cuando está a la mitad de una animación, puede obtener animaciones rotas y valores obsoletos. Este es un problema común, pero que se resuelve fácilmente. Agregue el cálculo que depende del tamaño de la pantalla en un valor de función y configure invalidateOnRefresh:trueDe esta forma, ScrollTrigger volverá a calcular este valor cuando el navegador cambie de tamaño.

¡Consejo extra para expertos en GSAP!

En dispositivos móviles, la dirección una barra del navegador generalmente se muestra y se oculta a medida que se desplaza. Esto se considera un evento de cambio de tamaño y activará ScrollTrigger.refresh()Esto puede no ser ideal ya que puede causar saltos en su animación. Añadido GSAP 3.10 ignoreMobileResizeEsto no afecta el comportamiento de la barra del navegador, pero evita ScrollTrigger.refresh() de tiro para pequeños cambios de tamaño verticales en dispositivos solo táctiles.

ScrollTrigger.config({
  ignoreMobileResize: true
});

Principios del movimiento

Pensé en dejarles algunas prácticas recomendadas para tener en cuenta al trabajar con el tráfico web.

Distancia y alivio

Una cosa pequeña pero importante que es fácil de olvidar con la animación receptiva es la relación entre la velocidad, el impulso y la distancia. Una buena animación necesita imitar el mundo real para sentirse creíble, y en el mundo real lleva más tiempo recorrer una distancia mayor. Preste atención a la distancia que recorre su animación y asegúrese de que las duraciones y los fundidos utilizados tengan sentido en el contexto de otras animaciones.

A menudo, también puede aplicar un relieve más dramático a los elementos con más recorrido para mostrar el mayor impulso:

Para ciertos casos de uso, puede ser útil ajustar la duración de forma más dinámica en función del ancho de la pantalla. En esta próxima demostración, usamos gsap.utils para limitar el valor que obtenemos de la corriente window.innerWidth dentro de un rango razonable, luego asignamos ese número a una duración.

Distancia y cantidad

Otra cosa a considerar es el espaciado y la cantidad de elementos en diferentes tamaños de pantalla. Esteban Shaw:

Si tiene algún tipo de animación ambiental (paralaje, nubes, árboles, confeti, decoraciones, etc.) que se coloca alrededor de la ventana, asegúrese de escalar y/o ajustar la cantidad según el tamaño de la pantalla. Las pantallas grandes probablemente necesiten más elementos dispersos, mientras que las pantallas pequeñas solo necesitan unos pocos para lograr el mismo efecto.

me encanta como Ofer cereza piensa en la animación como una escena. Agregar y quitar elementos no tiene por qué ser una mera formalidad, puede ser parte de la coreografía general.

Al diseñar animaciones receptivas, el desafío no es cómo incluir el mismo contenido en la ventana gráfica para que "encaje", sino cómo organizar el conjunto de contenido existente para que transmita la misma intención. Esto significa tomar decisiones conscientes sobre qué piezas de contenido agregar y cuáles eliminar. Por lo general, en el mundo de la animación, las cosas no saltan o se salen del marco. Tiene sentido pensar en los elementos como entrando o saliendo de la "escena", animando esa transición de una manera que tenga sentido visual y temático.

Y eso es mucho. Si tiene más consejos de animación receptivos, déjelos en la sección de comentarios. ¡Si hay algo extremadamente útil, lo agregaré a este compendio de información!

Suplemento

Otra nota de tom molinero mientras preparaba este artículo:

Probablemente llegué tarde con este consejo para su artículo sobre Animaciones receptivas, pero recomiendo encarecidamente "finalizar todas las animaciones antes de construir". Actualmente estoy remodelando algunas animaciones en el sitio con "versiones móviles". gracias a dios que gsap.matchMedia… pero me gustaría que supiéramos que habría diseños/animaciones móviles separados desde el principio.

Creo que todos apreciamos que este consejo de "planear con anticipación" haya llegado en el último minuto. Gracias, Tom, y buena suerte con estas remodelaciones.