# Animations

> Discover how to configure animations in PandaSuite Studio, including easing and spring animations, for a smoother and more enjoyable user experience.

https://docs.pandasuite.com/essentials/interactions/animations/

**Animations are part of the most valuable features of the applications. They transform the user's navigation into a pleasant and differentiating experience. There are several types of animations: acceleration curves (easing) or spring animations that incorporate physical properties.**

Discover how these animations work and how to configure them in PandaSuite Studio.

## Easing animations

To illustrate easing functions, the example of a car is often used. To get from point A to point B, the car does not have a constant speed: it takes a little time to start and then reaches full speed before decelerating and stopping. This is called ease in and ease out.

To represent these acceleration curves, we use the Béziers curve which is defined by 4 points.

[Image: Construction of a cubic Bézier curve at t = 0: four control points, P0 to P3, joined by line segments]

Representation of the Béziers curve

In PandaSuite, you have access to the main easing functions and you can manually edit the parameters of the Bezier curve to adjust these effects.

[Image: Grid of 25 easing curves, from Linear to Ease in-out Back, with the Sine, Quad, Cubic, Quart, Quint, Expo and Circ variants]

Main easing functions

## Spring animations

Spring animations are more realistic because they incorporate physical properties such as tension, mass, friction and velocity.

If we take the example of the very good [Kaliber Interactive](https://medium.com/kaliberinteractive/how-i-transitioned-from-ease-to-spring-animations-5a09eeca0325) article, let's imagine a spring suspended from a ceiling with a bob at the end. If the spring is at rest, it is at its point of rest (or equilibrium). Pull the bob down.

[Video: a weight hanging from a spring bounces then settles, next to the mass, tension and friction settings]

The spring animation is defined according to a damping value. This value is between 0 and 1. The closer this number is to 1, the more stable the animation will be.

## Create an animation

Animations are created using states. These states can be found in screens, foregrounds/backgrounds, multi-state & pop-up components.

To create an animation, first create 2 states and then go to the **Actions** window.

Choose the trigger of your choice and the action **Go to state** or **Interact with a component > Go to state**.

Choose a delay, a duration and the type of animation: Easing or Spring.

- For Easing animations, you can choose between several types and you can customize the Bezier curve.
- For Spring animations, you can set the damping value:
  - No bounce: 1
  - Little bounce: 0.75
  - Average bounce: 0.5
  - Large bounce: 0.2

[Image: Next state action with a delay, a duration and an Easing animation using the Ease In Out preset; Spring is the other type]