A continuación vamos a ver los principales componentes de Motion UI con algunos ejemplos de cómo los usamos en Chispa:

Animaciones

Con esto nos referimos a elementos que cambian su forma o tamaño, que se desplazan por la pantalla, o modificaciones de los mismos cuando pasamos el cursor sobre ellos.

Algunos ejemplos de esto:

• Cuando usamos botones es importante que se note que lo son ya desde su estética, pero que también generen alguna sensación más al posarnos sobre ellos.
• Un componente con video de fondo en movimiento para captar la atención del usuario.
• Cards que modifican su información, colores y otros aspectos del sitio, como el color del fondo, para potenciar el interés del usuario.
• Portadas que aparecen con alguna animación para incentivar al usuario a recorrer la página.
• Marquesinas para que se vuelva más ameno e interesante leer la información, las listas de texto son aburridas.

Efectos de scroll

Nuestra interacción favorita en Chispa se basa en animar distintos elementos del sitio a medida que el usuario lo recorre. Esto da sentido de profundidad e interacción, que mejora la experiencia e incentiva a continuar desplazándose o prestarle más atención a un elemento que está siendo animado por el scroll.

Les dejamos algunos ejemplos a continuación:

• Las distintas animaciones que van sucediendo son en pos de tener un impacto positivo y un incentivo en continuar desplazándose por el contenido del sitio.
• Títulos grandes que aparecen con un efecto elegante para reforzar su lectura.
• Para un bloque de información importante que quieres asegurarte que sea leído, la sección se fija y nos va revelando el texto a medida que nos desplazamos.
• Otro ejemplo de cómo reforzar y destacar una idea o concepto.

Feedback

Reacciones a las interacciones con el sitio web. Por ejemplo, un icono de notificación rebota ligeramente para llamar la atención, un mensaje que aparece con algún efecto para indicar un error cuando queremos enviar un formulario, o uno de éxito cuando pudimos enviarlo satisfactoriamente.

Veamos algunas:

• Aquí podemos ver cómo aparece un tooltip en la parte inferior derecha de la pantalla para indicarnos que el formulario no se pudo enviar.
• En cambio, en este caso vemos un mensaje de éxito cuando pudimos enviar el formulario satisfactoriamente.

Tecnologías

Hay distintas formas de hacer Motion UI en la web, desde animar con CSS hasta librerías de JavaScript. En Chispa utilizamos ambos métodos, pero los más complejos los hacemos con JavaScript, principalmente con GSAP (GreenSock Animation Platform) y Framer Motion, dos de las mejores herramientas para animar.

Para cerrar, les dejo un ejemplo de código de GSAP para hacer los círculos de colores que van apareciendo con el scroll y el link al demo:

gsap.registerPlugin(ScrollTrigger);
gsap.set('.container', { autoAlpha: 1 });

const targets = gsap.utils.toArray('.item');
const timeline = gsap.timeline({
  defaults: {
    overwrite: 'auto'
  },
  scrollTrigger: {
    end: '+=1000',
    pin: true,
    pinSpacing: true,
    scrub: 1,
    start: 'top top',
    trigger: '.container'
  }
});
const stagger = 0.3;
const duration = 2;

timeline.set(targets, { transformOrigin: 'center center' });

timeline
  .from(targets, {
    duration: duration,
    stagger: stagger,
    scale: function (index, target, list) {
      if (index === 0) {
        return 0.2;
      }
      return 0;
    }
  })
  .to(
    targets,
    {
      duration: duration,
      stagger: stagger
    },
    0
  );