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: cre_er_un_e_tat_lie_.png

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.

link_between_states.png

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.

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

objects_position_out_of_the_screen.pngPlace 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_bigger.pngMake 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

crop_image.pngResize the width of the mask on linked state


Menu effect using the mask

Still need help? Contact Us Contact Us