gistfile1.txt

const a = animate( '.svg', [
  {
    from: {
      offset: [ 10, 20 ],
      fill: 'rgb( 100, 100, 100 )',
    },
    to: {
      shape: 'circle',
      cx: 50,
      cy: 50,
      r: 20,
      fill: 'rgb( 20, 20, 20 )',
    },
    ease: 'easeInQuad',
    duration: 500,
    motionPath: [
      { x: 0, y: 0 },
      { x: 100, y: 100, curve: { type: 'cubic', x1: 20, y1: 0, x2: 0, y2: 100 },
    ],
    when: 1000,
  },
  {
    from: {
      shape: 'g',
      shapes: [
        '.path1',
        '.path2',
        '.path3',
      ],
    },
    to: {
      shape: 'g',
      shapes: [
        {
          shape: 'path',
          d: '...',
        },
        {
          shape: 'path',
          d: '...',
        },
        {
          shape: 'path',
          d: '...',
        },
      ],
    },
    when: -200,
  },
]);

a.play({ reverse: true, speed: 0.5 }).then(() => {
  console.log( 'animation finished' );
});