Sigue Desplazándote

Así que hola, soy Cassie. Soy una desarrolladora creativa. Me encantan los SVG y las animaciones web. Me gusta agregar un poco de diversión y fantasía a todo lo que creo en la web, y también me encanta enseñar a las personas cómo animar de la mejor manera en la web y cómo animar de manera eficiente.

Hoy vamos a hablar sobre las animaciones de desplazamiento. Compartiré algunas notas y consejos, tanto desde una perspectiva de experiencia de usuario como de código, porque ambos son igualmente importantes. Así que las animaciones de desplazamiento. Este puede ser un tema controvertido entre los profesionales web. Es un poco como el Marmite, a algunas personas les encantan y a otras no. Y eso se debe a que pueden tener un gran impacto y ser realmente geniales si se hacen correctamente, pero no hay nada peor que ir a un sitio para buscar rápidamente información y que te secuestren el desplazamiento o no poder leer el contenido que estás intentando leer porque se desvanece y anima mientras te desplazas hacia abajo.

Las animaciones de desplazamiento mal implementadas pueden ser realmente malas para el rendimiento. Pueden ser distractoras y a veces incluso pueden causar náuseas en personas con trastornos vestibulares. Con eso en mente, comenzaré esta charla con un principio de diseño de movimiento. Es una pequeña lección de experiencia de usuario para tener en cuenta mientras animas. Después de todo, con un gran poder viene una gran responsabilidad. Entonces, ese principio de diseño de movimiento es no distraer de la información relevante. La web es, después de todo, principalmente un sistema de información. Es un lugar para distribuir y compartir conocimiento. También es un lugar para ver fotos de gatos y gritarle a las personas que usan diferentes frameworks que tú. Pero es importante que, ya sea que el usuario esté buscando información o fotos de gatos, no nos interpongamos en su camino. En resumen, no todo necesita animarse al desplazarse.

Las animaciones de desplazamiento abarcan desde pequeñas interacciones de IU útiles hasta grandes experiencias de narración o `scrollytelling`. Pero todas tienen algo en común. Una buena animación respalda o añade al contenido. Tiene un propósito. Entonces, ¿cuáles son algunos buenos propósitos para las animaciones de desplazamiento? Uno bueno es proporcionar retroalimentación visual. A veces, la animación puede proporcionar información visual o información adicional que puede ser difícil de transmitir con palabras. Este es un caso de uso bastante común y un buen ejemplo de mi amigo Louis.

La barra en la parte superior se llena de color a medida que te desplazas para mostrar qué tan lejos estás en la página. Esta es una interacción realmente útil para publicaciones de blog o artículos y sería muy complicado intentar explicar a alguien con palabras qué tan lejos están en la página. A veces, esta información adicional puede ser más compleja. Puede tomar la forma de ilustraciones o incluso elementos interactivos en una narración interactiva.

También puedes usar animaciones activadas por desplazamiento para proporcionar dirección e intención. Puedes usar animaciones para guiar a un usuario por una página. Las animaciones activadas por desplazamiento pueden proporcionar interés visual y mantener la atención de las personas. Esta es una de mis animaciones de desplazamiento favoritas de todos los tiempos. Es simplemente un concepto muy bien ejecutado. Y vale la pena señalar que, sin el acento ilustrativo en la página, solo sería una larga lista de estadísticas, lo que podría hacer que las personas pierdan interés rápidamente, dependiendo de si están interesadas en las estadísticas o no. Pero la animación puede ayudar a mantener a las personas comprometidas. Y debido a que el desplazamiento implica interacción del usuario, cuando se hace correctamente, puede ser realmente inmersivo y divertido.

Realmente me encantan estas máscaras activadas por desplazamiento. Hacen que el sitio web se sienta casi como un juego, como si estuvieras buscando y descubriendo partes del sitio web. Especialmente me encanta el pie de página, que aparecerá en un segundo. Estos son algunos ejemplos. Supongo que ahora profundizaremos en cómo. ¿Cómo activamos animaciones al desplazarnos? Un pequeño descanso para el perro.

