Index
The Animation Keyframes panel is the starting point for building out animation sequences in Flexitive. In the Animation panel, you can add or remove animation frames, loop your animation sequence, and use the Show Elements on Canvas buttons to filter what is displayed on your canvas by a particular frame.
In the Animation Keyframe 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 panel, you can control what is shown with the Show Elements on Canvas tabs, In Frame, and All Frames.
Selecting In Frame will make it so design assets are shown if they meet the criteria of one of the 4 selected filters.
Select All Frames will show you all of the elements on the canvas regardless of their animation state in the frame you are currently working in.
Under the In-Frame tab, you’ll see four buttons that 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. You will know a filter is set to Show if the button color is filled.
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 gray 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.
To clearly show what each element is doing on a frame, objects are color-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 color 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 animation sequence by tapping the Play button at the top of the Animation Panel. 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.
