Component
Smooth Website Loader Component
This is a smooth page-loading transition for Framer, inspired by the GraphicHunters website. Feel free to copy the component, paste it into your project, and tailor it to your needs. It's pretty impressive what you can achieve with Framer.
You can click this link to get the starter file I used in the tutorial video, so you can follow along.
Created by
About the resource
This loading frame is essentially a component. We set its position to fixed, and adjust the height to 100vh. We pin it to the top, right, and left of the viewport to ensure it covers the whole website viewport.
This component has three variants: "Start", "Arrive", and "Leave". We create animations on these variants and connect them with an 'appear' interaction. That way, everything happens automatically when the website loads.
When you paste this component onto your website, make sure to add the "pointer events" style and set it as "none." Additionally, include a "Z-index" style with a high number to ensure it appears above everything.
Check the tutorial video to learn more.
About the resource
This loading frame is essentially a component. We set its position to fixed, and adjust the height to 100vh. We pin it to the top, right, and left of the viewport to ensure it covers the whole website viewport.
This component has three variants: "Start", "Arrive", and "Leave". We create animations on these variants and connect them with an 'appear' interaction. That way, everything happens automatically when the website loads.
When you paste this component onto your website, make sure to add the "pointer events" style and set it as "none." Additionally, include a "Z-index" style with a high number to ensure it appears above everything.
Check the tutorial video to learn more.
About the resource
This loading frame is essentially a component. We set its position to fixed, and adjust the height to 100vh. We pin it to the top, right, and left of the viewport to ensure it covers the whole website viewport.
This component has three variants: "Start", "Arrive", and "Leave". We create animations on these variants and connect them with an 'appear' interaction. That way, everything happens automatically when the website loads.
When you paste this component onto your website, make sure to add the "pointer events" style and set it as "none." Additionally, include a "Z-index" style with a high number to ensure it appears above everything.
Check the tutorial video to learn more.
