JS: How to save chained animations as a variable to play, pause, etc

Question

If i want to control a simple animation, I can set it to header variable and then do header.play() like this:

  let header= element.animate({
      transform: ['scale(1)', 'scale(1.5)']
    }, {
      duration: 1000,
      fill: 'both'
    });
  
  header.play();

but when I chain it so that different animations happen together using composite, that won't work since it's multiple definitions:

element.animate({
  transform: ['scale(1)', 'scale(1.5)']
}, {
  duration: 1000,
  fill: 'both'
});

element.animate({
  transform: ['rotate(0deg)', 'rotate(180deg)']
}, {
  duration: 1500,
  fill: 'both',
  composite: 'add'
});

how would I control these together to make use of play(), pause() ?

Are you using an animation library? You should probably tell us which one. — , Dec 30 '20 at 22:04
when you say "happen together" what do you mean? that is ambiguous. please describe exactly the behavior. is it in sequence, or at the same time? — r3wt, Dec 30 '20 at 22:13
@r3wt using the `composite` property, I am adding to the `transform` property in the 2nd animation rather than replacing the scale with the rotate. So scale _and_ rotate will happen at the same time — RicardoAlvveroa, Dec 30 '20 at 22:15
do you have a codepen @RicardoAlvveroa I haven't used this api before but if you throw up an example i'll attempt to help you. — r3wt, Dec 30 '20 at 22:16
sure: https://jsfiddle.net/m8or70xk/ . As you can see, the box executes _both_ animations. It applies both transforms at the same time but I am not sure how to put that in a variable to make access of `play()` again to trigger it at a later time — RicardoAlvveroa, Dec 30 '20 at 22:18

Bergi · Accepted Answer · 2020-12-30T22:46:05.140

0

You can either chain two separate animations using DOM events (or even promises):

const firstPart = element.animate({
  transform: ['scale(1)', 'scale(1.5)']
}, {
  duration: 1000,
  fill: 'both'
});

firstPart.finished.then(() => {
  const secondPart = element.animate({
    transform: ['rotate(0deg)', 'rotate(180deg)']
  }, {
    duration: 1500,
    fill: 'both'
  });
  return secondPart.finished;
});

Or you can create a single animation with multiple keyframes:

element.animate([
  { offset: 0, transform: 'scale(1)' },
  { offset: .6, transform: 'scale(1.5) rotate(0deg)' }
  { offset: 1, transform: 'scale(1.5) rotate(180deg)' }
], {
  duration: 2500,
  fill: 'both',
  composite: 'add'
});

The keyframes solution also allows animating both properties at the same time if you want. However, animating two transforms indepdently is a bit complicated.

edited Dec 30 '20 at 22:46

answered Dec 30 '20 at 22:22

Bergi

630,263
148
957
1,375

thanks @bergi. Wouldn't this sequentially run them though? Like wait for the `firstPart` to execute and finish, then run the 2nd? – RicardoAlvveroa Dec 30 '20 at 22:24
@RicardoAlvveroa Didn't you say you wanted to chain them? – Bergi Dec 30 '20 at 22:28
so that they fire together....perhaps chaining wasn't the right word. sorry. But they start at the same time, one having the duration of 1000 and another having 1500 duration but both doing different transforms, hence the need for the `composite: add` – RicardoAlvveroa Dec 30 '20 at 22:30
@RicardoAlvveroa Ah I see. How would you expect them to repeat (if they were repeating)? – Bergi Dec 30 '20 at 22:33
as if I executed those 2 `animate()`s at the same time again , if that makes sense – RicardoAlvveroa Dec 30 '20 at 22:33
So you want the scaling to wait 500ms after it's finished before starting again? Then you can use a single animation with the respective keyframes – Bergi Dec 30 '20 at 22:35
1

got it, ok. Sorry for the runaround. I never used `composite` before. – RicardoAlvveroa Dec 30 '20 at 22:37
1

Note that as of the latest Safari TP, all the major browser engines support the individual transform properties so in future animating scale and rotate independently should become much easier: https://webkit.org/blog/11420/css-individual-transform-properties/ – brianskold Dec 31 '20 at 04:57
@brianskold Oh, nice! – Bergi Dec 31 '20 at 15:29

JS: How to save chained animations as a variable to play, pause, etc

1 Answers1