Try ShortPoint nowWith the ShortPoint Code Design Element, adding web page animations like the one shown below just became easier. Follow the steps below to get started.
Quick Walkthrough
- Copy the web animation code you want to use.
- Go to your SharePoint page and edit the ShortPoint web part.
- Insert the Code Design Element.
- Paste the copied code in the HTML field, customize it to your needs, and click the green check mark.
- Save and Publish.
TABLE OF CONTENTS
Prerequisite
- You must have the latest version of ShortPoint SPFx installed in your SharePoint environment.
- You must be a ShortPoint Designer with an active license.
Step-by-step Tutorial
Follow the steps to learn how to add a web page animation to your SharePoint page:
Step 1: Copy the Web Page Animation Code
- Copy the web page animation code you want to use:
Option 1:
<head><style>body { background-color: white; animation-name: example; animation-duration: 4s;}@keyframes example { from {background-color: black;} to {background-color: white;}}</style></head>
Option 2:
<body> <style> body {animation: fadeIn ease 5s;-webkit-animation: fadeIn ease 5s;-moz-animation: fadeIn ease 5s;-o-animation: fadeIn ease 5s;-ms-animation: fadeIn ease 5s;}@keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}@-moz-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}@-webkit-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}@-o-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}}@-ms-keyframes fadeIn {0% {opacity:0;}100% {opacity:1;}} </style> </body>
Step 2: Edit the ShortPoint Web Part
- Go to the SharePoint page where you want to add a web page animation and click Edit:
- Close the Toolbox:
- Select the ShortPoint tag:
- Click the Edit Properties icon:
Step 3: Insert the Code Design Element
- Click the plus icon to open the library of Design Elements:
- Use the search bar to look for Code and select it:
Step 4: Paste the Code
- Paste the code in the HTML field and customize it according to your needs:
Step 5: Disable Sandbox Mode
- Go to the Design tab:
- Disable Sandbox Mode:
- Click the green check mark:
NOTEMake sure that Sandbox Mode is disabled. Otherwise, the web page animation will not be applied to the whole page.
Step 6: Save
- Click Save to apply your changes:
- Once you’re ready to make your changes live, click Publish:
That’s it! You now have a web page animation on your SharePoint page.
Related articles:
- How to Insert a Stock Widget to a SharePoint Page Using the ShortPoint Code Design Element
- How to Add Canva Designs into a SharePoint Site Using the ShortPoint Code Design Element
- How to Insert a Digital Clock into a SharePoint Page Using the ShortPoint Code Design Element
- How to Embed a Viva Engage Custom Feed to the SharePoint Page Using ShortPoint Code Design Element
- The Value of Motion Design: How to Use CodePen Codes in Modern SharePoint Pages
- How to Add Lottie Animations in the ShortPoint Code Design Element
