How to Add Lottie Animations in the ShortPoint Code Design Element

This article will walk you through on 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