Anime: Possibility of allowing multiple transform keyframes per property

[lukebatchelor]

Instead of just a to and from for each property, would you consider allowing multiple 'keyframes' in an animation?

Something like this perhaps

anime({
  targets: 'div',
  translateX: '13rem',
  rotate: [{
      value: 90,
      duration: 750,
      easing: 'easeInOutQuad'
    }, {
      value: 180,
      duration: 750,
      easing: 'easeInOutBounce'
    }
  ],
  scale: {
    value: 2,
    delay: 150,
    duration: 850,
    easing: 'easeInOutExpo',
  },
  direction: 'alternate',
  loop: true
});

So each part of the rotate array would happen in sequence. This just allows more complex animation curves to be created.
Keen to make a PR if you are interested.

Cheers

[juliangarnier]

Yes this is definitively something that can be useful.
I'm not sure how it will fits in the current API, because the value property can also accept an array.
This is something I'll consider 👍

[lukebatchelor]

(Not sure on the etiquette of commenting on closed issues, sorry!)

Awesome! I don't see the value being an array to be an issue. If I'm not mistake, the current behaviour is that if you pass a value, it will animate from its current value to that new value? And if you pass a (2 element) array it will interpolate from the first to the last? So, I think it will still be the same logic.

It might even be possible to simply flatten the object in some way, where each element in the array becomes a new property but with altered delays.

That would allow you to use the same logic for total animation duration, playing, etc.

Would you accept a PR for this or would you rather take a look at it yourself once it's a priority?

[juliangarnier]

I like the idea, a PR is welcome!

[juliangarnier]

An attempt to get multiple keys values in one property: https://github.com/juliangarnier/anime/tree/multiple-keys-per-property-j

But it's really messy, and fails in a lot of cases.
The biggest problem here is the order in which the tweens are played to avoid overlap (e.g. two translateX values, or the last CSS value overriding the previous one).

I think the tween creation part must be rewritten to accept multiple values as the default.
And have a proper way to play them in the main loop, without having to look at what should be played first.

You can PR here: https://github.com/juliangarnier/anime/tree/multiple-keys-per-property

[juliangarnier]

Just to let you know, V2 is almost here, and add multiple keyframes by properties following the syntax described in this issue.
Examples here : http://anime-js.com/v2/documentation/#keyframesChain

The documentation is still WIP, and I didn't have the time to write a proper change log yet, but the code is available for testing here : https://github.com/juliangarnier/anime/blob/v2.0/anime.js

Feedback is welcome :)

[juliangarnier]

And relative to this, I also added a timeline system, that allows proper synching between multiple anime instances : http://anime-js.com/v2/documentation/#multiple

[juliangarnier]

Added to V2.