SPFx : animations personnalisées pour SharePoint moderne

Introduction : des pages SharePoint modernes, mais statiques

Les pages SharePoint modernes sont devenues le standard pour la communication interne, les tableaux de bord et les landing pages d'entreprise. Pourtant, elles souffrent souvent d'un défaut visuel commun : tout le contenu apparaît simultanément au chargement, donnant une impression de page plate et statique.

C'est précisément le problème qu'adresse Anim Page Motion, un web part SPFx open source présenté par Diab, développeur Microsoft 365 et SharePoint basé en France. L'idée centrale : apporter des effets de mouvement configurables aux pages SharePoint modernes, sans toucher aux web parts existants.

Le problème UX des pages SharePoint statiques

Dans la plupart des déploiements SharePoint, les auteurs de pages disposent de peu de leviers pour améliorer l'expérience visuelle sans impliquer une équipe de développement. Les web parts standards n'exposent pas de propriétés d'animation, et créer des templates de pages personnalisés représente un effort conséquent.

Les conséquences sont visibles :

• Le contenu critique n'est pas mis en valeur visuellement
• L'expérience de défilement manque de dynamisme
• Les pages importantes (RH, communication, onboarding) peinent à capter l'attention

Anim Page Motion répond à ce besoin en ajoutant une couche d'animation légère et optionnelle par-dessus les web parts existants.

Architecture technique d'Anim Page Motion

Stack technologique

La solution repose sur le stack SPFx moderne avec les composants suivants :

Flux d'exécution

Le fonctionnement d'Anim Page Motion suit un flux en quatre étapes clairement délimitées :

1// Exemple simplifié d'utilisation de PnPjs pour lire une page moderne
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// Principe du service 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);

Options de configuration pour les auteurs de pages

Toute la puissance d'Anim Page Motion réside dans sa configurabilité depuis le property pane, sans aucune ligne de code. Pour chaque web part détecté sur la page, l'auteur dispose des options suivantes :

• Activation/désactivation : l'animation est opt-in par web part
• Type d'animation : fade, slide, fade-up, fade-up-strong (presets CSS)
• Délai : permet de créer une apparition progressive en décalant les animations entre web parts
• Mode de lecture : une seule fois au premier scroll, ou rejouée à chaque entrée dans le viewport
• Navigation assistée : cliquer sur le nom d'un web part dans le property pane fait défiler la page jusqu'à lui et le met en surbrillance

Principes de conception : sécurité et maintenabilité

Indépendance des web parts cibles

L'un des choix d'architecture les plus importants est que les web parts animés n'ont pas besoin d'être modifiés. Aucun changement de code, aucune configuration spéciale, aucun template de page dédié. Cela signifie qu'Anim Page Motion fonctionne avec :

• Les web parts standard Microsoft (actualités, liens rapides, documents...)
• Les web parts tiers déployés via le catalogue d'applications
• Les web parts personnalisés développés par d'autres équipes

Couche CSS légère

La couche d'animation est intentionnellement basée sur CSS plutôt que sur JavaScript. Cette approche offre plusieurs avantages :

• Performances optimales (animations accélérées GPU via transform et opacity)
• Aucune interférence avec la logique métier des web parts
• Facilité de personnalisation via des presets supplémentaires
• Dégradation gracieuse si JavaScript est désactivé

Accessibilité et lisibilité

Leçons techniques tirées du développement

Le développement d'Anim Page Motion a mis en évidence plusieurs points critiques pour tout développeur SPFx travaillant sur des manipulations de page :

1. Le DOM SharePoint est dynamique : le modèle de page et les éléments rendus ne sont pas immédiatement disponibles au moment du onInit() du web part. Il est nécessaire d'attendre que la page soit complètement rendue avant de scanner les web parts et d'attacher les observers.

2. L'impact UX peut être significatif sans refonte complète : une couche d'amélioration légère et ciblée peut transformer la perception d'une page sans nécessiter de remplacer les composants existants.

3. L'optionnalité est une fonctionnalité : rendre les animations entièrement optionnelles et contrôlables par l'auteur garantit que la solution reste viable dans des contextes d'entreprise variés.

Script PowerShell : déployer le web part via PnP PowerShell

Pour déployer Anim Page Motion dans votre tenant SharePoint, vous pouvez utiliser PnP PowerShell pour automatiser l'ajout du package au catalogue d'applications :

1# Connexion au site du catalogue d'applications
2$AdminUrl = "https://votretenant-admin.sharepoint.com"
3$AppCatalogUrl = "https://votretenant.sharepoint.com/sites/appcatalog"
4 
5Connect-PnPOnline -Url $AppCatalogUrl -Interactive
6 
7# Déploiement du package SPFx
8$app = Add-PnPApp -Path ".\anim-page-motion.sppkg" -Overwrite
9Publish-PnPApp -Identity $app.Id -SkipFeatureDeployment
10 
11Write-Host "Anim Page Motion déployé avec succès. ID : $($app.Id)" -ForegroundColor Green
12 
13# Vérification du statut
14Get-PnPApp -Identity $app.Id | Select-Object Title, Deployed, AppCatalogVersion

Références et ressources

• Dépôt SharePoint Framework Samples - sp-dev-fx-webparts
• Documentation PnPjs - 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 illustre parfaitement comment SPFx reste un levier puissant pour combler des lacunes UX réelles dans SharePoint, en s'inscrivant dans le modèle de la plateforme plutôt qu'en le contournant. En combinant PnPjs pour le scan de page, l'Intersection Observer pour la détection du viewport et des presets CSS légers pour les animations, cette solution apporte une valeur tangible aux auteurs de pages sans imposer de charge technique aux équipes de développement.

L'approche — une couche d'amélioration optionnelle, non invasive et entièrement configurable — constitue un pattern réutilisable pour d'autres scénarios d'enrichissement de pages SharePoint modernes.