Greeting Loader is a polished, GSAP-driven introductory animation that welcomes visitors with a sequence of greeting words in any language. It’s designed to elevate your website’s first impression with subtle motion, elegant timing, and complete customisability.
The component animates into view with a soft slide, cycles through your chosen greetings one by one, and then gracefully fades out — revealing your main site content. Perfect for portfolios, brand sites, product landers, agency presentations, and experiences where you want to add a touch of personality before the page begins.
Whether you use it as a pre-loader, intro moment, or transition screen, Greeting Loader creates an immediate sense of craft and attention to detail.
Follow these steps to integrate Greeting Loader into your Framer project seamlessly:
Drag the component onto your canvas and place it inside your main Desktop frame, not outside it.Make sure it sits on top of all other layers so it appears as the first thing users see.
To ensure the loader covers the entire viewport:
Set Width: 100%
Set Height: 100vh
This guarantees the loader behaves like a full-screen intro on all screen sizes.
In the Words property, add a comma-separated list of greetings.Examples:
“Hello, Bonjour, Hola, Ciao”
“Welcome, Bienvenue, ようこそ, أهلاً”
Any languages or brand-specific wording you prefer.
The first word appears instantly; the rest animate in sequence.
Customise:
Dot colour — the circular accent symbol
Text colour — the greeting word
Background colour — fullscreen backdrop
Font size — in rem units (scales responsively)
The component loads GSAP from CDN on demand. No setup required.
Because the component hides itself after the animation, you can safely place your hero section or main content behind it. The intro naturally transitions into your layout without any layout shift.
Key Benefits
The animation uses a smooth, expressive GSAP timeline:
Fade-in
Slide-up
Sequential text swapping
Controlled fade-out
Entire loader hides automatically
The result is a premium, fluid intro moment that looks handcrafted.
Works with:
Latin
Cyrillic
Arabic
Hindi/Devanagari
Japanese
Korean
Emoji
Any Unicode text
Just type your words — the loader handles everything.
Use it to:
Greet users by region
Add a brand identity moment
Set tone for a creative portfolio
Provide a soft loading animation without spinners
No external code or overrides needed — everything is built in.
Once the timeline completes, the loader fades out and removes itself visually from the page, revealing your content without layout shift.
Props Overview
Comma-separated list of greetings
Animates each one in sequence
First word appears immediately
In rem units
Controls the greeting text size
Accent dot that sits next to the greeting
Customisable branding element
Greeting word colour
Fullscreen background colour for the loader
Pro Tips
Use short, punchy greetings for fast intros
Increase font size for a bold, cinematic feel
Dark backgrounds with bright text give the most premium result
Pair with a delayed hero animation for a smooth transition
Keep the loader displayed for a brief moment before page content animates
Daniyal Habib