Lo primero es una emocionante próxima especificación de CSS, línea de tiempo de desplazamiento. Esta especificación, por lo que he visto, parece ser realmente útil para animaciones simples como la barra de progreso que mostré. Comienzas definiendo tus fotogramas clave como de costumbre en un bloque de fotogramas clave. Luego, después de eso, defines una línea de tiempo de desplazamiento. Incluyes un rango de tiempo en esto y al principio me pareció un poco confuso cuando lo vi por primera vez. Un segundo no es un rango de números, mapea el progreso del desplazamiento al progreso de la animación. Representa cuánto tiempo de animación debe pasar cuando nos desplazamos desde el inicio hasta el final en el contenedor. Un segundo representa un progreso del 100% desde el inicio hasta el final. Es un mapeo de 1 a 100%. Si solo quisieras que la mitad de la animación progrese para un desplazamiento completo, dirías 0.5. Y por último, hacemos referencia a los fotogramas clave en el elemento y luego establecemos la línea de tiempo de desplazamiento como el controlador de la animación. Es la última línea aquí donde ocurre toda la magia.

Entonces esto es realmente emocionante, y realmente me gusta una solución simple de CSS para animaciones pequeñas. Pero ahora mismo está megaexperimental. Actualmente está detrás de una bandera en Chrome, por lo que puedes probarlo y jugar con él, pero aún no puedes usarlo en sitios de producción.

Entonces, ¿qué más? ¿Cómo más podemos lograr animaciones de desplazamiento? En el mundo de JavaScript, que es lo que todos están buscando, tenemos el API de observador de intersección. No voy a profundizar en esto en detalle. Podría ser una charla completa en sí misma. Pero su fortaleza está en su nombre. Es realmente útil si necesitas observar un elemento y ver cuándo está a la vista. Por ejemplo, es muy útil para cosas como la carga perezosa de una imagen o alternar una clase de CSS activada y desactivada a medida que algo entra y sale de la vista.

Cada vez que lo he usado, lo cual ha sido bastante, he tenido que aprender la sintaxis desde cero y me ha resultado un poco confuso. Michelle Barker hizo esta GUI realmente práctica, que acabo de marcar ahora para cada vez que la use. Puedes ajustar estos valores aquí para obtener una representación visual del margen de raíz y el umbral, lo cual es muy útil. Pero ¿qué pasa si tienes animaciones más complejas? ¿Qué pasa si quieres activar secuencias de animaciones de desplazamiento más involucradas o tener más control y flexibilidad sobre si se reproducen en un solo sentido, en reversa o se reinician? ¿Cómo haríamos ese tipo de cosas?

Entonces aquí es donde entra Scroll Trigger. Scroll Trigger es un complemento de GreenSuck que te brinda un control realmente ridículo sobre las animaciones de desplazamiento. Si no has usado GreenSuck antes, es una biblioteca de animación en JavaScript súper potente. Se utiliza en toneladas de sitios web en todo Internet y te permite animar prácticamente cualquier cosa. HTML, Canvas, three.js, SVG, puedes hacerlo todo. También puedes secuenciar animaciones en líneas de tiempo, lo cual es increíblemente importante para animaciones más complejas.

He sido un gran defensor de GreenSuck durante mucho tiempo, tanto en los sitios que he creado como en los talleres que he impartido sobre animación SVG. Principalmente debido al destacado trabajo que han realizado para asegurarse de que las animaciones SVG se comporten de manera consistente en todos los navegadores. Esta es en realidad mi primera charla desde que comencé a trabajar para GreenSuck. Solía ​​comenzar todas mis entusiasmos diciendo que no me pagan por decir esto. Pero bueno, ahora trabajo allí. Como ya no puedes creerme, dejaré de hablar y podemos adentrarnos en algo de código. Aquí mismo, abramos este CodePen. Tenemos una imagen con un logotipo y aquí tenemos un pequeño tween de GreenSuck. También hemos cargado Scroll Trigger cuando queremos usarlo. Puedes pensar en un tween como el motor principal de la animación de GreenSuck. Es como un manipulador de propiedades de alto rendimiento. Es realmente agradable y simple.

