This component is a preload animation that displays your logo at the center on page load, then smoothly transitions into the hero section for a strong, branded first impression.
Made with Workshop
Build your own component with AI
Preload Animation is a Framer preload animation component designed to deliver a polished and memorable first impression when users open your website.
When the page loads, your logo appears in the center of the screen with a smooth animation. Once the logo animation is complete, the first-view (hero) section scrolls up from the bottom, seamlessly revealing the top of your homepage.
Logo replacement
Easily replace the logo with your own SVG file
Ideal for brand logos and symbols
Color control
Background color can be customized
Logo color can be customized
Default setup uses a black background with a white logo
Animation settings
Adjust the speed of the logo animation
Adjust the scroll-up transition speed
Fine-tune the overall timing to match your design