Index


Animations in Flexitive are easy to build, scale quickly to many sizes, and look good on any browser. You can create animated designs in Flexitive using any of the available animation effects. You can also create animated SVGs using tools such as SVGator.

 

If you have any questions, please let us know at support@flexitive.com, and a member of the Flexitive Support team will be happy to help out.


The Animation Frames Panel


To add an animation sequence to your design, open the Animation panel on the right-hand side of the editor and click Start Animating.

 

 

After clicking Start Animating, Flexitive will create the first frame of your animation sequence, labeled F1. By default, every object on your canvas will be set to be Hidden on F1, so none of the elements will be visible for the first frame of animation. Setting every element to Hide makes it so you can start with a clean slate when you start adding animations to your design.



Applying Animations to Your Design


By default, every element in your design will be set to be Hidden on the first frame of animation. Whether or not an element is hidden is indicated in the top-right corner of the element on the canvas with the gray Hide text.

 

To set an image to show for a frame, click it on the canvas, then open the Animation Effects panel on the left-hand side of the editor and open the Frame tab. Set the element to Show.

 

 

When you first set an element to Show, it will have No Animation. 

 

To apply the animation to an element, click on the box for the animation you want to apply. Some animations allow you to change the direction of the animation. To change the direction of the animation, select the arrow buttons under that effect. 

 

 

Once an animation has been applied to an element, the animation will be highlighted in Green in the Animation Effects panel. 


You can add animations for as many elements as you would like per frame. However, you can only add one entrance, exit, or emphasis animation to an element for a particular frame.

 

After an animation is applied to an object, the Hide text will change to represent what the element is doing on that frame, such as Fade In Long.

 


Adding Additional Animation Frames


To add additional animation frames, tap the Add button at the top of the Animation panel. Tapping the Add button creates a new animation frame directly following the frame you currently have selected (the frame that is highlighted in green). To remove an animation frame, tap the X button in the top-right corner of the frame you wish to remove.

 

 

To delete all of the animation frames for a design, click on the Remove All Frames button at the bottom of the Animation panel. You may have to scroll down in the panel for it to be visible.

 

 

As you add more frames to your animation sequence, it is important to keep track of what frame you are working in at a given time. In the Animation button on the right-hand side of the editor, there is a number. The number in the Animation button indicates which frame of your animation sequence you are currently working in.



Adding an Element to a Frame


When you add an element to the canvas after you have started animating, it will automatically be set to Show for that frame with no animations. You will be able to see how this affects the banner using the Show Elements on Canvas tabs. 

 

To see which frame you are working on, you can check the number noted beside the Animation panel button. The current frame you are working on will also be highlighted in green on your animation sequence. 

You can move between frames by clicking on the frame you would like to add the element to.

 



Other Important Articles


For more information on animations in Flexitive, check out the following articles: 

If you have any other questions regarding Animations, reach out to a member of the Flexitive Support team at support@flexitive.com.