Entonces, para animarlo cuando esté a la vista, agregamos un disparador de desplazamiento. En el panel de JavaScript, estoy cargando GreenSuck y el disparador de desplazamiento aquí. Y luego registrando el complemento. Para agregar el disparador de desplazamiento a nuestra animación, solo tenemos que decir cuál es nuestro elemento disparador. Esto significa que la animación comienza una vez que el logotipo entra en la ventana de visualización. Entonces, si nos desplazamos hacia abajo ahora, puedes ver que comienza cuando nos hemos desplazado hasta él. Eso es realmente genial, pero también es bastante simple, definitivamente queremos más control que esto. Entonces vamos a configurar el disparador de desplazamiento pasando un objeto en su lugar. Aún queremos que el disparador sea el elemento del logotipo, así que lo colocaremos allí. Pero podríamos pasar cualquier elemento, podríamos tener cualquier elemento como disparador. También vamos a establecer los marcadores en verdadero, para que podamos ver dónde están los puntos de inicio y finalización. Y puedes ver que esto acaba de agregar marcadores a la página. Y a medida que nos desplazamos hacia abajo, podemos ver que a medida que el disparador de inicio alcanza el marcador de inicio aquí, la animación se reproduce.

Ahora esto ya está comenzando un poco demasiado abajo, así que podemos cambiar esto cambiando dónde está la posición de inicio del marcador. Y esto es realmente intuitivo de cambiar. Podemos usar palabras, porcentajes o valores relativos. Podríamos decir que comience cuando la parte superior del logotipo llegue al 60% desde la parte superior de la ventana de visualización. Entonces verás que el marcador de inicio ha cambiado. Ahora está al 60% desde la parte superior de la ventana de visualización. Y a medida que nos desplazamos, alcanza y anima. Cambiemos el valor final para que sea cuando la parte inferior llegue al 40% desde la parte superior de la ventana de visualización. Entonces puedes ver que el valor final ha cambiado aquí. También puedes ver que la posición final no está afectando mucho ahora. Pero si agregamos scrubbing, la duración de la animación se ajustará a la distancia de desplazamiento. Entonces vamos a decir, scrub true. Y ahora, cuando se actualice, verás que frota la animación para esa distancia y luego se detiene. Y se reproducirá nuevamente a medida que te desplazas hacia abajo. Incluso podemos agregar un valor de duración a scrub para que la animación tome un poco de tiempo para ponerse al día con el desplazamiento.

Una vez más, esto es realmente intuitivo. Así que estamos diciendo un segundo. Y esto tomará un poco de tiempo para ponerse al día, lo que hace que las cosas se sientan un poco más suaves. Parece que se le ha aplicado un efecto de suavizado.

Otra fortaleza de Scroll Trigger es su sólido sistema de devolución de llamadas. Puedes ver los eventos que se activan aquí. Estamos cambiando el texto en estas funciones. Voy a abrir esto. Tenemos una función onEnter, onLeave, onEnterBack y onLeaveBack. Y simplemente estamos cambiando el texto. Puedes ver que se activan cuando salimos y volvemos a entrar.

También puedes ajustar cómo se maneja la animación en estos eventos utilizando acciones de alternancia. Así que si agregamos una pequeña animación aquí, vamos a girar la caja de nuevo, como lo hicimos la última vez. Y luego tenemos esta línea aquí llamada acciones de alternancia. Esto significa, reproduce la animación cuando entramos. Cuando salimos, pausa la animación. Cuando volvemos a entrar, reanúdala. Y luego restablécela cuando salimos de nuevo. Puedes ver que cuando se reproduce, se pausa allí. Vamos a reanudar cuando volvamos a entrar y luego restablecer cuando salgamos de nuevo. Puedes cambiar estas palabras por las que quieras, dentro de las limitaciones de las palabras que te hemos dado, obviamente. Podríamos decir revertir en lugar de reanudar. Y luego verás que gira hacia la derecha o gira hacia la izquierda en el camino hacia abajo porque la animación está en reversa. Esto es realmente útil para las animaciones de desplazamiento. Te brinda mucho control.

También puedes fijar elementos con ScrollTrigger. Hay PinTrue. También hay PinSpacing para que puedas elegir si se agrega espaciado a tus elementos debajo para evitar que se superpongan. En este ejemplo, tenemos un fijado en capas, por lo que no hay PinSpacing y estas diapositivas simplemente se desplazan por encima de las demás y se fijan, por lo que esto es realmente poderoso. Puedes configurar tus animaciones de la forma que desees.

