You can enhance your calendar's appeal by adding transition effects between the sliding or fading animated states to create a seamless flow between these states. C1Calendar includes thirty-two transition effects that enable you to make the transitions for the sliding animations more visually compelling. Instead of the calendar sliding in to the left or to the right while navigating calendar months, the calendar could bounce in as it slides in and bounce out as it slides out. By default the Easing property is set to EaseLinear and when you switch calendar months each calendar appears with a smooth linear transition effect.
The following transitions effects are available for you to animate the transition between states so it looks smooth to help keep the user oriented while you are navigating calendar months:
| Transition Name | Transition Description |
|---|---|
| EaseInBack | Back easing in. Begins slowly and then accelerates. |
| EaseInBounce | Bouncing easing in. Begins slowly and then accelerates. The number of bounces is related to the duration: longer durations produce more bounces. |
| EaseInCirc | Circular easing in. Begins slowly and then accelerates. |
| EaseInCubic | Cubic easing in. Begins at zero velocity and then accelerates. |
| EaseInElastic | Elastic easing in. Begins slowly and then accelerates. |
| EaseInExpo | Exponential easing in. Begins slowly and then accelerates. |
| EaseInOutBack | Back easing in and out. Begins slowly, accelerates until halfway, and then decelerates. |
| EaseInOutBounce | Bouncing easing in and out. Begins slowly, accelerates until halfway, and then decelerates. |
| EaseInOutCirc | Circular easing in and out. Begins slowly, accelerates until halfway, and then decelerates. |
| EaseInOutCubic | Cubic easing in and out. Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again. |
| EaseInOutElastic | Elastic easing in and out. Begins slowly, accelerates halfway, and then decelerates. |
| EaseinOutExpo | Exponential easing in and out. Begins slowly, accelerates until halfway, and then decelerates. |
| EaseInOutQuad | Quadratic easing in and out. Begins slowly, accelerates until halfway, and then decelerates to zero velocity again. |
| EaseInOutQuart | Quartic easing in and out. Begins at zero velocity, accelerates until halfway, and then decelerates to zero velocity again. |
| EaseInOutQuint | Quintic easing in and out. Begins at zero speed, accelerates until halfway, and then decelerates to zero. |
| EaseInOutSine | Sinusoidal easing in and out. Begins slowly, accelerates until halfway, and then decelerates. |
| EaseInQuad | Quadratic easing in. Begins at zero velocity then slowly accelerates. |
| EaseInQuart | Quartic easing in. Begins slowly and then accelerates. |
| EaseInQuint | Quintic easing in. Begins at zero speed then accelerates. |
| EaseInSine | Sinusoidal easing in. Begins slowly and then accelerates. |
| EaseOutBack | Back easing out. Begins quickly and then decelerates. |
| EaseOutBounce | Bouncing easing out. Begins quickly and then decelerates. The number of bounces is related to the duration: longer durations produce more bounces. |
| EaseOutCirc | Circular easing out. Begins quickly and then decelerates. |
| EaseOutCubic | Cubic easing in and out. Begins at full velocity and then decelerates to zero. |
| EaseOutElastic | Quintic easing out. Begins at full velocity and then decelerates to zero. |
| EaseOutExpo | Exponential easing out. Begins quickly and then decelerates. |
| EaseOutQuad | Quadratic easing out. Begins at full velocity then decelerates to zero. |
| EaseOutQuart | Quartic easing out. Begins quickly and then decelerates. |
| EastOutQuint | Quintic easing out. Begins at full velocity and then decelerates to zero. |
| EaseOutSine | Quartic easing in. Begins slowly and then accelerates. |
| Linear | Linear easing. Moves smoothly from start to end without acceleration or deceleration. |
| Swing | Moves smoothly from start to end without acceleration or deceleration. |
