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,
export interface IAnimatedWelcomeWebPartProps {
welocomeMessage:string,
particleJson:string
}
Import the propertyFieldCodeEditor control from @pnp/spfx-property-controls by adding the line before the IAnimatedWelcomeWebPartProps declaration.
import { PropertyFieldCodeEditor, PropertyFieldCodeEditorLanguages } from '@pnp/spfx-property-controls/lib/PropertyFieldCodeEditor';
Then replace the getPropertyPaneConfiguration method with the below lines,
Join the conversation! Your thoughts help the community grow.