mask-animation v1.0.20

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

Animation Models

• 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<AnimationProperty>

  	An array of `AnimationProperty`s. 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 |

Mask

Attributes

Animation #myAnimationID x-slots='slotName' x-pipes='pipeName.slotName'

AnimationProperty

Animation {
	'height | 0px > 100px | 200ms linear'
}

AnimationSet

Animation {
	'height | 0px > 100px | 200ms linear'
	'transform | translateX(0%) > translateX(100%) | 100ms ease-in'
	'background-color | green > red | 200ms ease-in 50ms'
}

AnimationObject

	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'
		}
	}
}

JavaScript

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

AnimationProperty

mask.animate(document.body, 'background-color | > red | 1s linear');

AnimationSet

mask.animate(document.body, [
	'background-color | > red | 1s linear',
	'padding | 0px > 20px | 1s linear',
]);

AnimationObject

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

Simple Demo

Complex Animation Model Sample

@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

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:

this.emitIn('slotName');

Controller can start animation also manually with, and if needed - override animate element.

this.animation('aniID').start(?onAnimationEnd, ?element);

Pipes

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:

Compo.pipe('pipeName').emit('signalName', ?argsArray);

:copyright: MIT Atma.js Project