Framer Loading Animation: Load and Refresh Only

Feb.2024

Read Article

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!


R&D

Join the Stōkt Club!

Sign up for the latest drops, freebies and updates. No spam, just the good stuff. Seriously, just f*cking sign up!

© 2025 Stōkt Creative Co.

All rights reserved.

BACK
TO TOP

Join the Stōkt Club!

Sign up for the latest drops, freebies and updates. No spam, just the good stuff. Seriously, just f*cking sign up!

© 2025 Stōkt Creative Co.

All rights reserved.

Join the Stōkt Club!

Sign up for the latest drops, freebies and updates. No spam, just the good stuff. Seriously, just f*cking sign up!

© 2025 Stōkt Creative Co.

All rights reserved.

BACK
TO TOP