What are column animations?
Column animations are moving visual effects that can be applied to row columns by adding an animation type to give the contents of the column the appearance of fading, flipping, sliding or zooming.
Column animations are applied to mobile and non-mobile views and are triggered when a customer scrolls past the relevant column. All of the animation types can be customised by adjusting the duration of the animation or by adding a delay to when the animation starts.
Using dynamic and interactive elements such as animations can help to engage your customers and improve their user experience while allowing you to emphasise calls-to-action or important information.
Where are column animations supported?
You can use animations on columns in page rows, footer rows, event description rows and product description rows.
How do I add a column animation?
In the admin area
When you change an animation, the animation will immediately be displayed in the relevant Animation preview on the right-hand side of your screen.
For page row columns:
Go to Website > Pages.
Find the page that contains the row with the column you want to apply an animation to and click it.
Click the Content tab.
Find the row that contains the column you want to apply an animation to and click the Settings button in the relevant Column.
Under the Animation for non-mobile heading, select a Type.
Enter a Delay.
Enter a Duration.
Check/uncheck Only play the animation once.
Under the Animation for mobile heading, select a Type.
Enter a Duration.
Check/uncheck Only play the animation once.
Click the Update button.
For footer row columns:
Go to Website > Settings > Footer.
Find the row that contains the column you want to apply an animation to and click the Settings button in the relevant Column.
Under the Animation for non-mobile heading, select a Type.
Enter a Delay.
Enter a Duration.
Check/uncheck Only play the animation once.
Under the Animation for mobile heading, select a Type.
Enter a Duration.
Check/uncheck Only play the animation once.
Click the Update button.
For event description row columns:
Go to Website > Commerce > Events.
Find the event that contains the row with the column you want to apply an animation to and click it.
Find the row that contains the column you want to apply an animation to and click the Settings button in the relevant Column.
Under the Animation for non-mobile heading, select a Type.
Enter a Delay.
Enter a Duration.
Check/uncheck Only play the animation once.
Under the Animation for mobile heading, select a Type.
Enter a Duration.
Check/uncheck Only play the animation once.
Click the Update button.
How do I edit a column animation?
In the admin area
When you change an animation, the animation will immediately be displayed in the relevant Animation preview preview on the right-hand side of your screen.
For page row columns:
Go to Website > Pages.
Find the page that contains the row with the column you want to apply an animation to and click it.
Click the Content tab.
Find the row that contains the column that you are looking for and click the Settings button in the column.
Edit the details for the Animation for non-mobile and Animation for mobile.
Click the Update button.
For footer row columns:
Go to Website > Settings > Footer.
Find the row that contains the column you want to apply an animation to and click the Settings button in the relevant Column.
Edit the details for the Animation for non-mobile and Animation for mobile.
Click the Update button.
How do I delete a column animation?
In the admin area
For page row columns:
Go to Website > Pages.
Find the page that contains the row with the column you want to apply an animation to and click it.
Click the Content tab.
Find the row that contains the column that you are looking for and click the Settings button in the column.
Clear the Type for the Animation for non-mobile and Animation for mobile.
Click the Update button.
For footer row columns:
Go to Website > Settings > Footer.
Find the row that contains the column that you are looking for and click the Settings button in the column.
Clear the Type for the Animation for non-mobile and Animation for mobile.
Click the Update button.
What are mobile and non-mobile animations?
Non-mobile animations are displayed when the customer views your site using a device with a larger display, such as a laptop or desktop computer. Mobile animations are displayed when the customer views your site using a device with a smaller display, such as a mobile phone or a tablet.
Are there any differences between mobile and non-mobile animations?
Mobile animations do not support a delay on when the animation starts as animation delays were ineffective when used on mobile devices.