Try ShortPoint nowIn this article we will show you how to enable and use the animation feature, available for the ShortPoint Row and Column Design Elements.
By default, the animation feature is disabled for the Rows and Columns. You can enable it using the Animation tab, and bring some emphasis and attention-guiding hints to your content:
| Row | Column |
 |  |
TABLE OF CONTENTS
Before we begin
- The animation feature is available since ShortPoint first version. However, we always recommend using the latest public version of ShortPoint on your SharePoint sites.
- The animation feature for the Row and Column is supported in all SharePoint environments (Office 365, SharePoint 2019, SharePoint 2016 and SharePoint 2013).
Enable Animation
To enable the animation feature on the ShortPoint Row or Column, you need to switch to the Animation tab and toggle the Enable Animation option:
Customizing Animation Options
Once the animation is enabled, you will see the list of the animation configuration options:
Animation type
You need to start with choosing the animation type:
Once you click the animation type, you can observe the animation effect on the Animation type field. It helps you to decide on the animation you would like to use in case you have some doubts, or do not know how exactly some options work.
Animation types are grouped by categories:
Attention Seekers
This animation type category has several animations usually used to catch the user's attention once he/she is viewing the content.
These animations are bounce, flash, pulse, rubber-band, shake, head-shake, swing, tada, wobble, and jello.
Bouncing Entrances
This animation effect is used to move the content quick away from a surface after hitting it on the animation entrance.
You can also choose in which direction the animation should be played: bounce-in-up, bounce-in-down, bounce-in-left, bounce-in-right.
Bouncing Exits
This animation effect is used to move the content quick away from a surface after hitting it on the animation exit.
You can also choose in which direction the animation should be played: bounce-out-up, bounce-out-down, bounce-out-left, bounce-out-right.
Fading Entrances
This animation effect allows for the content to gradually appear.
You can also choose in which direction the animation should be played: fade-in-up, fade-in-down, fade-in-left, fade-in-right.
If you need to make the animation even more visible, you can set it to be big: fade-in-up-big, fade-in-down-big, fade-in-left-big, fade-in-right-big.
Fading Exits
This animation effect allows for the content to gradually disappear.
You can also choose in which direction the animation should be played: fade-out-up, fade-out-down, fade-out-left, fade-out-right.
If you need to make the animation even more visible, you can set it to be big: fade-out-up-big, fade-out-down-big, fade-out-left-big, fade-out-right-big.
Flippers
This animation effect is used to show the front and back of the content.
You can choose if the animation should be performed on entrance or exit, and set if it should be played around the abscissa (horizontal axis, X) or ordinate (vertical axis, Y): flip-in-x, flip-in-y, flip-out-x, flip-out-y.
Lightspeed
This animation effect is used for the content to appear/disappear quickly, hence here is the association with the light speed.
You need to choose if the animation should be performed on entrance or exit: lightspeed-in, lightspeed-out.
Rotating Entrances
This animation effect provides to move or cause the content moving in a circle on the animation entrance.
You can also choose in which direction the animation should be played: rotate-in-down-left, rotate-in-down-right, rotate-in-up-left, rotate-in-up-right.
Rotating Exits
This animation effect provides to move or cause the content moving in a circle on the animation exit.
You can also choose in which direction the animation should be played: rotate-out-down-left, rotate-out-down-right, rotate-out-up-left, rotate-out-up-right.
Specials
Along with the Attention Seekers, Specials animations as well make the content more eye-catching on animation entrance or exit.
These animations are hinge, roll-in, and roll-out.
Zooming Entrances
This animation effect is used to enlarge the size of the content view over a particular interval of time.
You can also choose in which direction the animation should be played: zoom-in-up, zoom-in-down, zoom-in-left, zoom-in-right.
Zooming Exits
This animation effect is used to reduce the size of the content view over a particular interval of time.
You can also choose in which direction the animation should be played: zoom-out-up, zoom-out-down, zoom-out-left, zoom-out-right.
Sliding Entrances
This animation effect is used to move the content smoothly on entrance.
You can also choose in which direction the animation should be played: slide-in-up, slide-in-down, slide-in-left, slide-in-right.
Sliding Exits
This animation effect is used to move the content smoothly on exit.
You can also choose in which direction the animation should be played: slide-out-up, slide-out-down, slide-out-left, slide-out-right.
Note: You can check the Animate.css library to get more familiar with the animation feature.
Duration
Choose how long you want the animation to last. Use the slider button to set the duration or type the number to the respective field.
Note: The default value is half a second.
Show on init
You can enable the Show on init option if you want the content to be displayed by default not on entrance.
Offset
Control at what location of the page the animation should kick off. Use the slider button to set the offset value or type the number to the respective field.
Note: The default value is 75%.
Delay
Decide how long you want to wait after the page is loaded before kicking off the animation. Use the slider button to set the delay value or type the number to the respective field.
Please note that the delay value should be defined in seconds.
Example
Here is an example of the animation we have set for the Row that has Tiles Design Element as its content:
In the example above we used the following animation settings: - Animation type: rubber-band; - Duration: 4 seconds; - Show on init: enabled; - Offset: 91%; - Delay: 2.5 seconds.
That's it. You can play around with the animation options to find the best one for your Rows and Columns.
Related articles:
