How to Customize the Animate Design Element

This article will walk you through customizing the Animate Design Element and its basic features.

TABLE OF CONTENTS

• Prerequisite
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Edit the ShortPoint Web Part
  • Step 2: Switch to Grid Mode
  • Step 3: Insert the Animate Design Element
  • Step 4: Add Content
  • Step 5: Select Animation Type
  • Step 6: Save
• Animate Features
  • A. Content tab
  • B. Animate tab
  • C. Visibility Tab
  • D. Custom CSS Tab

Prerequisite

• You have the latest version of ShortPoint SPFx installed on your SharePoint environment.
• You are a ShortPoint Designer with an active license.

Interactive Tutorial

Click Get Started to learn how to customize the Animate Design Element:

NOTECheck out Animate Features to learn more about the OOTB options you can customize.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to customize the Animate Design Element:

Step 1: Edit the ShortPoint Web Part

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

• Click the ShortPoint tag.
• Select the pencil icon.

Step 2: Switch to Grid Mode

NOTEThe Animate Design Element is currently only available in Grid Mode.

• Click the Switch to Grid Mode icon.

Step 3: Insert the Animate Design Element

• Click the gray plus icon.

• Use the search box to look for Animate and click it.

Step 4: Add Content

• Click anywhere around the white area to start editing content.
• Write and customize the content you want to display.

NOTECheck out Animate Features to learn more about the options you can use in the Rich Text Editor.

Step 5: Select Animation Type

• Navigate to the Animation tab.
• Select the Animation Type you want to use.
• Then, customize the Animation according to your preference.
• Once satisfied, click Insert.

NOTECheck out Animate Features to learn more about the OOTB options you can customize.

Step 6: Save

• Then, click the eye icon to see your page in real-time.

• Click Save to apply all your changes.

Animate Features

Below are the options you can find in the Animate Settings window:

A. Content tab

The Content tab allows you to edit the content of the Animate Design Element. 

It has a Rich Text Editor, which allows you to customize how your text will appear on your page. It has the following options:

The Rich Text Editor also has ShortPoint Inline Design Elements. You can see them by clicking the ShortPoint icon:

It has the following options:

NOTECheck out Introducing Inline Design Elements Feature for ShortPoint Page Builder Live Mode and ShortPoint Page Builder Grid to learn more about Inline Design Elements.

B. Animate tab

The Animate tab allows you to select the Animation Type and customize how the animation appears on your page. It has the following options:

	Type	allows you to choose the animation style of the content.
	Show on init	when enabled, the content will be displayed by default.
	Duration	allows you to modify how long you want the animation to last. By default, it is set to half a second.
	Delay	allows you to customize how long before the animation will play.
	Offset	allows you to choose where the animation should kick off. By default, it is set to 75%.

C. Visibility Tab

The Visibility tab allows you to modify the people and the devices that can see the Animate Design Element. It has the following options:

PEOPLE AND GROUP

	This ShortPoint is visible only for	allows you to assign the people the Animate Design Element will be visible.
	Do not show it for	allows you to assign the people whom you do not want to show the Animate Design Element.
	Enable advanced settings	when enabled, additional settings will appear.
	Enable support for other groups	enable this option if you want to support visibility to AD Group, Office 365 Group, or Security Group. NOTE: Check out How to Set ShortPoint Element Visibility to Active Directory Security Group to learn more about this option.
	Use group names	By default, ShortPoint will use Group ID on the backend. Enable this option if you want to use Group Name instead. This is useful if you want to keep the same visibility settings when migrating from one site to another.

DEVICES

Do not show ShortPoint on the following devices

allows you to choose the devices where you want the Animate Design Element to be shown.

D. Custom CSS Tab

This tab allows you to use your own CSS, HTML, and Javascript code to customize the Animate Design Element. 

NOTECheck out our support article on How to Insert Custom CSS into a Design Element? (Basic Tutorial) to know more about Custom CSS.

That’s it! You now know how to customize the Animate Design Element. Try using these amazing features on your pages.

Related articles:

• How to Customize the Before and After Design Element
• How to Customize the Well Design Element
• How to Customize the Textshow Design Element
• How to Customize the Info Design Element