SPFx: Custom Animations for Modern SharePoint

Introduction: Modern SharePoint Pages, But Static

Modern SharePoint pages have become the standard for internal communication, dashboards, and enterprise landing pages. Yet they often suffer from a common visual flaw: all content appears simultaneously on load, giving the impression of a flat and static page.

This is precisely the problem addressed by Anim Page Motion, an open-source SPFx web part presented by Diab, a Microsoft 365 and SharePoint developer based in France. The central idea: bring configurable motion effects to modern SharePoint pages, without touching existing web parts.

The UX Problem of Static SharePoint Pages

In most SharePoint deployments, page authors have few tools to improve visual experience without involving a development team. Standard web parts do not expose animation properties, and creating custom page templates represents significant effort.

The consequences are visible:

• Critical content is not visually emphasized
• Scroll experience lacks dynamism
• Important pages (HR, communication, onboarding) struggle to capture attention

Anim Page Motion addresses this need by adding a lightweight and optional animation layer on top of existing web parts.

Technical Architecture of Anim Page Motion

Technology Stack

The solution relies on the modern SPFx stack with the following components:

Execution Flow

Anim Page Motion's operation follows a four-step workflow:

1// Simplified example of using PnPjs to read a modern page
2import { spfi } from "@pnp/sp";
3import { ClientsidePageFromFile } from "@pnp/sp/clientside-pages";
4 
5const page = await ClientsidePageFromFile(sp.web.getFileByServerRelativePath("/sites/mysite/SitePages/home.aspx"));
6const controls = page.sections
7  .flatMap(s => s.columns)
8  .flatMap(c => c.controls);

1// Principle of RevealOnScrollService
2const observer = new IntersectionObserver((entries) => {
3  entries.forEach(entry => {
4    if (entry.isIntersecting) {
5      entry.target.classList.add(`anim-${animationType}`);
6      if (playOnce) observer.unobserve(entry.target);
7    } else if (!playOnce) {
8      entry.target.classList.remove(`anim-${animationType}`);
9    }
10  });
11}, { threshold: 0.1 });
12 
13observer.observe(targetElement);

Configuration Options for Page Authors

All the power of Anim Page Motion lies in its configurability from the property pane, without any code. For each web part detected on the page, the author has the following options:

• Enable/disable: animation is opt-in per web part
• Animation type: fade, slide, fade-up, fade-up-strong (CSS presets)
• Delay: allows progressive appearance by offsetting animations between web parts
• Playback mode: once on first scroll, or replayed each time it enters the viewport
• Assisted navigation: clicking a web part name in the property pane scrolls the page to it and highlights it

Design Principles: Security and Maintainability

Independence of Targeted Web Parts

One of the most important architectural choices is that animated web parts do not need to be modified. No code changes, no special configuration, no dedicated page template. This means Anim Page Motion works with:

• Microsoft standard web parts (news, quick links, documents...)
• Third-party web parts deployed via the app catalog
• Custom web parts developed by other teams

Lightweight CSS Layer

The animation layer is intentionally CSS-based rather than JavaScript-based. This approach offers several advantages:

• Optimal performance (GPU-accelerated animations via transform and opacity)
• No interference with web part business logic
• Easy customization via additional presets
• Graceful degradation if JavaScript is disabled

Accessibility and Readability

Technical Lessons from Development

Development of Anim Page Motion highlighted several critical points for any SPFx developer working on page manipulations:

1. SharePoint DOM is dynamic: the page model and rendered elements are not immediately available at the web part's onInit() moment. It is necessary to wait until the page is fully rendered before scanning web parts and attaching observers.

2. UX impact can be significant without complete overhaul: a lightweight and targeted improvement layer can transform the perception of a page without requiring replacement of existing components.

3. Optionality is a feature: making animations entirely optional and controllable by the author ensures the solution remains viable in varied enterprise contexts.

PowerShell Script: Deploy the Web Part via PnP PowerShell

To deploy Anim Page Motion in your SharePoint tenant, you can use PnP PowerShell to automate adding the package to the app catalog:

1# Connection to the app catalog site
2$AdminUrl = "https://yourtenant-admin.sharepoint.com"
3$AppCatalogUrl = "https://yourtenant.sharepoint.com/sites/appcatalog"
4 
5Connect-PnPOnline -Url $AppCatalogUrl -Interactive
6 
7# SPFx package deployment
8$app = Add-PnPApp -Path ".\anim-page-motion.sppkg" -Overwrite
9Publish-PnPApp -Identity $app.Id -SkipFeatureDeployment
10 
11Write-Host "Anim Page Motion deployed successfully. ID: $($app.Id)" -ForegroundColor Green
12 
13# Status verification
14Get-PnPApp -Identity $app.Id | Select-Object Title, Deployed, AppCatalogVersion

References and Resources

• SharePoint Framework Samples Repository - sp-dev-fx-webparts
• PnPjs Documentation - ClientSidePage
• MDN Web Docs - Intersection Observer API
• SharePoint Framework Overview - Microsoft Learn
• PnP PowerShell - Add-PnPApp
• CSS prefers-reduced-motion - MDN

Conclusion

Anim Page Motion perfectly illustrates how SPFx remains a powerful lever for filling real UX gaps in SharePoint, aligning with the platform's model rather than circumventing it. By combining PnPjs for page scanning, Intersection Observer for viewport detection, and lightweight CSS presets for animations, this solution brings tangible value to page authors without imposing technical burden on development teams.

The approach — an optional, non-intrusive, and fully configurable improvement layer — constitutes a reusable pattern for other modern SharePoint page enhancement scenarios.