How to Apply an Animation to a Row/Column

This article will demonstrate how to add an animation to a ShortPoint Row or Column:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Edit a Row/Column
  • Step 4: Choose an Animation
  • Step 5: Customize the Animation
  • Step 6: Save
• Animation Features
• Examples

Prerequisites

• You must have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You must be a ShortPoint Designer with an active license.
• You must already have an existing Row/Column on your SharePoint page.

Interactive Tutorial

Click Get Started to add an animation:

NOTETo see the animations available and the options you can modify, check out Animation Features.

Step-by-step Tutorial

Follow the steps below to learn how to add a row/column animation:

Step 1: Edit the ShortPoint Web Part

• Go to the SharePoint page you want to use and click Edit:

• Close the Toolbox:

• Click the Edit properties icon:

Step 2: Switch to Grid Mode

NOTEEnabling Animation for Rows/Columns is currently only available in Grid Mode.

• Click the Switch to Grid Mode icon:

Step 3: Edit a Row/Column

• Hover over the Row/Column you want to use and click the cogwheel icon:

Step 4: Choose an Animation

• Go to the Animation tab.
• Toggle on Enable Animation.
• Select the Animation type you want to use.

NOTETo see the animations available and the options you can modify, check out Animation Features.

Step 5: Customize the Animation

• Customize the selected animation type according to your preferences.
• Click Preview to see how your Design Element will look.
• Once satisfied, click Update.

Step 6: Save

• Select the eye icon to see your page in real-time:

• Save your changes:

Congratulations! You’ve successfully added an animation to a Row/Column.

Animation Features

Below are the options you can customize:

	Animation Type	allows you to choose the animation you want to use. Once you decide on a specific animation type, you’ll be able to observe the animation effect in the Animation Type text. Overall, there are more than 70 animation types that you can apply. Check out the table below to see all the animation type categories.
	Duration	allows you to set how long the animation will last. The default value is half a second.
	Show on init	when enabled, it allows content to be displayed by default and not upon entrance.
	Offset	allows you to set the position on the page where the animation triggers. The default value is 75%.
	Delay	allows you to specify the time in seconds before the animation starts.

ANIMATION TYPE CATEGORIES

	Attention Seekers	This animation type category has several animations that aim to catch the viewers’ attention.
	Bouncing Entrances	This animation category has animations with bouncing entrance effects.
	Bouncing Exits	This animation category has animations with bouncing exit effects.
	Fading Entrances	This animation category has animations that allow for the content to gradually appear.
	Fading Exits	This animation category has animations that allow for the content to gradually disappear.
	Flippers	This animation category has animations that show the front and back of the content.
	Lightspeed	This animation category has animations that appear at a lightspeed.
	Rotating Entrances	This animation category has animations that allow circular entrances.
	Rotating Exits	This animation category has animations that allow circular exits.
	Specials	This animation category contains special types of animations.
	Zooming Entrances	This animation category has animations that zoom in on the content upon appearance.
	Zooming Exits	This animation category has animations that zoom in on the content upon exit.
	Sliding Entrances	This animation category has animations that have slide entrances.
	Sliding Exits	This animation category has animations that have slide exits.

NOTETo see all the animation types in action, check out Animate.css.

Examples

Below, we’ve provided some examples you can use on your own SharePoint pages:

Sample 1

The following animation settings have been used:

• Animation type: slide-in-down
• Duration: 1.3
• Delay: 0.5

Sample 2

The following animation settings have been used:

• Animation type: bounce-in
• Duration: 4.2
• Delay: 2

Sample 3

The following animation settings have been used:

• Animation type: flash
• Duration: 2
• Delay: 2

These are only some of the animations you can do. You can play around with the animation options to find the best one for your Rows and Columns.

Related articles:

• Custom CSS Tab for ShortPoint Design Elements
• Adding, Duplicating, Moving and Deleting Items in ShortPoint Design Elements
• Managing Visibility of ShortPoint Design Elements
• Managing Paddings and Margins for ShortPoint Design Elements