# j-Animation

> This component can animate elements with .animation class.

Framework: jcomponent20
Product: jComponent 20 (jcomponent@20)
Language: en
Content-SHA256: 3eb3e6d5e0cdbb03e10f8cfc520114316464e154eba89f57ec750e4f484eeb34
Snapshot: c0700e321579725c5cf4f5ace1ad7d2866d1b4f93c24a63c0b41b6b7998e976c
Sources: components@910ed1a86f6e72b4f031d3ad0dc7844f9fc5cb8e
Review: not-recorded

This component can animate elements with `.animation` class.


__Configuration__:

- `style {Number}` style of animation:
	- `1` opacity
	- `2` scale from big to normal (__default__)
	- `3` scale from small to normal
	- `4` rotation Z
	- `5` changing of X position
	- `6` changing of Y position
- `delay {Number}` delay between animation (default: `200`)
- `init {Number}` initialization delay (default: `1000`)
- `cleaner {Number`} delay for cleaner of animation classes (default: `1000` is multipled by count of elements)
- `together {Boolean}` all elements will be animated together (default: `false`)
- `visible {Boolean}` performs animation when the element with animation is visible (default: `false`)
- `offset {Number}` offset (threshold) for visibility (default: `50`)
- `exec {String}` a link to method which will be executed after animation
- `datasource {String}` a link to data-source (if the data-source will be modified then the animation will be performed again)
- `if {String}` a condition for path (same feature like `j-Part`), if the value will be same as `if` value then the animation will be executed (otherwise will all elements restored for previous state)

### Element configuration

Element configuration can be defined in `data-animation="delay:100;order:3"` attribute and it's optional:

- `noanimation {Boolean}` disables animation for this element (only removes `.animation` class)
- `delay {Number}` animation delay (default: `config.delay`)
- `order {Number}` animation order index, must start with `1` ... (elements with same order will be displayed together)
- `style {Number}` a custom style for the element

Use it with `<ui-component name="animation">`. When the component is not loaded yet, jComponent downloads it on first use from the address in `DEF.fallback` (the Componentator CDN by default). Author: Peter Širka. Source: the Componentator components repository, MIT license.

```html example.html
<ui-plugin path="form" class="container">
	<ui-component name="animation" config="style:6">
		<div class="row">
			<div class="col-md-3 m">
				<ui-component name="input" path="?.name" class="animation">Name</ui-component>
			</div>
			<div class="col-md-3 m">
				<ui-component name="input" path="?.price" config="type:number" class="animation">Price</ui-component>
			</div>
			<div class="col-md-3 m">
				<ui-component name="input" path="?.address" class="animation" data-animation="noanimation:1">Without animation</ui-component>
			</div>
		</div>
	</ui-component>
</ui-plugin>
```