Antes de que mi carrera saltara al desarrollo, hice un montón de trabajo de gráficos en movimiento en After Effects. Pero incluso con ese trasfondo, todavía me resultaba bastante desconcertante animar en la web.
Los gráficos de video se diseñan dentro de una proporción específica y luego se exportan. ¡Hecho! Pero no hay ninguna "configuración de exportación" en la web. Simplemente lanzamos 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! ¿Cuál es la mejor manera de abordar la animación en la web salvaje salvaje? Vamos a cubrir 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?
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 en el que se debe escalar una animación y evitar que pierda el esfuerzo.
Este es un gran consejo. A 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:
- Fijo: Animaciones para elementos como íconos o cargadores que conservan 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.
- Fluido: Animaciones que necesitan adaptarse con fluidez a través de diferentes dispositivos. La mayoría de las animaciones de diseño entran en esta categoría.
- Dirigido: Animaciones que son específicas para un determinado dispositivo o tamaño de pantalla, o que cambian sustancialmente en un determinado punto de interrupción, como animaciones solo de escritorio o interacciones que dependen de la interacción específica del dispositivo, como tocar o pasar el mouse.
Las animaciones fluidas y dirigidas requieren diferentes formas de pensar y soluciones. Vamos a ver…
Animación fluida
As andy campana dice: Sea el mentor del navegador, no su microadministrador: proporcione al navegador algunas reglas y sugerencias sólidas, luego déjelo tomar las decisiones correctas para las personas que lo visitan.
(Aquí están las diapositivas de esa presentación).
La animación fluida se trata de dejar que el navegador haga el trabajo duro. Muchas animaciones se pueden ajustar fácilmente a diferentes contextos simplemente usando las unidades correctas desde el principio. Si cambia el tamaño de este bolígrafo, puede ver que la animación que usa unidades de ventana gráfica escala con fluidez a medida que el navegador se ajusta:
El cuadro morado incluso cambia de ancho en diferentes puntos de interrupción, pero como estamos usando porcentajes para moverlo, la animación también se escala.
Animar propiedades de diseño como left y top puede causar reflujos de diseño y animaciones nerviosas, por lo tanto, siempre que sea posible, apéguese a las transformaciones y la opacidad.
Sin embargo, no solo estamos limitados a estas unidades, echemos un vistazo a otras posibilidades.
Unidades SVG
Una de las cosas que me encantan de trabajar con SVG es que podemos usar unidades de usuario SVG para animaciones que responden de manera inmediata. La clave está en el nombre realmente... Escalable Gráfico vectorial. En SVG-land, todos los elementos se trazan en coordenadas específicas. El espacio SVG es como un trozo infinito de papel cuadriculado donde podemos organizar los elementos. los viewBox define las dimensiones del papel cuadriculado que podemos ver.
viewBox="0 0 100 50”En esta próxima demostración, nuestro SVG viewBox is 100 unidades de ancho y 50 unidades de altura. Esto significa que si animamos el elemento por 100 unidades a lo largo del eje x, siempre se moverá por 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 de un contenedor principal es un poco engañoso en HTML-land. Hasta ahora, teníamos que tomar el ancho de los padres con JavaScript, lo cual es bastante fácil cuando estás animando. from una posición transformada, pero un poco más complicada cuando estás animando 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, tendrá que ajustar manualmente esa posición. Desordenado… 🤔
Si ajusta los valores al cambiar el tamaño, recuerde rebote, o incluso activar la función después de que el navegador haya terminado de cambiar el tamaño. Los oyentes de cambio de tamaño activan una tonelada de eventos cada segundo, por lo que actualizar las propiedades en cada evento es mucho trabajo para el navegador.
¡Pero este aumento de velocidad de la animación pronto será cosa del pasado! Redoble de tambores por favor… 🥁
Unidades de contenedores! Cosas preciosas. En el momento en que escribo esto, solo funcionan en Chrome y Safari, pero tal vez para cuando leas esto, también tendremos Firefox. Míralos en acción en esta próxima demostración. ¡Mira cómo se van esos muchachitos! ¿No es emocionante esa animación que es relativa a los elementos principales?
Los datos de soporte de este navegador son de Puedo usar, que tiene más detalles. Un número indica que el navegador admite la función en esa versión y en adelante.
Ordenador de sobremesa
| Chrome | Firefox | IE | Southern Implants | Safari |
|---|---|---|---|---|
| 105 | No | No | 105 | 16.0 |
Móvil / Tableta
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 106 | No | 106 | 16.0 |
Transiciones de diseño fluidas con FLIP
Como mencionamos anteriormente, en SVG-land, cada elemento está cuidadosamente colocado en una cuadrícula y es muy fácil moverse de manera receptiva. En HTML-land es mucho más complejo. Para crear diseños receptivos, utilizamos varios métodos de posicionamiento y sistemas de diseño diferentes. Una de las principales dificultades de animar en la web es que bastante de los cambios en el diseño son imposibles de animar. Tal vez un elemento necesita moverse de posición relative a fixed, o algunos hijos de un contenedor flexible deben barajarse 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?
Bueno. La técnica FLIP está aquí para salvar el día; nos permite animar fácilmente estas cosas imposibles. La premisa básica es:
- Nombre: Toma la posición inicial de los elementos involucrados en la transición.
- Apellido: Mueve los elementos y toma la posición final.
- Invertir: Calcule los cambios entre el primer y el último estado y aplique transformaciones para invertir los elementos a su posición original. Esto hace que parezca que los elementos todavía están en el la primera posición pero en realidad no lo son.
- Jugar: Eliminar las transformaciones invertidas y animar a su falsificado la primera estado al pasado estado.
¡Aquí hay una demostración usando el complemento FLIP de GSAP que hace todo el trabajo pesado por usted!
Si desea comprender un poco más sobre la implementación de vainilla, diríjase a Paul Lewis's del blog — él es el cerebro detrás de la técnica FLIP.
SVG de escalado fluido
Me tienes... esto no es realmente un consejo de animación. ¡Pero preparar el escenario correctamente 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 preserveAspectRatio, que es muy útil cuando la relación de aspecto del elemento SVG y el viewBox relación de aspecto son diferentes. Funciona de la misma manera que el background-position y background-size propiedades en CSS. La declaración se compone de un valor de alineación (background-position) Y un Conoce a or Rebanada referenciabackground-size).
En cuanto a esas referencias de Meet and Slice, slice es como background size: covery meet es como background-size: contain.
preserveAspectRatio="MidYMax slice"— Alinéelo con la mitad del eje x, la parte inferior del eje y y escale hacia arriba para cubrir toda la ventana gráfica.preserveAspectRatio="MinYMin meet"— Alinee a la izquierda del eje x, la parte superior del eje y, y aumente la escala manteniendo todo elviewBoxvisible.
Tom Miller lleva esto un paso más allá usando overflow: visible en CSS y un elemento contenedor para revelar "escenario a la izquierda" y "escenario a la derecha" manteniendo la altura restringida:
Para animaciones SVG receptivas, puede ser útil utilizar el cuadro de vista SVG para crear una vista que recorta y escala debajo de un cierto ancho del navegador, al mismo tiempo que revela más de la animación SVG a la derecha y a la izquierda cuando el navegador es más ancho que eso. límite. Podemos lograr esto agregando un desbordamiento visible en el SVG y combinándolo con un
max-heightenvoltorio para evitar que el SVG se escale demasiado verticalmente.
Lienzo de escalado fluido
Canvas es mucho más eficaz para animaciones complejas con un montón de partes móviles que animar SVG o HTML DOM, pero también es inherentemente más complejo. ¡Tienes que trabajar para obtener esas ganancias de rendimiento! A diferencia de SVG que tiene hermosas unidades de respuesta y se escala de forma inmediata, tiene que ser mandoneado y microgestionado un poco.
Me gusta configurar mi por lo que funciona de la misma manera que SVG (puede que sea parcial) con un sistema de unidades encantador para trabajar y una relación de aspecto fija. también debe volver a dibujarse cada vez que algo cambia, así que recuerde retrasar el redibujado hasta que el navegador termine de cambiar el tamaño o eliminar el rebote.
George Francis también armar esto pequeña biblioteca encantadora que le permite definir un lienzo viewBox atributo y preserveAspectRatio — ¡exactamente como SVG!
Animación dirigida
En ocasiones, 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 jugo de animación en cuanto a rendimiento que una máquina de escritorio. Por lo tanto, tiene sentido ofrecer animación reducida a los usuarios de dispositivos móviles, potencialmente incluso sin animación:
¡A veces, la mejor animación receptiva para dispositivos móviles no es ninguna animación! Para la 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 deberían mejorar el contenido, la navegación y las interacciones en lugar de retrasarlas. eric van holtz
Para hacer esto, podemos hacer uso de consultas de medios para apuntar a tamaños de ventana gráfica específicos, ¡tal como lo hacemos cuando estamos diseñando con CSS! Aquí hay una demostración simple que muestra una animación CSS que se maneja mediante consultas de medios y una animación GSAP que se maneja con gsap.matchMedia():
¡La simplicidad de esta demostración esconde un montón de magia! Las animaciones de JavaScript requieren un poco más de configuración y limpieza para que funcionen correctamente en un solo tamaño de pantalla específico. He visto horrores en el pasado donde la gente simplemente ocultaba la animación de la vista en CSS con opacity: 0, pero la animación sigue funcionando en segundo plano consumiendo recursos. 😱
Si el tamaño de la pantalla ya no coincide, la animación debe eliminarse 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 movimiento para evitar conflictos con otros estilos. Hasta hasta gsap.matchMedia(), este fue un proceso complicado. Tuvimos que hacer un seguimiento de cada animación y administrar todo esto manualmente.
gsap.matchMedia() en su lugar, le permite meter fácilmente su código de animación en una función que solo se ejecuta cuando un determinado consulta de medios partidos. Luego, cuando ya no coincida, todas las animaciones GSAP y Activadores de desplazamiento en esa función se revierte automáticamente. La consulta de medios en la que aparecen las animaciones hace todo el trabajo duro por usted. ¡Está en GSAP 3.11.0 y es un cambio de juego!
No solo estamos limitados a los tamaños de pantalla. Hay un toneladas de funciones de medios disponibles para enganchar!
(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, hemos agregado una verificación para prefers-reduced-motion para que cualquier usuario que encuentre la animación desorientada no se moleste por las cosas que pasan zumbando.
Y echa un vistazo a la otra demostración divertida de Tom Miller en la que usa la relación de aspecto del dispositivo para ajustar la animación:
Pensando fuera de la caja, más allá 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 enredarse un poco cuando no se tiene en cuenta eso. Si está creando estados de desplazamiento en CSS, puede usar el hover función de medios para probar si el usuario primario 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 desplazamiento. Personalmente, tuve muchos problemas en el pasado en los que cambiaba al diseño de escritorio> 1024 px, pero podría hacer detección táctil en JS, lo que provocó una falta de coincidencia donde el diseño era para escritorio, pero el JS era para dispositivos móviles. En estos días, me apoyo en el desplazamiento y el puntero para garantizar la paridad y manejo ipad Pros o superficies de Windows (que pueden cambiar el tipo de puntero dependiendo de si la cubierta está hacia abajo o no)
/* any touch device: */
(hover: none) and (pointer: coarse)
/* iPad Pro */
(hover: none) and (pointer: coarse) and (min-width: 1024px)Luego uniré mis consultas de diseño de CSS y mis consultas de JavaScript, por lo que estoy considerando el dispositivo de entrada como el factor principal. apoyadas por ancho, en lugar de lo contrario.
Sugerencias de ScrollTrigger
Si está utilizando GSAP Complemento ScrollTrigger, hay una pequeña utilidad útil a la que puede conectarse para discernir fácilmente las capacidades táctiles del dispositivo: ScrollTrigger.isTouch.
0– no tocar (solo puntero/ratón)1– solo táctil dispositivo (como un teléfono)2– el dispositivo puede aceptar contacto 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 borrada, puede terminar con animaciones rotas y valores obsoletos. Este es un problema común, pero que se resuelve fácilmente. Introduzca el cálculo que depende del tamaño de la pantalla en un valor funcional y establezca invalidateOnRefresh:true. De esa forma, ScrollTrigger volverá a calcular ese valor cuando el navegador cambie de tamaño.
¡Consejo adicional para nerds de GSAP!
En los dispositivos móviles, la barra de direcciones del navegador generalmente se muestra y se oculta a medida que se desplaza. Esto cuenta como un evento de cambio de tamaño y disparará un ScrollTrigger.refresh(). Esto podría no ser ideal ya que puede causar saltos en su animación. GSAP 3.10 agregado ignoreMobileResize. No afecta el comportamiento de la barra del navegador, pero evita ScrollTrigger.refresh() de disparar por pequeños cambios de tamaño verticales en dispositivos solo táctiles.
ScrollTrigger.config({
ignoreMobileResize: true
});Principios de movimiento
Pensé en dejarles algunas prácticas recomendadas para tener en cuenta al trabajar con movimiento en la web.
Distancia y relajación
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. buena animacion debe imitar el mundo real para sentirse creíble, y se necesita más tiempo en el mundo real para cubrir una distancia mayor. Preste atención a la distancia que recorre su animación y asegúrese de que la duración y la aceleración utilizadas tengan sentido en contexto con otras animaciones.
A menudo, también puede aplicar una aceleración más dramática 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, estamos haciendo uso de gsap.utils para sujetar el valor que obtenemos de la corriente window.innerWidth en un rango razonable, entonces estamos asignando ese número a una duración.
Espaciado y cantidad
Otra cosa a tener en cuenta es el espaciado y la cantidad de elementos en diferentes tamaños de pantalla. citando Steven Shaw:
Si tiene algún tipo de animación ambiental (parallax, nubes, árboles, confeti, decoraciones, etc.) espaciada alrededor de la ventana, asegúrese de que escalan y/o ajustan la cantidad según el tamaño de la pantalla. Las pantallas grandes probablemente necesiten más elementos repartidos por todas partes, mientras que las pantallas pequeñas solo necesitan unos pocos para lograr el mismo efecto.
Me encanta como Opher Vishnia piensa en la animación como un escenario. Agregar y quitar elementos no tiene que ser solo una formalidad, puede ser parte de la coreografía general.
Al diseñar animaciones receptivas, el desafío no es cómo meter el mismo contenido en la ventana gráfica para que "encaje", sino cómo seleccionar el conjunto de contenido existente para que comunique la misma intención. Eso significa hacer una elección consciente de qué piezas de contenido agregar y cuáles eliminar. Por lo general, en el mundo de la animación, las cosas no aparecen o desaparecen del cuadro. Tiene sentido pensar en elementos que entran o salen del "escenario", animando esa transición de una manera que tenga sentido visual y temático.
Y ese es el lote. Si tiene más sugerencias de animación receptivas, póngalas en la sección de comentarios. Si hay algo muy útil, ¡lo agregaré a este compendio de información!
Apéndice
Una nota más de Tom Miller mientras preparaba este artículo:
Probablemente llegue demasiado tarde con este consejo para su artículo de animaciones receptivas, pero recomiendo encarecidamente "finalizar todas las animaciones antes de construir". Actualmente estoy actualizando algunas animaciones del sitio con "versiones móviles". Gracias a Dios por
gsap.matchMedia… pero me hubiera gustado haber sabido que habría diseños/animaciones móviles separados desde el principio.
Creo que todos apreciamos que este consejo para "planificar con anticipación" llegó en el último minuto. Gracias, Tom, y la mejor de las suertes con esas modificaciones.
