- Adding Animation Frames
- Applying Animations to your Design
- Adding an Object to a Frame
- Other Important Articles
Animations in Flexitive are built for speed and are designed to be easy and intuitive to use. In the Animation section of the Support Portal, we will cover how you can add Animations to your Flexitive Design that are easy to build, scale quickly to many sizes, and look good on any browser.
If you have any questions, please let us know at firstname.lastname@example.org, and a member of the Flexitive Support team will be happy to help out.
To add an animation sequence to your design, open the Animation Frames panel on the right-hand side of the editor and tap Start Animating.
After tapping Start Animating, Flexitive will create the first frame of your animation sequence, labelled F1. By default, every object on your canvas will be set to be Hidden on F1, meaning none of the elements will be visible for the first frame of animation. Setting every element to Hidden makes it so you can start with a clean slate when you start adding animations to your design.
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 you animations 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.
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 grey Hide text.
To set an image to show for a frame, tap it on the canvas and then open the Animation Effects panel on the left-hand side of the editor and open Frame tab. Set the element to Show.
The animation applied to the element will be highlighted in Green in the Animation Effects panel. By default, an object will be set to Show will have No Animation.
To preview an animation, tap the Preview button in the Set Animations panel for that animation. If you would like to set that animation to happen on the frame, tap on the box for the animation.
You can add animations for as many elements as you would like per frame. However, you can only add one 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.
After you have started animating your project, adding assets to your canvas will act a little differently than if the banners are static.
If 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.
Some other articles we recommend checking out in our Support Portal are:
- The Animation Panel
- Frame Delay and Frame Duration
- Looping Animations
- Adding a Replay Button
- The Page API (for Custom Animations)
If you have any other questions regarding Animations, reach out to a member of the Flexitive Support team at email@example.com.