Wrap animations (properties) in a defined key.

[infacto]

Currently you just define the animation properties like scale or opacity etc. in the root config object which also contains other not related properties for options like autoplay and targets etc. This can be a bit dangerous. Because property-name collisions.

Simple example:

var battery = {
  charged: '0%',
  cycles: 120,
  duration: 42
}

anime({
  targets: battery,
  charged: '100%',
  cycles: 130,
  round: 1,
  easing: 'linear'
});

// How to animate "duration" from the battery object without passing the pre-defined props "duration" of Anime?

Maybe not the best example, but collisions with this design is possible. Should be something like this:

var battery = {
  charged: '0%',
  cycles: 120,
  duration: 42
}

anime({
  targets: '',
  duration: 300,
  round: 1,
  easing: 'linear',
  props: {
    charged: '100%',
    cycles: 130,
    duration: 100
  }
});

"props" or "properties" or "keys" or "animate" or whatever...

Or is this already possible? Wrapping the properties to animate in another scope to prevent collisions with pre-defined options.

[email protected]

[Ridvanovskyy]

Looks like that now there is 0 info in console. If lib will migrating to ts - this case will be solve in linting IDE level. But idea with props - nice.