# Animations
As for now, there are only 2 components inside the **animations** part of the library:
1. A ``Loading`` which renders a _spinner_ made out of _rotating balls_.
2. A ``Animate`` wrapper wich add a _presentation_ animation to its content, for example: **fade in** on mount and **fade out** on dismount.
## Loading
### Properties
| Name | Type | Required | Comments |
| ------------|--------|----------|----------|
| size | object | true | Object that needs to contain the ``height`` and the ``width`` of the component. |
| size.height | number | true | Sets the heigth of the _spinner_. |
| size.width | number | true | Sets the width of the _spinner_. |
## Animate
### Properties
| Name | Type | Required | Comments |
| ----------------|---------|----------|----------|
| enterWithBounce | boolean | false | Indicates if the component initial animation implements a "bouncing" effect. |
| executeWhen | string | false | Sets when the animation should be triggered. - ``isMounted``: executes the _in and out_ animations when the component is **mounted** or **dismounted** respectively.
- ``isVisible``: executes the _in and out_ animations when the component **enters** or **exits** the _viewport_ respectively.
_Note: By default the ``onDemand`` option can be use, just add a **reference** to the declaration of the animation and call the **trigger** methods._|
| from | string | true | Sets the animation direction.
For **fade**:- ``left``
- ``right``
- ``top``
- ``bottom``
For **flip**:- ``vertical``
- ``horizontal``
|
| type | string | true | It describes the animation style: a)``fade``, b)``flip`` and c)``zoom``. |
### Methods
| Name | Parameters | Type | Description |
|--------------------------|------------|------|-------------|
| triggerEntranceAnimation | N/A | N/A | Triggers the _entrance_ animation... obviously. |
| triggerExitAnimation | N/A | N/A | Triggers the _exit_ animation... also obvious. |
## Usage
```javascript
import React, { Component } from 'react';
import { Loading, Animate } from 'panda-common-controls';
class BasicForm extends Component {
render() {
//Result.
return(
{ this.AnimateRef = animate; }}>
);
}
}
```