In 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:


RowColumn



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 SeekersSpecials 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-downslide-in-leftslide-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;
  • Duration4 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: