TABLE OF CONTENTS


What is a Transform Animation?


The Transform animation is a custom animation that allows you to animate an element to: 

  • move in a straight path between two fixed positions on the canvas 
  • adjust the element size 
  • apply rotation within a single animation frame. 


In any given frame you can apply one or all of these transformations to an element. 




What Elements can I Apply Transform Animations to?


A Transform animation can be applied to image elements. Image elements include JPGs, PNGs, SVGs, and GIFs.


Adding Transform Animation to an Element


To apply a Transform Animation: 

  • Select the image element that you wish to animate 
  • Open the Animation Effects panel on the left-hand side of the editor 
  • Navigate to Custom and select ‘Transform’ from the list. 


Once you’ve selected the Transform effect, the Start and End buttons will appear, along with Rotation Direction controls. 


Setting the Start & End Points


By defining a Start and End point, you determine how the element will appear at the beginning and end of the animation frame. Throughout the animation, the element transitions its position, size, and rotation from the start state to its end state. 


Start Point: This refers to the state of the element at the start of the animation frame, including the size, position, and rotation settings. The element's current state on the canvas serves as the default start point. 


End Point: Refers to the state of the element at the end of the animation frame. including the size, position, and rotation settings. 


To adjust the start and end points, select Start or End under the Transform animation and adjust the Size, Position, and Rotation settings accordingly. 


When adjusting the Start and End points, visual guides including purple directional lines and element outlines will assist you in visualizing the transitions. These guides will outline the Start or End state that is not currently selected. 


Size, Position, and Rotation Settings


Learn how to adjust the size, position, and rotation of your element: 


Element Size: 

As you adjust the element size on canvas, the element's aspect ratio must be maintained. Find a full guide on Adjusting Size. 


Element Position: 

Find a full guide on adjusting an Element Position. 


Element Rotation: 

When rotating an element, the rotation direction is set to clockwise by default. Find a full guide on adjusting Element Rotation. 


Applying Animations to One Size vs All Sizes


Applying animations in Flexitive is an All Sizes change, so setting an element to have a transform animation on a frame will make it have a transform animation on all sizes. 


However, size, position and rotation are all One Size changes, so it is possible to have your transform behave differently across different sizes. 


Learn more about Changes that Affect All Sizes vs Just the Current Size. 


How can I Preview Transform?


Preview the Transform animation using;


1. The Animation Keyframes Panel: 

  • On the Animation Keyframes Panel, select the frame you would like to preview and select the Play button at the top of the panel. 




2. Animation Effects Panel 

  • After applying a Transform animation, click on the ‘Transform’ button in the Animation Effects panel to preview the animation on canvas. 



3. Generating a Preview Page 


Is the Transform Animation Restricted to only one Frame?


Yes, the Transform Animation starts and ends on a single animation frame. 


However, you can apply Transform to the same element on different frames. 


Can I Apply Both a Pan and Transform Animation Effect to an Element?


You can apply only one animation effect to an element within a single frame. However, you can apply both Pan and Transform to an element on separate frames. Learn more about Pan Animations.