- When to use Pan Animations
- What Elements can I Apply Pan Animation to?
- Fill & Crop vs. Fit
- Adding Pan Animation to an Element
- Setting the Start & End Points
- Adding Pan Animation to a Background Element
- Can I use Pan Animation on an Element Multiple Times?
- Controlling Pan Animation on Different Sizes
When to use Pan Animations
Use Pan animations to change what part of an element is focused on, moving from one focus point to another, within an animation frame.
What Elements can I Apply Pan Animation to?
Pan animations can be applied to image, MP4, GIF, and shape elements.
Fill & Crop vs. Fit
The Position in Element settings, i.e Fill & Crop or Fit, you apply to your element will affect how the pan animation will play.
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’.
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.
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, select the element that you wish to apply the Pan animation to and open the Animation Effects panel on the left-hand side of the editor. Scroll to the Emphasize animations and select ‘Pan’ from the list.
Once you’ve selected the Pan effect, Start and End buttons will appear under the Pan option. A purple triangle icon will appear beneath the focus point. You’ll use this icon to set the start and end points of your Pan animation.
Setting the Start & End Points
Set the start position of your element by selecting the ‘Start’ button. By default, the start position will be the current position of the element focus point. 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.
If you want to reset this at any point, you can turn off the animation using the ‘Not Animating’ button at the top of the Animation Effects panel.
Adding Pan Animation to a Background Element
You can add a Pan animation to your background element in the same way you would add Pan to any element on your canvas. See Adding Pan Animation to an Element.
A background element is a standard Flexitive element that’s set to be the lowest layer on the canvas. Learn how to add a background element: The Background Layer
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.
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. If the element is sized or positioned differently on other sizes, you may want to adjust the Pan animation on that particular size.
Once you’ve finalized your animation, preview your design before publishing it to ensure it looks great across all sizes and channels!