States & Transitions
Make animations on your objects or screens by creating a transition between two states. You can control the duration, delay, opacity, movement and size of your elements.
The concept of states
The states are part of the PandaSuite fundamentals. They allow you to animate your objects and screens with transitions.
They are everywhere: there are states in screens, foregrounds and backgrounds and in some components: Pop-Up and Multi-State. They are used in the same way and keep the same characteristics.
What is a state?
A state is a particular scene, a kind of snapshot at a specific moment of one or more objects. When you create a linked state and change the layout of your objects, a transition applies and your objects come to life.
You can create transitions from any type of graphic objects (images, text, components). Only text enlargement is not taken into account.
The different types of states
There are two types of states: blank states and linked states. The blank state is a completely independent state. The linked state retains all the characteristics of the original state and a link with this other state: this is how you make animations.
Create a linked state
Select the state and click on the orange button: 
A new state is created, under its name is the name of the original state.
You can move it in the list wherever you want.
Create a transition
To create the animation between your two states, all you have to do is create an interactive action.
Choose a trigger and choose the action Go to selected state or Interact with a component > Pop-up/Multi-state > Go to selected state if your state is in a component. Your transition is created automatically.
You can set a delay and duration to your transition.
Links between states
When you create a state B based on a state A, state A becomes the parent of state B. All objects are then linked between these two states. By default, any change on state A is automatically applied to state B. To create a transition, you need to make a change to your objects' characteristics in state B. There are three types of characteristics on your objects:
- Size & Position
- Properties
- Interactivities
You can restore the original characteristics at any time from the Objects window by clicking on the link icon.
Be careful: if you import a new object or cut the object, the links are broken and the object becomes completely independent. No transition will be possible on this object.
Set a default state
By default, status 1 is displayed when launching a screen.
To choose a different default state, click the pin icon in the Screens window or go to the Properties window.
Delete a state
To delete a state, click on the trash can. Beware of the links between parent and child so as not to break an animation.
Main types of transition
Fade
Create a fade in / out effect by changing the opacity of your objects. The opacity can be found in the toolbar. In the first state, choose an opacity of 0% for your object and restore it to 100% on the linked state.
Configure opacity in the toolbar
Display effect of a home screen
Slide
Create effects to move your objects. You can place objects out of your screen. Choose the path of movement. You can combine it with opacity to enhance the appearance of your objects.
Place objects out of the screen
Slide effect
Zoom
The states also let you easily create a zoom effect. To do this, simply zoom the object in the linked report. This is perfect for your interactive map projects.
If you want to create multiple zoom areas, create a linked report by area from your initial state and place an interactive zone above each area that redirects to the correct state.
Make the map larger in the linked state
Zoom effect on the map
Crop
You can also use the states to animate your masks (on your images and groups). This is what made it possible to achieve this nice fan effect on the Louvrissime application.
Resize the width of the mask on linked state
Menu effect using the mask