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.
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.
You must answer the questions prompted by the yeoman SharePoint Generator. Let's create a new SharePoint Solution,
The generator takes some time (at least 2 to 3 minutes) to scaffold the folder and files with dependencies to the project folder.
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,
Now we are ready to start developing the project. Open that project in a VS Code or any editor.
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.
protected getPropertyPaneConfiguration(): IPropertyPaneConfiguration {
return {
pages: [
{
header: {
description: "Welcome Animated Webpart"
},
groups: [
{
groupName: strings.BasicGroupName,
groupFields: [
PropertyPaneTextField('welcomeMessage', {
label: 'Welcome Message'
}),
PropertyFieldCodeEditor('particleJson', {
label: 'Edit Particle Json Code',
panelTitle: 'Edit Particle Json Code',
initialValue: this.properties.particleJson,
onPropertyChange: this.onPropertyPaneFieldChanged,
properties: this.properties,
disabled: false,
key: 'codeEditorFieldId',
language: PropertyFieldCodeEditorLanguages.JSON,
options: {
wrap: true,
fontSize: 20,
// more options
}
})
]
}
]
}
]
};
}
Modify the properties for the AnimatedWelcome component in the render method by replacing it with below method,
public render(): void {
const element: React.ReactElement<IAnimatedWelcomeProps> = React.createElement(
AnimatedWelcome,
{
welcomeMessage: this.properties.welcomeMessage,
particleJson: this.properties.particleJson
}
);
ReactDom.render(element, this.domElement);
}
Modify the syles
Update the classNames in style file AnimatedWelcome.module.scss with the below code snippet,
@import '~office-ui-fabric-react/dist/sass/References.scss';
.animatedWelcome {
.container {
margin: 0px auto;
position: relative !important;
}
.contentTopleft{
position: absolute;
text-align: center;
top:0;
height: 100%;
width: 100%;
display: flex;
align-items: center;
justify-content: center;
font-weight: 600;
font-size: 32px;
z-index: 1;
}
}
Modify the Component
To support newly added properties in the main file; Let’s modify the property file to update the properties.
Open IAnimatedWelcomeProps.ts and replace the entire file with below code,
export interface IAnimatedWelcomeProps {
welcomeMessage: string;
particleJson: any;
}
Open the component file AnimatedWelcome.tsx. Then import the particle components by adding below line on top of the page,
import Particles from 'react-tsparticles';
Then replace the render method with below snippet in the same file AnimatedWelcome.tsx,
public render(): React.ReactElement<IAnimatedWelcomeProps> {
return (
<div className={ styles.animatedWelcome }>
<Particles canvasClassName={styles.container} width='200px' height='100%'
options={JSON.parse(this.props.particleJson)}
/>
{/* <!-- Insert Welcome Message --> */}
</div>
);
}
To add the text content to the webpart, add the below line under the Particles element,
<div className={styles.contentTopleft}>
<div>
{this.props.welcomeMessage}
</div>
</div>
Finally, the render method looks like below,
public render(): React.ReactElement<IAnimatedWelcomeProps> {
return (
<div className={styles.animatedWelcome}>
<Particles canvasClassName={styles.container} width='100%' height='200px'
options={JSON.parse(this.props.particleJson)}
/>
<div className={styles.contentTopleft}>
<div>
{this.props.welcomeMessage}
</div>
</div>
</div>
);
}
Webpart is ready. Then edit the webpart and add any JSON that supports particle js to the Edit Particle JSON code textbox.
![output]()
For example, add the below JSON,
{
"fpsLimit": 60,
"particles": {
"number": {
"value": 0,
"density": {
"enable": false,
"value_area": 800
}
},
"color": {
"value": "#000"
},
"shape": {
"type": "circle",
"stroke": {
"width": 0,
"color": "#000000"
},
"polygon": {
"nb_sides": 5
}
},
"opacity": {
"value": 0.5,
"random": false,
"anim": {
"enable": false,
"speed": 1,
"opacity_min": 0.1,
"sync": false
}
},
"size": {
"value": 5,
"random": true,
"anim": {
"enable": false,
"speed": 40,
"size_min": 0.1,
"sync": false
}
},
"line_linked": {
"enable": true,
"distance": 150,
"color": "#000",
"opacity": 0.4,
"width": 1
},
"move": {
"enable": true,
"speed": 2,
"direction": "none",
"random": false,
"straight": false,
"out_mode": "out",
"attract": {
"enable": false,
"rotateX": 600,
"rotateY": 1200
}
}
},
"interactivity": {
"detect_on": "canvas",
"events": {
"onhover": {
"enable": false,
"mode": "repulse",
"parallax": {
"enable": false,
"force": 60,
"smooth": 10
}
},
"onclick": {
"enable": true,
"mode": "emitter"
},
"resize": true
},
"modes": {
"grab": {
"distance": 400,
"line_linked": {
"opacity": 1
}
},
"bubble": {
"distance": 400,
"size": 40,
"duration": 2,
"opacity": 0.8,
"mix": false
},
"repulse": {
"distance": 50
},
"push": {
"particles_nb": 4
},
"remove": {
"particles_nb": 2
}
}
},
"retina_detect": true,
"background": {
"color": "#fff",
"image": "",
"position": "50% 50%",
"repeat": "no-repeat",
"size": "cover"
},
"emitters": {
"direction": "top",
"position": {
"x": 50,
"y": 130
},
"rate": {
"delay": 0.1
},
"size": {
"width": 50,
"height": 0
},
"particles": {
"color": {
"value": [
"#5bc0eb",
"#fde74c",
"#9bc53d",
"#e55934",
"#fa7921"
]
},
"lineLinked": {
"enable": false
},
"opacity": {
"value": 0.5
},
"size": {
"value": 400,
"random": {
"enable": true,
"minimumValue": 50
}
},
"move": {
"speed": 10,
"random": false,
"outMode": "destroy"
}
}
}
}
The output of above JSON looks like below,
![output]()
For more particle JSON, check out the demo page of particle site. Stay tuned for more interesting webparts.