Y, lo más importante, ScrollTrigger funciona con el comportamiento de desplazamiento nativo del navegador, por lo que no desplaza a Jack en absoluto e integra perfectamente con el desplazamiento nativo en todos los dispositivos. Y también es muy eficiente, por lo que los eventos de desplazamiento se activan con frecuencia y si se manejan de manera incorrecta, las animaciones de desplazamiento pueden convertir tu computadora portátil en una botella de agua caliente muy rápidamente, por lo que ScrollTrigger soluciona esto calculando previamente las posiciones de inicio y fin y luego las compara con la posición de desplazamiento. Por lo tanto, no está verificando constantemente los objetos, las cajas delimitadoras mientras te desplazas.

Si quieres echar un vistazo a algunas inspiraciones creativas, tenemos una muestra en CodePen, a la que he añadido un pequeño enlace aquí. Hay todo tipo de ejemplos increíbles en la muestra. Este es uno de mis favoritos. Y si creas algo realmente impresionante, lo añadiremos a la muestra también. Así que eso es un poco de inspiración para ti. Y también puedes consultar la documentación en GreenSock, en el sitio de GreenSock. La documentación está llena de videos, CodePens e información, todo tipo de cosas buenas. Así que si te quedas atascado, también tenemos unos foros realmente geniales. Son como una versión amigable de Stack Overflow, así que alguien podrá ayudarte.

Si tienes alguna pregunta, estaré en el chat. Ven y saluda y muchas gracias por tenerme aquí y disfruta del resto de la conferencia. Fue una charla increíble. Realmente la disfruté, espero que tú también. Así que, ¿puedes dejar algunos emojis de aplausos en el chat? Pero tenemos muchas preguntas. Tenemos algunas preguntas que llegaron y también lo que vamos a hacer es no solo tomar las preguntas que tienes para Cassie, sino que también vamos a ver las respuestas que tienes para Cassie a la pregunta que ella hizo, y ella preguntó, cuando podamos viajar nuevamente, ¿a dónde quieres ir? Y veamos los resultados. Podemos ver Japón y no voy a mentir, yo también puse Japón. Ese es uno de mis favoritos. Estoy súper emocionado. Cassie, ¿qué opinas de las respuestas? Um, sí. Yo, quiero decir, iría a Japón. Definitivamente. Ese es uno de mis lugares favoritos para ir, um, Disneyland. Sinceramente, también puse Disneyland. Mi amigo y yo tal vez, especialmente si has visto lo nuevo, um, Avengers, Oh, ¿se llama el campus de los Avengers? Eso es lo que se llama. Oh, eso es genial. Toda la sección, sí, soy fan de Marvel. No vamos a entrar en detalles.

También me gusta Islandia. Islandia es mi lugar favorito. Fui allí para mi 30 cumpleaños. Solo conseguí una pequeña cabaña de troncos. Fue lo mejor del mundo.

Oh, eso suena muy bien. Suena genial. Como unas vacaciones estupendas.

Me encanta la ambición de algunas personas en este chat, la luna. De acuerdo. Y sinceramente, sería genial. Si pudieras ir, si tuvieras un viaje gratis a la luna, ¿irías? Si Elon lo organizara, probablemente no. No confío en ese tipo.

No te culpo. No te culpo. Bueno, tal vez podrías hacer como Bezos y conseguirte un boleto para el espacio. Podemos hablar de eso en otro momento, pero sinceramente, disfruté mucho tu charla sobre el desplazamiento. Y creo que es una de esas cosas que nosotros, como desarrolladores, a veces damos por sentado lo complejo que puede llegar a ser. Me encanta cuando alguien dice que, um, cómo se llama de nuevo, CSS, solo como ejemplo, es como un océano donde, sí, puedes remar cerca de la orilla. Pero cuanto más te adentras, más profundidad tiene. Y sé que es interesante aprender esto, pero hemos recibido algunas preguntas. Así que las voy a revisar y te dejaré que las respondas.

Una de ellas es de Bartos y dice que si scroll timeline está disponible y la animación es lo suficientemente simple como para ser totalmente compatible con él, ¿GreenSock usaría CSS para mejorar el rendimiento o seguiría utilizando la implementación de scripts? Creo que esta es una pregunta de varias capas porque GreenSock sí utiliza CSS. GreenSock utiliza transformaciones CSS. Simplemente influye en el valor de esas transformaciones utilizando JavaScript. Así que aprovecha cosas que ya están presentes en la plataforma. No creo que GreenSock aproveche la línea de tiempo de desplazamiento porque hacemos las cosas de una manera ligeramente diferente. Pero sí, creo que si tienes una animación simple que puedes hacer con scroll timeline en el futuro, probablemente sería el mejor caso de uso.

