Le Problème

Les animations de chargement sont l'une de mes façons préférées de rendre un site web plus interactif et personnalisé. Mais avec Framer, les faire apparaître uniquement lors du chargement initial ou lors d'un rafraîchissement (et non lors de la navigation intra-site) peut être compliqué.

J'ai rencontré ce problème sur plusieurs projets clients, alors j'ai finalement pris le temps de le résoudre. Après avoir testé différentes approches, j'ai créé cette simple Modification de Code qui fonctionne parfaitement.

La Solution

Voici le code. Copiez-le, appliquez-le à votre composant d'animation de chargement, et vous êtes prêt à partir :

import { useEffect } from "react"

import type { ComponentType } from "react"

import { createStore } from "https://framer.com/m/framer/store.js@^1.0.0"

// Créez un store pour gérer l'état de visibilité

const useStore = createStore({

isVisible: false, // État par défaut

hasChecked: false, // Empêcher la boucle

})

export function LoadOnExternalOrRefreshOverride(Component): ComponentType {

return (props) => {

const [store, setStore] = useStore()

useEffect(() => {

if (!store.hasChecked) {

setStore({ hasChecked: true })

const isExternalLoad =

!sessionStorage.getItem("hasVisitedSession") ||

performance.navigation.type === 0

const isPageRefreshed =

performance.navigation.type === 1 ||

window.performance.getEntriesByType("navigation")[0]?.type === "reload"

if (isExternalLoad || isPageRefreshed) {

setStore({ isVisible: true })

sessionStorage.setItem("hasVisitedSession", "true")

setTimeout(() => {

setStore({ isVisible: false })

}, 5000) // Ajuster le délai

}

}

}, [store.hasChecked, setStore])

return store.isVisible ? <Component {...props} /> : null

}

}

Comment l'utiliser

1. Sélectionnez votre composant : Cliquez sur le composant d'animation de chargement auquel vous souhaitez appliquer la modification.

2. Accédez à la Modification de Code : Dans l'onglet de droite, faites défiler jusqu'à la section Modification de Code.

3. Créez un Nouveau Fichier : Cliquez sur Fichier, sélectionnez Nouveau Fichier.

4. Créez une Nouvelle Modification : Choisissez Nouvelle Modification. Remplacez tout le code modèle par le fragment ci-dessus.

5. Rafraîchissez le Builder Framer : Enregistrez et rafraîchissez le builder.

6. Appliquez la Modification : Retournez à votre composant et assurez-vous que la modification est sélectionnée.

7. Publiez Votre Site : Testez-le sur le site en direct - cela ne fonctionne que là.

Exemple en Action

Voici un site où je l'ai mis en œuvre pour la première fois :

www.kimfuagence.com

L'animation de chargement s'exécute uniquement au chargement ou lors d'un rafraîchissement, gardant l'expérience fluide et propre.

Si vous êtes fan de Framer ou que vous débutez, allez voir ici :

👉 Framer


Salutations, Jay!