Greeting Loader: Free UI Component by Daniyal Habib

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.

How to Use

Follow these steps to integrate Greeting Loader into your Framer project seamlessly:

1. Add the component to your canvas

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.

2. Set size to full screen

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.

3. Provide your greeting words

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.

4. Style the loader

Customise:

Dot colour — the circular accent symbol
Text colour — the greeting word
Background colour — fullscreen backdrop
Font size — in rem units (scales responsively)

5. GSAP animation loads automatically

The component loads GSAP from CDN on demand. No setup required.

6. Use it as a preloader

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