Animate Your Profile Image Using Microsoft Graph Toolkit In SharePoint

Do you want to show some effects on your profile image? Let’s do it by combing the Microsoft Graph Toolkit, MGT Editor SharePoint Framework webpart in SharePoint page.

Microsoft Graph Toolkit is a collection of reusable web components and authentication providers for accessing and working with Microsoft Graph. These components help to fetch and work with Microsoft Graph API directly.

We have some tools or packages available on GitHub. These tools make our tasks in integrating Microsoft Graph API in SharePoint easier. This blog helps you integrate those in simple steps by animating your profile picture in SharePoint Framework webpart.

To do that, follow the below steps,

Step 1 - Deploy Microsoft graph toolkit SharePoint framework package

• Download the latest package from this location.
• Upload and deploy the package in SharePoint App Catalog

Step 2 - Deploy the MGT Editor SharePoint Framework Webpart package

• Download the mgteditor-webpart SharePoint framework webpart package from this location.
• Upload and deploy the package to SharePoint App Catalog

Step 3 - Add the webpart

• Navigate to the SharePoint site
• Install or add the package to the site from App Store page
• Create a new modern page or navigate to the existing modern page
• Add the webpart.

Step 4 - Edit and add Microsoft Graph Toolkit components with styles

Start Editing the webpart by clicking the Edit webpart icon to open the WebPart edit panel,

Add the below HTML snippet in the HTML Code editor box.

<mgt-person person-query="me">
	<template>
		<div id="outerContainer" data-if="person.personImage">
			<div id="container">
				<div class="item">
					<img src="{{ person.personImage }}" />
				</div>
				<div class="circle" style="animation-delay: -3s">
				</div>
				<div class="circle" style="animation-delay: -2s">
				</div>
				<div class="circle" style="animation-delay: -1s">
				</div>
				<div class="circle" style="animation-delay: 0s">
				</div>
			</div>
		</div>
		<div data-else>
      {{ person.displayName }}
    </div>
	</template>
</mgt-person>
<style>
#container {
  width: 200px;
  height: 200px;
  border-radius:50%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.circle {
  border-radius: 50%;
  background: rgba(53,105,243,1);
  width: 150px;
  height: 150px;
  position: absolute;
  opacity: 0;
  animation: scaleIn 6s infinite cubic-bezier(0.36, 0.11, 0.89, 0.32);
}
.item {
  z-index: 100;
  padding: 5px;
}
.item img {
  width: 100px;
  border-radius: 50%;
}
@keyframes scaleIn {
  from {
    transform: scale(0.5, 0.5);
    opacity: 0.35;
  }
  to {
    transform: scale(2.5, 2.5);
    opacity: 0;
  }
}
</style>

Then save and publish the page.

The HTML snippet contains two sections.

1. Microsoft Graph Toolkit Web component with template
2. Styles for the web component

<mgt-person> components return the queried user information

<template> with in the component used to render the HTML information

animation and transform property in style section helps to animate the background of the profile picture.

After adding the snippet, the output looks like below,