How To Add Animation To SharePoint 2013 Web Part

Adding animation to your SharePoint 2013 web part can bring it to life and enhance its visual appeal. By utilizing Particle animation effects with particles.js, you can create stunning animated elements that capture your audience’s attention.

In this article, we will guide you through the process of adding animation to your SharePoint 2013 web part. We will be using Particle animation effects with particles.js to achieve the desired effects. This powerful tool allows you to create mesmerizing animations that will take your web part to the next level.

To get started, you will need to create a SharePoint Framework web part project using the Yeoman SharePoint generator. This will provide you with the necessary structure and files to work with. Once you have the project set up, you can proceed with configuring the web part property panel.

In order to add the animation, you will need to add the particle npm package as a dependency and configure the web part property panel to include an editor control for the particle JSON code. This will enable you to easily customize the animation and make adjustments as needed.

Next, you will need to modify the code in the AnimatedWelcomeWebPart.ts file. This includes adding the property interface and importing the propertyFieldCodeEditor control. These changes will allow you to integrate the animation into your web part and make it fully functional.

After making the necessary code modifications, you will need to update the render method in the AnimatedWelcome component. This is where you will include the Particle component and define the text content for your web part. By customizing the appearance in the AnimatedWelcome.module.scss file, you can further enhance the visual appeal of your animated web part.

It is important to note that SharePoint Online may have limitations on animation support. If you are using a Hero web part, you may encounter issues with animated GIFs not working properly. However, there is a workaround for this. You can upload the GIFs to an external CDN or website and then link to them in your web part. This will ensure that your animation works seamlessly and provides the desired visual impact.

In conclusion, by following these steps and utilizing Particle animation effects with particles.js, you can easily add animation to your SharePoint 2013 web part. This will allow you to create dynamic and engaging user experiences that leave a lasting impression.

Steps to Add Animation to SharePoint 2013 Web Part

To add animation to your SharePoint 2013 web part, follow these steps to ensure a smooth integration and optimal results.

  1. Create a SharePoint Framework web part project using the Yeoman SharePoint generator.
  2. Add the particle npm package as a dependency in your project.
  3. Configure the web part property panel to include an editor control for the particle JSON code.
  4. Modify the code in the AnimatedWelcomeWebPart.ts file to include the necessary property interface and import the propertyFieldCodeEditor control.
  5. Update the render method in the AnimatedWelcome component to include the Particle component and the desired text content for the web part.
  6. Customize the appearance of the web part by modifying the styles in the AnimatedWelcome.module.scss file.
  7. Edit the web part to add the particle JSON code and configure the animation according to your preferences.

Please note that SharePoint Online may have limitations on animation support. If you are using a Hero web part, there may be issues with animated GIFs not working properly. In such cases, a workaround is to upload the GIFs to an external CDN or website and then link to them in the web part to ensure proper functionality.

Example: Particle Animation Configuration

“particles”: {
“number”: {
“value”: 80
},
“size”: {
“value”: 3
},
“shape”: {
“type”: “circle”
},
“color”: {
“value”: “#000000”
}
}

By following these steps and considering the limitations in SharePoint Online, you can successfully add animation to your SharePoint 2013 web part, enhancing the visual experience and engagement of your users.

Considerations and Workarounds for Animation in SharePoint Online

While adding animation to your SharePoint Online web part, it’s essential to be aware of certain considerations and explore workarounds for potential limitations and issues.

SharePoint Online may have limitations on animation support, so it’s important to test and ensure compatibility with the platform. One specific limitation to note is with Hero web parts, where animated GIFs may not work properly. This can be a frustrating experience for users who expect the animations to play seamlessly.

To address this issue, a workaround is to upload the animated GIFs to an external content delivery network (CDN) or website, and then link to them in your web part. This ensures that the animations will function correctly, even within the constraints of SharePoint Online’s limitations.

When configuring your web part, be sure to check if there are any specific settings or options related to animation support. It’s recommended to thoroughly test the web part’s functionality and appearance after adding animation to ensure a smooth user experience.

Meet the Author

Abdul Rahim has been working in Information Technology for over two decades. Learn how Abdul got his start as a Tech Blogger , and why he decided to start this Software blog. If you want to send Abdul a quick message, then visit his contact page here.