Sí, me parece muy interesante. Una cosa sobre CSS es que a menudo hay diferentes formas de lograr el mismo efecto. Y creo que aquí es donde GreenSock dice: vamos a encargarnos de muchas cosas en segundo plano, para que no tengas que preocuparte por cómo lo estoy intentando hacer. Así que eso es realmente genial. Kevlar hizo una pregunta muy, creo que importante. Dijeron que las animaciones de desplazamiento son realmente impresionantes. Les encantan, pero ¿ves alguna desventaja en cuanto a la accesibilidad? Bueno, siempre hay compensaciones, creo, cuando estás animando cosas. Y creo que la mejor manera de abordar la animación es pensar en cuál es el propósito del sitio. Entonces, si el propósito del sitio, es transmitir contenido a las personas, como si fuera un sitio centrado en contenido serio y realmente necesitas preocuparte por accesibilidad. Digamos que es un sitio web universitario y tienes que preocuparte por que las personas se registren en gov.uk, probablemente no necesites animación. Si estás más enfocado en el aspecto visual de las cosas, entonces anima, pero anima de manera responsable, como tener preferencias de movimiento reducido, y cosas así. La única, como uno de los principales problemas, con la animación es no proporcionar alternativas de movimiento reducido. Así que si tienes eso cubierto, como muchas, muchas de las cuestiones se resuelven. Esa es mi nueva cita de CSS, anima, pero anima de manera responsable. Deberías poner eso en una camiseta, sinceramente. Y tenemos otra pregunta de Elvara, quien dice, ¿cómo abordarías una animación de desplazamiento automático? Animación de desplazamiento automático. Oh, desplazamiento. Sí, sí. Automático. Entonces, si solo estás hablando de una animación que avanza y parece que se está desplazando, pero no utiliza el desplazamiento nativo, entonces simplemente estarías considerando hacer un bucle de una línea de tiempo. Así que crearías una animación de línea de tiempo y luego la repetirías en bucle. Esto es algo que veo bastante a menudo, la gente piensa que las animaciones son desplazamiento cuando se están desplazando. Cuando en realidad no están desplazando, solo se están moviendo con un impulso similar, pero las animaciones de desplazamiento, cuando hablo de eso, utilizan el desplazamiento nativo del navegador. Así que sí. Tiene sentido. Una cosa que encuentro muy interesante y, sabes, sinceramente, como muchos desarrolladores de CSS, también son artistas. No solo son desarrolladores. Son capaces de crear ilusiones como has dicho, donde parece que se está desplazando.

Y luego el desplazamiento nativo real simplemente no está sucediendo, pero son tan talentosos en eso. Tengo una pregunta propia. ¿El scroll trigger hace desplazamiento suave? Entonces, el desplazamiento suave en este momento, la mayoría de las personas lo están implementando con una combinación de desplazamiento de locomotora y scroll trigger. Porque cuando se creó scroll trigger, en primer lugar, se creó para no hacer scroll jacking en absoluto. Simplemente se superpuso al desplazamiento nativo. Y resulta que hay bastante demanda de desplazamiento suave. Así que actualmente estamos investigando la creación de nuestra propia función de desplazamiento suave dentro de scroll trigger, pero funcionará sobre el desplazamiento nativo. No hará scroll jacking.

Genial. Genial. Y esta es una pregunta que acaba de llegar y es un poco tu opinión sobre la animación en la web y según tú, ¿qué papel debería desempeñar en el desarrollo web? Como acabas de mencionar, la gente debería animar, pero animar de manera responsable, ¿hay un límite en el que crees que las personas deberían tenerla o no tenerla, dónde debería estar en aplicaciones normales versus aplicaciones interactivas yenterprise apps. Creo que hay varios casos de uso diferentes para la animación. Creo que hay animaciones que ayudan a respaldar información y contenido. La animación ayuda a guiar a los usuarios a través de una interfaz. Y eso generalmente se encuentra más en aplicacionesenterprise y sitios web más serios. Pero también hay toques caprichosos. Y creo que simplemente me encanta, me encanta cosas así y siento que todavía tienen un lugar en sitios corporativos, especialmente si estás navegando por una página muy densa de información y luego hay una pequeña animación caprichosa o hay un botón que hace algo inesperado. Realmente me gusta ese tipo de cosas. Simplemente te hace sonreír y hace que el sitio web se sienta un poco más humano.

