Animación de variables CSS

Aplicar transición para el cambio de valores de variables CSS mediante el registro de @property aplicado a la propiedad clip-path
animating css vars

En la entrada anterior, Clip-path banner con dat.GUI para debug, definía puntos en sistema de coordenadas mediante variables CSS que asignaba a la propiedad clip-path. En esta entrada quería jugar un poco con eso, para añadirle un poco de gracia y que el cambio de valores tuviera un poco de animación. La solución no es compatible (animación) para Safari y Firefox

Registro de variables CSS

Necesitamos decirle al navegador que variables CSS hemos creado, para que pueda interpretarla en las animaciones o transiciones. Esta definición es necesaria si queremos aplicar transiciones o animaciones

  • initial-value:: valor inicial
  • inherits:: si se puede heredar. Le pasamos true
  • syntax: le pasamos '<percentage>'
@property --pi-1-x {
  initial-value: 50%;
  inherits: true;
  syntax: '<percentage>';
}
@property --pi-2-x {
  initial-value: 80%;
  inherits: true;
  syntax: '<percentage>';
}
@property --pi-3-x {
  initial-value: 52%;
  inherits: true;
  syntax: '<percentage>';
}
@property --pi-4-x {
  initial-value: 22%;
  inherits: true;
  syntax: '<percentage>';
}

Nuevos valores para las variables CSS

En principio no sería necesario definirlo si fuera el mismo valor, pero dado que firefox y safari no lo reconocen, se hace necesario

Importante es que al especificar la transition no usemos la palabra clave all ya que no aplica la transición, es necesario especificar que variables serán las animadas

Definimos "tres estados", uno para cada una de las tres imágenes

.banner {
  --pe-1: 0% 0%;
  --pe-2: 100% 0%;
  --pe-3: 100% 100%;
  --pe-4: 0% 100%;
  --g: 10px;
  --gutter: calc(var(--g) / 2);
  --pi-1-x: 36%;
  --pi-2-x: 80%;
  --pi-3-x: 52%;
  --pi-4-x: 22%;
  --pi-1-y: 0%;
  --pi-2-y: 0%;
  --pi-3-y: 100%;
  --pi-4-y: 100%;

  transition: 
    --pi-1-x .5s ease-in-out,
    --pi-2-x .5s ease-in-out,
    --pi-3-x .5s ease-in-out,
    --pi-4-x .5s ease-in-out;

  &.left-active {
    --pi-1-x: 82%;
    --pi-2-x: 93%;
    --pi-3-x: 90%;
    --pi-4-x: 80%;
  }
  &.center-active {
    --pi-1-x: 12%;
    --pi-2-x: 92%;
    --pi-3-x: 89%;
    --pi-4-x: 7%;
  }
  &.right-active {
    --pi-1-x: 10%;
    --pi-2-x: 20%;
    --pi-3-x: 16%;
    --pi-4-x: 8%;
  }
}

Tratar estados con javascript

La parte de javascript es sencilla. Consiste en añadir clases que indiquen que imagen está activa y aplicar los estilos CSS

window.addEventListener('DOMContentLoaded', () => {
  const banner = document.querySelector('.banner')
  const imgs = banner.querySelectorAll('[data-active]')
  imgs.forEach(img => {
    img.addEventListener('click', event => {
      const target = (event.target).closest('[data-active]')

      if (target.dataset.active === 'true') {
        imgs.forEach(img => img.dataset.active = false)
        banner.className = `banner`
      } else {
        banner.className = `banner ${target.className}-active`
        imgs.forEach(img => img.dataset.active = false)
        img.dataset.active = true
      }
    })
  })
})

Pen con ejemplo transición de variables CSS

El código completo para probarlo se encuentra en mi GitHub