Posts

Showing posts from May, 2020

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

Image
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 StepsCreate 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.
"office-ui-fabric-react": "6.189.2",   Now, I have created a CSS class style called rectangle in my SCSS file in global scope:
:global {     .rectangle{        width: 100px;        height: 200px;        background: green;        background-color: green;     }  }   In my main component file, I have created a state varia…