Independently animating transform properties with web animations api

Question

Is it possible to animate the different parts of the transform property independently in one animation?

for example:

const lineAnimation = [
  { transform: 'scaleX(0)', offset: 0 },
  { transform: 'translateX(0%)', offset: 0 },

  { transform: 'translateX(0%)', offset: .25 },
  { transform: 'scaleX(1)', offset: .5 },

  { transform: 'translateX(100%)', offset: 1 },
]

// Timing object also defined...

loadLine1.animate(
  lineAnimation,
  loadLine1Timing
);

I would like to animate scaling and translation in the same animation for the same element but at different timings.

This particular example isn't working and seems to only be affecting the translateX and not the scale.

How could I modify this to transform both at once?

Answer 1

Unfortunately this is not yet possible. You need to create an extra wrapper around your loadLine1 element (e.g. if it is an SVG element, a <g> element, or if it is HTML, a <div> or <span> element), then you need to animate scale on loadLine1 and translate on the wrapper, or vice-versa depending on the desired effect.

Alternatively, you could write something like:

const lineAnimation = [
  { transform: 'scaleX(0) translateX(0%)', offset: 0 },
  { transform: 'scaleX(0.5) translateX(0%)', offset: .25 },
  { transform: 'scaleX(1) translateX(33%)', offset: .5 },
  { transform: 'scaleX(1) translateX(100%)', offset: 1 },
]

loadLine1.animate(
  lineAnimation,
  loadLine1Timing
);

(You might want to reverse the order of the scaleX() and translateX() components depending on the desired effect.)

In future this will be possible via two further means.

Firstly, CSS Transforms Level 2 specifies individual properties for translate and scale. This is implemented in Chrome but only behind a flag. I expect it will be implemented in Firefox in the near future.

This would allow you to write your animation as:

const lineAnimation = [
  { scale: 0, offset: 0 },
  { translate: '0%', offset: 0 },

  { translate: '0%', offset: .25 },
  { scale: 1, offset: .5 },

  { translate: '100%', offset: 1 },
]

loadLine1.animate(
  lineAnimation,
  loadLine1Timing
);

Secondly, Web Animations defines additive animation which would allow you to achieve this as follows:

const scaleAnimation = [
  { transform: 'scaleX(0)', offset: 0 },
  { transform: 'scaleX(1)', offset: .5 },
];

const translateAnimation = [
  { transform: 'translateX(0%)', offset: 0 },
  { transform: 'translateX(0%)', offset: .25 },
  { transform: 'translateX(100%)', offset: 1 },
];

loadLine1.animate(
  scaleAnimation,
  loadLine1Timing
);
loadLine1.animate(
  translateAnimation,
  { ...loadLine1Timing, composite: 'add' }
);

This is implemented in Firefox but only enabled in Nightly builds. It is also implemented in Chrome, I believe, but only enabled behind the experimental web platform features flag. I hope this will ship in both browsers and the polyfill in early 2018.