Framer Loading Animation: Load and Refresh Only

The Problem

Loading animations are one of my favorite ways to make a website feel more interactive and branded. But in Framer, getting them to show only on initial load or refresh (and not during intra-site navigation) can be tricky.

I’ve had this problem on a bunch of client projects, so I finally sat down to figure it out. After testing different approaches, I came up with this simple Code Override that just works.

The Solution

Here’s the code. Copy it, apply it to your loading animation component, and you’re good to go:

import { useEffect } from "react"

import type { ComponentType } from "react"

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

// Create a store to manage visibility state

const useStore = createStore({

isVisible: false, // Default state

hasChecked: false, // Prevent looping

})

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) // Adjust timeout

}

}

}, [store.hasChecked, setStore])

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

}

}

How to Use It

1. Select your component: Click on the loading animation component you want to apply the override to.

2. Go to Code Override: On the right tab, scroll down to the Code Override section.

3. Create a New File: Click on File, Select New File.

4. Create a New Override: Choose New Override. Replace all the placeholder code with the snippet above.

5. Refresh Framer Builder: Save and refresh the builder.

6. Apply the Override: Go back to your component and ensure the override is selected.

7. Publish Your Site: Test it on the live site—it only works there.

Example in Action

Here’s a site where I first implemented it:

www.kimfuagence.com

The loading animation runs only on load or refresh, keeping the experience smooth and clean.

If you’re into Framer or just getting started, check it out here:

👉 Framer


Cheers, Jay!