SharePoint Hosting – Create Animated Welcome SharePoint Framework Webpart

Everyone thinks about integrating the animations to SharePoint. Today, we are going to unleash the Particle animation effects in the SharePoint Framework with the help of the particles.js.

Create a new Webpart

Let’s create a SharePoint Framework webpart. Navigate to the folder, where you want to store the Webpart project. Then run the below Yeoman SharePoint generator command to create a project.

yo @microsoft/sharepoint

You must answer the questions prompted by the yeoman SharePoint Generator. Let’s create a new SharePoint Solution,

• What is your solution name? animated-welcome
• Only SharePoint Online (latest) is supported. For earlier versions of SharePoint (2016 and 2019) please use the 1.4.1 version of the generator. SharePoint Online only (latest)
• Do you want to allow the tenant admin the choice of being able to deploy the solution to all sites immediately without running any feature deployment or adding apps in sites? No
• Will the components in the solution require permissions to access web APIs that are unique and not shared with other components in the tenant? No
• Which type of client-side component to create? WebPartAdd new Web part to solution animated-welcome.
• What is your Web part name? AnimatedWelcome
• What is your Web part description? Welcome webpart with Animation
• Which framework would you like to use? React

The generator takes some time (at least 2 to 3 minutes) to scaffold the folder and files with dependencies to the project folder.

To add the particle animation to the webpart. We must add the particle npm package as dependency in the webpart. For that, run the below command,

npm install react-tsparticles

The JSON value should be passed to particle js to animate. For that, add editor control in the webpart property panel. Let’s run the below command to add the pnp property controls to the project,

npm install @pnp/spfx-property-controls –save –save-exact

Develop a Webpart

Now we are ready to start developing the project. Open that project in a VS Code or any editor.

Modify Main file

Open the file AnimatedWelcomeWebPart.ts. Then replace the property interface with the below lines,

Import the propertyFieldCodeEditor control from @pnp/spfx-property-controls by adding the line before the IAnimatedWelcomeWebPartProps declaration.

Then replace the getPropertyPaneConfiguration method with the below lines,

Modify the properties for the AnimatedWelcome component in the render method by replacing it with below method,

Modify the syles

Update the classNames in style file AnimatedWelcome.module.scss with the below code snippet,

Modify the Component

To support newly added properties in the main file; Let’s modify the property file to update the properties.

Open the component file AnimatedWelcome.tsx. Then import the particle components by adding below line on top of the page,

Then replace the render method with below snippet in the same file AnimatedWelcome.tsx,

To add the text content to the webpart, add the below line under the Particles element,

Finally, the render method looks like below,

Webpart is ready. Then edit the webpart and add any JSON that supports particle js to the Edit Particle JSON code textbox.

For example, add the below JSON,