Sí. Quiero decir, sinceramente, mientras lo describías, especialmente cuando usaste la palabra caprichoso, me recordó al buen viejo Clippy, ¿verdad? Clippy hacía que Microsoft Word se sintiera especial. Así que tal vez en todos nuestros sitios web necesitemos, no todos, pero en algunos de nuestros clips, tengamos un equivalente a Clippy en términos de animación y agreguemos algo de diversión. Pero una cosa que sé que haces mucho es tratar de educar y difundir el conocimiento sobre cómo hacer cosas increíbles y creativas en la programación. También sé que hablaste sobre cómo tienes un grupo de personas con las que haces codificación creativa. ¿Qué hay de los principiantes? Si alguien es nuevo, ¿hay algún artículo o curso que recomendarías para un principiante que quiera aprender a hacer que sus sitios web luzcan tan hermosos como los tuyos? Bueno, creo que hay muchos lugares. Realmente me encanta CodePen, la community de CodePen porque es muy solidaria y propicia para compartir y aprender de las personas. Y si alguien quiere profundizar más en GreenSock, en realidad tenemos foros. Así que me gusta verlos como Stack Overflow, pero con personas amables. Entonces, si quieres aprender algo nuevo, ve a nuestros foros y habla con algunas personas allí. Y también tenemos una documentación muy buena.

Entonces hay muchos documentos con enlaces de CodePen que puedes bifurcar. Genial. Honestamente, hay ciertas cosas que son como elementos básicos del desarrollo web. Y creo que los CodePens y poder ver lo que otras personas han construido y cómo lo han hecho, me encanta ver tantos CodePens creativos por ahí. Poder robar algunas ideas aquí y allá para algunas de las cosas que construyo de vez en cuando. Pero también tener una buena documentación en GreenSock creo que es genial. Y si estás interesado en GreenSock y tal vez quieres aprender más, y tal vez ya sabes mucho sobre lo que ha contribuido, definitivamente revisa esos foros. Pero cuando no estás construyendo sitios realmente increíbles y trabajando con GreenSock, ¿qué más haces en el espacio web? ¿Hay algo más que te llame la atención o algo en lo que estés realmente interesada?

Oh, en el espacio web. Actualmente estoy interesada en los sitios estáticos. Principalmente porque parece que la gente habla de cómo la animación afecta el rendimiento. Y creo que si estás haciendo muchas cosas muy complejas, debes tener mucho cuidado con la animación. Pero los sitios estáticos se sienten como un patio de recreo porque hacen todo en el lado del servidor, y luego obtienes estas hermosas páginas estáticas y sientes que puedes hacer lo que quieras en ellas. Toda la creatividad que desees. Porque muchas de las cosas más complicadas se gestionan en el servidor, lo cual es encantador.

Genial, genial. Sé que nos estamos quedando sin tiempo, pero quiero ver si puedo hacer una pregunta que acaba de llegar de Simon18. ¿Hay alguna forma para que un usuario pueda saltar una animación de desplazamiento y pasar a la siguiente sección? Creo que esto es algo muy específico, pero espero que puedas dar una respuesta. Sí, eso dependería de cómo configures tus animaciones de desplazamiento. Personalmente, no recomendaría secuestrar el desplazamiento del usuario para que no pueda avanzar a la siguiente sección. Siempre dejo el control en manos del usuario. Así que eso dependería completamente de cómo lo configures. No habría algo que Scroll Trigger haga por defecto. Esa es una forma maravillosa. No recomendar a las personas secuestrar desplazamientos. Recuerda, si vas a animar, anima de manera responsable. ¿Dónde pueden las personas obtener más información sobre GreenSock y simplemente sobre GreenSock en general? Soy Cassie Codes prácticamente en todas partes. Puedes encontrarme en Twitter en Cassie Codes y en CodePen en Cassie-Codes, creo. Solo busca Cassie Codes o Cassie-Codes y definitivamente nos encontrarás. Muchas gracias por acompañarnos. Disfruta el resto de tu día. Genial. Gracias por tenerme aquí.