Animation or Motion Effects Using Office UI Fabric/Fluent UI In SPFx

Introduction

Fluent UI motion attracts the attention of the user and provides an interaction while using the React component. To learn more about fluent Motion, please refer to its documentation here. Even though the documentation is very clear, a simple example is missing. In this article, we will see how we can use the motion effects in the SPFx webpart.

Initial Steps

Create a react framework webpart using yo @microsoft/SharePoint command. Refer to this article if this is your first webpart.
Now if you check your package.json, you can see that office-ui-fabric-react package is already present. Therefore, there's no need to install any other package to get started.
1. "office-ui-fabric-react": "6.189.2",
Now, I have created a CSS class style called rectangle in my SCSS file in global scope:
1. :global {
2. .rectangle{
3. width: 100px;
4. height: 200px;
5. background: green;
6. background-color: green;
7. }
8. }
In my main component file, I have created a state variable called rectangleClassName and given the initial value as a rectangle
1. this.state = {
2. rectangleClassName: "rectangle"
3. }
In my render() method, I have created a div and className as the state variable:
1. <div className={this.state.rectangleClassName}></div>
If you run the gulp serve, you can see the darkgreen color rectangle in the browser.

Steps to Apply a Motion Effect

The motion effect will be applied, only when it is added to the DOM. The effects will be visible when adding it for the first time. If you want to apply a new effect to the same element, the previous effect has to be removed and the new effect has to be added. Let's see in the example.
To apply the effect, I have created a button and on a button click, the fluent UI motion class name will be added to the rectangleClassName state variable.
In the render() method,
1. //imported PrimaryButton component from fabric react
2. import { PrimaryButton } from 'office-ui-fabric-react';
4. //in the render method, add the button and call the method to add classname
5. <PrimaryButton text="rotate90deg" onClick={this.rotate90deg} />
The method adds the rotate 90 degree motion class:
1. private rotate90deg = () => {
2. this.setState({
3. rectangleClassName: "rectangle ms-rotate90deg"
4. });
5. }
Now save the file. In the workbench, if you click the button rotate90degree, you can see the effect being applied.
In the attached source code, I have added 4 more effects:

List of Motion Effect Classnames

Slide effects	Scale effects	Fade effects	Expand collapse effects	Delay effects	Rotate effects
ms-slideRightIn10	ms-scaleUpIn100	ms-fadeIn100	ms-expandCollapse100	ms-delay100	ms-rotate90deg
ms-slideRightIn20	ms-scaleUpOut103	ms-fadeIn200	ms-expandCollapse200	ms-delay200	ms-rotateN90deg
ms-slideRightIn40	ms-scaleDownOut98	ms-fadeIn400	ms-expandCollapse400
ms-slideRightIn400	ms-scaleDownIn100	ms-fadeIn500
ms-slideRightOut40	ms-fadeOut100
ms-slideRightOut400	ms-fadeOut200
ms-slideLeftIn10	ms-fadeOut400
ms-slideLeftIn20	ms-fadeOut500
ms-slideLeftIn40
ms-slideLeftIn400
ms-slideLeftOut40
ms-slideLeftOut400
ms-slideUpIn10
ms-slideUpIn20
ms-slideDownIn10
ms-slideDownIn20
ms-slideUpOut10
ms-slideUpOut20
ms-slideDownOut10
ms-slideDownOut20