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.
Representation of the Béziers curve
Main easing functions
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
- 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