Animation

<gstock-animation> | GstockAnimation

Funcionamiento

Para animar un elemento, envuélvalo en <gstock-animation> y establezca en el atributo name indicando el nombre de la animación. La animación solo se aplicará al primer elemento secundario que se encuentre en <gstock-animation> y no comenzará hasta que agregue el atributo play. 

<gstock-animation name="bounce" duration="2000" play="play">
  <svg width="70" height="70">
    <ellipse fill="none" stroke-width="4" cx="35" cy="35" rx="31" ry="31" />
  </svg>
</gstock-animation>

<gstock-animation name="rubberBand" duration="3000" play="play">
  <svg width="70" height="70">
    <rect fill="none" stroke-width="8" width="100%" height="100%" />
  </svg>
</gstock-animation>

<gstock-animation name="shake" duration="2000" play="play">
  <svg width="70" height="70">
    <ellipse fill="none" stroke-width="4" cx="35" cy="35" rx="31" ry="31" />
  </svg>
</gstock-animation>

<gstock-animation name="jello" duration="2000" play="play">
  <svg width="70" height="70">
    <rect fill="none" stroke-width="8" width="100%" height="100%" />
  </svg>
</gstock-animation>

<style>
  ellipse,
  rect {
    stroke: var(--gstock-color-border-brand);
  }
</style>

Observador de intersecciones

Utilice un observador de intersecciones para controlar la animación cuando un elemento entra o sale de la ventana gráfica.

En este ejemplo, se desplaza la circunferencia que se muestra a continuación dentro y fuera de la pantalla. La animación se detiene cuando el cuadrado sale de la ventana gráfica y se reinicia cada vez que entra en ella. 

<div class="animation-scroll">
  <gstock-animation name="jackInTheBox" duration="2000" iterations="1">
    <svg width="70" height="70">
      <ellipse
        fill="none"
        stroke-width="4"
        stroke="var(--gstock-color-border-brand)"
        cx="35"
        cy="35"
        rx="31"
        ry="31" />
    </svg>
  </gstock-animation>
</div>

<script type="module">
  
  const animation = document.querySelector('gstock-animation');
  const figure = animation.querySelector('svg');

  const observer = new IntersectionObserver(entries => {
    if (entries[0].isIntersecting) {
      animation.play = true;
    } else {
      animation.play = false;
      animation.currentTime = 0;
    }
  });

  observer.observe(figure);
</script>

Fotogramas clave personalizados

Proporcione sus propios formatos de fotogramas clave para crear animaciones personalizadas. 

<gstock-animation easing="ease-in-out" duration="2000" play="play">
  <svg width="70" height="70">
    <rect
      fill="none"
      stroke-width="8"
      stroke="var(--gstock-color-border-brand)"
      width="100%"
      height="100%" />
  </svg>
</gstock-animation>

<script type="module">
  
  const animation = document.querySelector('gstock-animation');

  animation.keyframes = [
    {
      offset: 0,
      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
      fillMode: 'both',
      transformOrigin: 'center center',
      transform: 'rotate(0)',
      borderRadius: '0',
      backgroundColor: 'transparent',
    },
    {
      offset: 0.25,
      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
      fillMode: 'both',
      strokeWidth: 0,
      transformOrigin: 'center center',
      transform: 'rotate(180deg)',
      borderRadius: '50%',
      backgroundColor: 'cyan',
    },
    {
      offset: 0.5,
      easing: 'cubic-bezier(0.250, 0.460, 0.450, 0.940)',
      fillMode: 'both',
      transformOrigin: 'center center',
      transform: 'rotate(270deg)',
      borderRadius: '0',
      backgroundColor: 'purple',
    },
  ];
</script>

Componentes animados

Las animaciones no se reproducirán hasta que se aplique el atributo play. Se puede omitir inicialmente y luego aplicarlo a demanda, por ejemplo, después de una interacción del usuario.

Click me Shake me 
<gstock-animation name="rubberBand" duration="1000" iterations="1">
  <gstock-button color="brand">Click me</gstock-button>
</gstock-animation>

<gstock-animation name="shake" duration="1000" iterations="1">
  <gstock-button color="brand" variant="outlined">Shake me</gstock-button>
</gstock-animation>

<gstock-animation name="wobble" duration="1000" iterations="1">
  <gstock-icon-button icon="bell"></gstock-icon-button>
</gstock-animation>

<gstock-animation name="swing" duration="1000" iterations="2">
  <gstock-icon-button icon="trash" color="danger" size="small"></gstock-icon-button>
</gstock-animation>

<script type="module">
  
  const animation1 = document.querySelector('gstock-animation:nth-child(1n)');
  const animation2 = document.querySelector('gstock-animation:nth-child(2n)');
  const animation3 = document.querySelector('gstock-animation:nth-child(3n)');
  const animation4 = document.querySelector('gstock-animation:nth-child(4n)');
  const button1 = animation1.querySelector('gstock-button');
  const button2 = animation2.querySelector('gstock-button');
  const iconButton1 = animation3.querySelector('gstock-icon-button');
  const iconButton2 = animation4.querySelector('gstock-icon-button');

  button1.addEventListener('click', () => {
    animation1.play = true;
  });

  button2.addEventListener('click', () => {
    animation2.play = true;
  });

  iconButton1.addEventListener('mouseover', () => {
    animation3.play = true;
  });

  iconButton2.addEventListener('click', () => {
    animation4.play = true;
  });
</script>