How to Add Lottie Animations in the ShortPoint Code Design Element

NOTEStarting from ShortPoint SPFx version 8.8.0.0, ShortPoint released a Lottie Design Element. Instead of adding animations through the Code Design Element, you can now directly add Lottie animations there. Check out How to Add Lottie Animation in SharePoint Using the Lottie Animation Design Element for more information.

This article will walk you through how to add a Lottie Animation to your SharePoint Page using the Code Design Element.

TABLE OF CONTENTS

• Prerequisites
• Interactive Tutorial
• Step-by-step Tutorial
  • Step 1: Insert the Code Design Element
  • Step 2: Copy the Lottie Animation Code
  • Step 3: Paste Code in the Code Design Element
  • Step 4: Insert and Save

Prerequisites

• You must have the latest version of ShortPoint SPFx installed.
• You must be a ShortPoint Designer with an active license.

Interactive Tutorial

Go through the interactive tutorial to learn how to insert Lottie Animations using the Code Design Element:

NOTE: You can choose any Lottie Animation from https://lottiefiles.com/ to add to your SharePoint page.

Step-by-step Tutorial

Here are the detailed steps on how to add Lottie Animation using the Code Design Element:

Step 1: Insert the Code Design Element

• Click the black plus icon to insert the Code Design Element.
• Then, use the search field to look for the Code Design Element.
• Click Code to open the Code Settings window.

Step 2: Copy the Lottie Animation Code

• Go to https://lottiefiles.com/ and choose the Lottie Animation you prefer.
• Customize your Lottie Animation according to your preference.
• Scroll down and click Copy Code.

Step 3: Paste Code in the Code Design Element

• Go back to your SharePoint Page.
• Paste the copied code in the HTML field.

Step 4: Insert and Save

• Once you are satisfied, click the green checkmark.
• Then, click Save to keep your progress.

Congratulations! You have successfully added a Lottie Animation to your page. Enjoy adding these creative animations to your page.

Related articles:

• How to Automatically Rotate ShortPoint Tabs Every Few Seconds Using Code Design Element (Modern Experience)
• Example Use Cases for ShortPoint Code Design Element: Part 1
• Example Use Cases for ShortPoint Code Design Element: Part 2