mask-animation

CSS3 and Sprite Animations
-----

Declare and run the animation in your Mask templates or direct from JavaScript

Features:
- Animation models: from simple to complex and deep-nested animations
- Can contain not animatable properties within the model - _like 'display property_.
- CssTransforms: Prefix-less declaration
- CssTransforms will be tracked, so if you animate translate, and in next model animate scale - 'translate' will be kept in element 'transform' style
- Starting animation model: when not specified the model is taken from the actual current state.
- Supports addition timing functions. See Easings.net



$3


- AnimationProperty:string

`javascript
propertyName | ?from > to | time timing delay
`

| Key | Required |Description |
|--------------|----------|------------|
|propertyName|required| Any css property, like height, transform, left, display, visibility, bottom, etc.|
|from |optional| Initial css value for the property. Default is the current value for the property|
|to |required| Target css value|
|time |optional| Animation duration. Definition is like in CSSTransition, e.g.: 21s, 450ms. Default is 200ms|
|timing |optional| CSSTransition timing function, e.g.: linear, ease-in, cubic-bezier(.13,.83,.83,.41), 'easeInOutExpo'.|
|delay |optional| Delay time before starting the animation, e.g: 100ms.|

- AnimationSet:Array

An array of AnimationPropertys. Starts the animation of the properties simultaneously. Each animation property can contain its own time, timing and delay

- AnimationObject: object

`javascript
AnimationObject = {
model: AnimationObject | AnimationModelSet | AnimationProperty
next: AnimationObject | AnimationModelSet | AnimationProperty
}
`
| Key | Required |Description |
|--------------|----------|------------|
|model |required| Defines animation model. :exclamation: Can be an AnimationObject itself |
|next |optional| Defines animation wich will be started after model is finished |

$3

##### Attributes
`mask
Animation #myAnimationID x-slots='slotName' x-pipes='pipeName.slotName'
`
| Key | Description |
|--------------|------------|
|id | The animation component can be found via this id. Or any ancestor component can start the animation by id. this.animation('myAnimationID') |
|x-slots | Starts animation for a signal(s). ; delimited slot names |
|x-pipes | Starts animation for a piped signal(s). ; delimited slot names |
|x-repeat | Default is 1. How many times single animation should be repeated |
|x-delay | Default is 0. Milliseconds to delay the animation |
|x-autostart | Default is None. Property to define, the animation should be started immediately on domInsert|

##### AnimationProperty
`mask
Animation {
'height | 0px > 100px | 200ms linear'
}
`
##### AnimationSet
`mask
Animation {
'height | 0px > 100px | 200ms linear'
'transform | translateX(0%) > translateX(100%) | 100ms ease-in'
'background-color | green > red | 200ms ease-in 50ms'
}
`
##### AnimationObject
`mask
Animation {
@model {
@model > 'transform | > translateY(100px) | 200ms linear'
@next > 'border-radius | 0% > 50% | 100ms linear'
}
@next {
'background-color | > cyan | 100ms easeInOutCubic,
'transform | > scale(0) | 3s linear'
}
}
}
`

$3

`javascript
mask.animate(
element:Element,
model: AnimationProperty | AnimationSet | AnimationObject,
?onComplete: Function
);
`

##### AnimationProperty
`javascript
mask.animate(document.body, 'background-color | > red | 1s linear');
`
##### AnimationSet
`javascript
mask.animate(document.body, [
'background-color | > red | 1s linear',
'padding | 0px > 20px | 1s linear',
]);
`
##### AnimationObject
`javascript
mask.animate(document.body, {
model: [
'background-color | > red | 1s linear',
'padding | 0px > 20px | 500ms linear',
],
next: 'visibility | > hidden'
});
`

Simple Demo


#### Complex Animation Model Sample
`mask
@model {
@model {
// rotate to 45 degrees from initial state
'transform | > rotate(45deg) | 1s linear'
}
@next {
// then scale from 0 to 2 (rotation will be kept)
'transform | scale(0) > scale(2) | 500ms'
}
}
@next {
@model {
@model {
// animate background-color for 3 seconds after upper model is ready,
// that means, after scale animation end.
'background-color | white > red | 3s ease-out'
}
@next {
// dissolve the element
'transform | > scale(5) | 5s'
'opacity | 1 > 0 | 4s'
}
}
@next {
// hide element -> end animation -> call onComplete callback
'display | > none'
}
}
`

#### Signals
Slots and piped-slots can be defined, so that the animation will be started, when the signal is emited in controllers tree or in a pipe

##### Slots
`mask
div {
Animation #aniID x-slots='slotName; anyOtherName' {
// ... animation model
}
}
`

So now if some parent controller emits the signal downwards, and it reaches the animation handler, then element will be animated:
`javascript
this.emitIn('slotName');
`

Controller can start animation also manually with, and if needed - override animate element.
`javascript
this.animation('aniID').start(?onAnimationEnd, ?element);
`

##### Pipes
`mask
div {
Animation #aniID x-pipes='pipeName.slotName; otherPipe.otherSlot' {
//...
}
}
`

Animation Handler will be binded to specified pipes, and when the signal is emitted there, the animation will be started.

Emit a signal in a pipe with:
`javascript
Compo.pipe('pipeName').emit('signalName', ?argsArray);
`



----
:copyright: MIT` _Atma.js Project_