How to Disable the Default Tiles Animation

The Tiles Design Element has a default animation:

In this article, you will learn how to disable it:

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Copy the code
  • Step 2: Edit the SharePoint site
  • Step 3: Edit the Tiles Design Element
  • Step 4: Paste the code
  • Step 5: Save

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 have an existing Tiles Design Element on your page.

Interactive Tutorial

Before proceeding with the interactive tutorial below, copy the following Custom CSS:

.shortpoint-tile:hover .shortpoint-tile-content,
.shortpoint-tile .shortpoint-tile-content {
    top: 80% !important;
}

NOTEYou may need to adjust the 80% value depending on the amount of text presented on the tiles. If the title of the tile is long, use smaller values.

Step-by-step Tutorial

Follow the steps below for a detailed guide on how to disable the Tiles animation:

Step 1: Copy the code

• Copy the Custom CSS below:

.shortpoint-tile:hover .shortpoint-tile-content,
.shortpoint-tile .shortpoint-tile-content {
    top: 80% !important;
}

NOTEYou may need to adjust the 80% value depending on the amount of text presented on the tiles. If the title of the tile is long, use smaller values.

Step 2: Edit the SharePoint site

• Click Edit:

• Select the ShortPoint tag.
• Then, click the pencil icon.

Step 3: Edit the Tiles Design Element

• Look for the Tiles Design Element and click the cogwheel icon.
• Navigate to the Custom CSS tab.

Step 4: Paste the code

• Paste the copied code from Step 1 in the field provided.
• Then, click the green checkmark.

Step 5: Save

• Click Save to apply all your changes:

Congratulations! You now know how to disable animation effects on Tiles.

Related articles:

• Add Custom CSS to a ShortPoint Element Right from the Page Builder (Advanced Tutorial)
• How to Insert Custom CSS into a Page Builder Element? (Basic Tutorial)
• How to Customize ShortPoint Design Elements using the CSS Class Name and Custom CSS