Animatic Panel

What is the Animatic Panel

The Animatic Panel is the area where you can adjust your element properties and animations. It shows up when you are in editing mode. You'll have to click on the Edit Animations button in your frontend admin bar to enable editing mode:

Here's a rundown of the interesting areas in the Animatic Panel. If you want to know more information regarding an area or setting inside the panel, you can hover your mouse for more than a second on the area and an information tooltip will appear:


Animatic Panel Areas

The Animatic Panel is split into 4 groups:

  1. Defaults
    • Settings in this area are for the default positioning of your element. You can move your element around, change it's rotation, z-index layer order.
    • There are no animation settings here
  2. Idle Animations
    • This is the infinitely looping animation for your element. You can choose from over 50 animations to apply and you can further adjust the timings of the animation.
    • All the animations here infinitely loop.
  3. Entrance Animations
    • This is the transition that plays when your element is below the visible area of the browser until it reaches the middle of the screen.
    • The fields here are similar to the fields in the Defaults area, and are applied when the element is hidden. The element will slowly go back to its original position (as defined in the Defaults area) until it reaches the middle of the screen.
  4. Hover Animations
    • Settings in this area are for the animation/transition that plays when your element is hovered on by the mouse cursor.
    • All the selectable animations only play once, you can further adjust the timings of the animation/tranform.

There is a 5th area in the Animatic Panel that can be found in the bottom of the panel. This acts like the status and settings bar of the Animatic Panel.


Modifying Field Values

We wanted to make things as easy to use as possible, and we wanted you to be able to change values quickly with less typing.

After you select an element, and while your Animatic Panel is opened up, you can edit your values in these ways:

  1. Click & Drag your selected element to modify its X & Y Default values,
  2. Press Up, Down, Left, or Right keyboard arrows to move your selected element to modify its X & Y Default values (you can hold the Shift Key to make the movement larger),
  3. Click & Drag the field labels horizontally to quickly increase or decrease the value (this also works for drop down fields)
  4. Type in your value inside the fields to change them.

What we usually do is we use method 1 to move the element close to where we want it. Then use method 2 to precisely move it. Then method 3 to quickly modify the values Photoshop-style.