Recipe 8.7

Running Multiple Animations Simultaneously

This square has two separate animations running. Each animation applies a different transform. Normally the second animation’s transform would replace the first, but by using the composite property you can combine the two.

Demo

Code

JavaScript

const square = document.querySelector('#animate-square');

square.animate([
  { transform: 'translateX(0)' },
  { transform: 'translateX(250px)' }
], {
  duration: 5000,
  direction: 'alternate',
  iterations: Infinity,
  easing: 'ease-in-out'
});

square.animate([
  { transform: 'rotate(0deg)' },
  { transform: 'rotate(360deg)' }
], {
  duration: 3000,
  iterations: Infinity,
  composite: 'add'
});

HTML

<style>
  #animate-square {
    width: 64px;
    height: 64px;
  }
</style>

<div id="animate-square" class="bg-primary"></div>