The Animation Frames Panel is the starting point for building out animation sequences in Flexitive. In the Animation Frames panel, you can add animation frames, loop your animation sequence, change the speed and delay of animations and use the In-Frame Elements buttons to filter what is displayed on your canvas by what is important for a particular frame.

In the Animation Frames Panel, you can also control the Frame Count, Frame Duration and Delay, and Looping of your Animations

The Show Elements on Canvas Tabs 

A key part of using animations in Flexitive is knowing exactly what is happening in each frame. In the Animations Frames panel, you can select between the Show Elements on Canvas tabs, In Frame and All Frames, to filter the elements that are visible on the canvas by animation state or view all elements at once regardless of the frame they appear on.

The In-Frame Elements tab, the buttons will allow you to filter which elements of your design you see by the four animation states: 'Animating In', 'Not Animating' Emphasis Animations' or 'Animating Out' for a particular frame.

By default, every In-Frame filter will be toggled to Show, and toggling a filter Off will hide any elements that are animated in that particular way for the selected frame. 

To view all elements on your canvas, regardless of the frame they appear on, select the All Frames tab. 

When an element is hidden from the canvas by the Show Element on Canvas - In Frame tab, it will be marked grey in the Layers Panel and can be made visible again by selecting the All Frames tab, or by tapping the hidden image in the Layers Panel.

Colour Coding

To clearly show what each element is doing on a frame, objects are colour coded in the Frame Outlines in the Animation Panel. Combining this with the In-Frame Elements buttons makes it easy to see what an element is doing on each frame.

Elements highlighted as green in the Frame Outlines are Animating In on the associated frame. Elements that are highlighted as Blue are Not Animating. Elements highlighted purple are elements with an Emphasis Animations. Elements that are highlighted orange are Animating Out on that frame.

By using colour coding and the Show Elements on Canvas tabs, you can easily create complex animation sequences and track the animations on the canvas.

Previewing Animations

At any time, you can preview your animations by tapping Play. This will start a preview of your animations from the frame you currently have selected (highlighted in green in the panel). To preview your animations from the start of the sequence, select the first frame of your animation sequence and tap Play.