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.

Représentation de la courbe de Béziers

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.

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 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.

React-spring visualizer (Kaliber Interactive)

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