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. 


Transform animations are available for Enterprise accounts. For more information, reach out to your account manager or support@flexitive.com.



Watch a video tutorial on Custom Animations.



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 
  • Select the Custom tab and choose the Transform option.



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. 



Applying Easing to Custom Animations


Easing controls how fast or slow an element moves at different points within an animation frame. For example, you can set your custom animation to start slowly and then accelerate towards the end of the frame.


Easing can be applied to all Custom animations. Learn how to apply easing to Custom animations.


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 

  • Preview the Transform animation on canvas by selecting either the Transform or Preview button. 
    • Transform button - previews the Transform animation that’s applied to the element. 
    • Preview button - shows all custom animations applied to the element.



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?


Yes, you can apply both a Pan and Transform animation effect to an element. 


Learn more about Pan Animations.