Index


Use Pan animations to pan across an element in your design, moving from one focus point to another, within an animation frame.


Learn more about custom animations: Custom Animations


Watch a video tutorial on Custom Animations.




What Elements can I Apply Pan Animation to?


Pan animations can be applied to image, text, MP4, and shape elements.


Fill & Crop, Fit and Stretch


The Position in Element settings, i.e Fill & Crop or Fit, you apply to your element will affect how the pan animation will play.


Pan animations can not be applied to elements set to Stretch.

We recommend setting your element’s Position in Element to ‘Fill & Crop’. When set to ‘Fill & Crop’, the element can pan from one focus point to another, in any direction.



Set the Position in Element to ‘Fill & Crop’ by opening the Size and Position panel from the left-hand side, scrolling to the Position In Elements options, and selecting ‘Fill & Crop’.


Learn more about Fit, Fill and Cropping, & Zoom



Use the Zoom Slider in the Size and Position Panel to zoom in or zoom out of your element and set a more precise focus point.


Learn more about Zoom




You can also set your element’s Position in Element to ‘Fit’, which will pan across the element from one point in the bounding box to another, in any direction.




To set the Position in Element to ‘Fit’, open the Size and Position panel from the left-hand side, scroll to the Position In Elements options, and select ‘Fit’.




Adding Pan Animation to an Element


To apply a Pan animation to an element, select the element from the canvas or Layers panel and open the Animation Effects panel on the left-hand side of the editor. 


Under the Custom tab, select Pan.




The Start and End buttons will appear once you’ve selected the Pan effect. On the canvas, a purple triangle icon will appear beneath the focus point of the selected element. You’ll use this icon to set the start and end points of your Pan animation.




Setting the Start & End Points


By default, both the start and end positions will be the current position of the element focus point. 




To set the start position of your element, select the ‘Start’ button. You can adjust the start position by either moving the focus icon on your element in any direction or double-clicking the area where you would like the element to move to, using the element grids as a guide.



Set the end position of your element by selecting the End button and either moving the focus icon on your element in any direction or double-clicking one of the element grids. 


The purple line will show the element's pan animation direction from start to end. 


To reset this at any point, you can turn off the animation by selecting the X at the end of the Pan animation button. 



Preview Custom Animations


You can preview your Pan animation by selecting either the Pan or Preview button. 

  • Pan button - previews the Pan animation that’s applied to the element. 
  • Preview button - shows all custom animations applied to the element.




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.


Can I use Pan Animation on an Element Multiple Times?


You can apply one pan animation to an element per frame. If you’d like to add another pan animation, you need to add a new animation frame.


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 Transform Animations. 


Controlling Pan Animation on Different Sizes


Adding an animation to an element is a change that will affect all sizes. If a Pan animation is added to Element A on a size 300x250, it will also be applied to the same element on any other active sizes. Adjusting the focus point of the element is a 1-size change and so will only affect the current size you are working in. 


Once you’ve finalized your animation, preview your design before publishing it to ensure it looks great across all sizes and channels!