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

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

  1. Create a react framework webpart using yo @microsoft/SharePoint command. Refer to this article if this is your first webpart.
  2. 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",  
  3. 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. }  
  4. 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. }  
  5. In my render() method, I have created a div and className as the state variable:
    1. <div className={this.state.rectangleClassName}></div>  
  6. 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';    
    3.      
    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 effectsScale effectsFade effectsExpand collapse effectsDelay effectsRotate effects
ms-slideRightIn10ms-scaleUpIn100ms-fadeIn100ms-expandCollapse100ms-delay100ms-rotate90deg
ms-slideRightIn20ms-scaleUpOut103ms-fadeIn200ms-expandCollapse200ms-delay200ms-rotateN90deg
ms-slideRightIn40ms-scaleDownOut98ms-fadeIn400ms-expandCollapse400
ms-slideRightIn400ms-scaleDownIn100ms-fadeIn500
ms-slideRightOut40ms-fadeOut100
ms-slideRightOut400ms-fadeOut200
ms-slideLeftIn10ms-fadeOut400
ms-slideLeftIn20ms-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

Comments

Popular posts from this blog

Get All content types from ContentTypeHub using SharePoint Rest API v2 using JavaScript

Save Location details to SharePoint Location column through SPFx and PnP JS

How To Create/ Generate QRcode In SPFx Web Part