Try ShortPoint nowUsing the ShortPoint Code Web Part, you can add web page animations like the one shown below. If you're familiar with the Code Web Part, follow the quick walkthrough. For a detailed guide, use the step-by-step tutorial.
TABLE OF CONTENTS
Prerequisite
- You must already have the ShortPoint Code Web Part installed on your SharePoint page. To learn how to do this, check out How to Install ShortPoint Code Editor in SharePoint.
Quick Walkthrough
1. Copy the web animation code you want to use.
2. Go to your SharePoint page and add the ShortPoint Code Web Part.
3. Click the Edit Properties icon of the ShortPoint Code to edit it.
4. Delete all default codes.
5. Paste the copied code in the HTML field, customize it to your needs, and click Save.
6. Close the ShortPoint Code window.
7. Republish the page.
Step-by-step Tutorial
Go through 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. For this guide, we’ve created two web page animations you can 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: Add the ShortPoint Code Web Part
- Go to the SharePoint page where you want to add the YouTube Playlist and click Edit:
- Click the close icon to leave the Toolbox:
- Select the plus icon to add a web part:
- Use the search bar to look for ShortPoint Code, or scroll down until you see the Advanced section. Click ShortPoint Code:
Step 3: Edit the ShortPoint Code Web Part
- Click the Edit Properties icon:
Step 4: Delete Default codes
- Select each field, delete the default codes inside, and click Save:
Step 5: Paste the Code
- Click the Edit HTML field:
- Paste the code:
- You can directly edit the code in the ShortPoint Code Editor. Customize the code according to your needs and click Save:
NOTEMake sure that Sandbox Mode is disabled. Otherwise, the web page animation will not be applied to the whole page.Step 6: Republish Page
- Once satisfied, click the close icon to leave the ShortPoint Code window:
- Click Republish once you’re ready to make your changes live:
Congratulations! You've successfully added a web page animation to your SharePoint page. To explore more ways to use the ShortPoint Code web part, check out these helpful tutorials below:
- How to Add a Facebook Post to a SharePoint Page
- How to Add an Instagram Post to a SharePoint Page
- How to Add an X Post to a SharePoint Page
- How to Add a LinkedIn Post to a SharePoint Page
- How to Add a Viva Engage Feed to a SharePoint Page
- How to Add a Stock Widget to a SharePoint Page
- How to Embed a Weather Widget to a SharePoint Page
