Greeting Loader

Greeting Loader is a refined intro animation designed to create a strong first impression. It displays a sequence of greeting words with smooth motion, blur transitions, and layered opacity, then fades out to reveal your website content.

Built with GSAP and CustomEase, the animation uses a controlled timeline to deliver fluid movement and precise easing. Each word transitions vertically with depth, creating a soft stacked motion effect instead of simple text swapping.

It runs only in Preview and Live mode and removes itself after the animation completes, ensuring no layout shift and a clean handoff to your main content.

Features

Multilingual Greeting System

• Dynamic Word List — Add unlimited greetings in any language• Language Awareness — Detects user browser language and prioritizes matching greeting• Unicode Support — Works with all scripts including Arabic, Japanese, and emoji

Advanced Animation Engine

• GSAP Timeline — Smooth and controlled animation flow• Custom Ease Support — Supports custom cubic bezier easing• Vertical Motion System — Words move in a stacked scroll-like animation• Blur and Opacity Layers — Creates depth with progressive blur and fade

Visual Control

• Per Word Typography — Each word can have its own font settings• Spacing Control — Adjust vertical distance between words• Opacity Tiers — Fine-tune visibility falloff from center to edges• Blur Tiers — Control blur intensity across the stack

Smart Behavior

• Auto Hide — Loader fades out and disables itself after animation• No Layout Shift — Content behind stays stable• Script Injection — Loads GSAP and CustomEase automatically

Property Controls

Content

Words — Array of greeting words with language code and font per item

Layout

Spacing — Controls vertical spacing between words

Visual Effects

Opacity Tiers — Controls opacity falloff from center to edgesBlur Tiers — Controls blur intensity across word layers

Motion

Transition — Controls animation duration and easing

Styling

Text Color — Color of greeting textBackground — Fullscreen background color

How to Use

Setup

1. After copying the component, paste it on to your canvas.

2. Put the components on every page, on top of all the layer (Recommended: Put this component in a "Layout Template" so every page inherit it naturally without manually pasting in each page)

3. With the component selected go to style>z-index and make it highest like 10 (which is the highest in framer) for the component to show up

4. Right click on the component and lock it so that you can select the items below it

5. Make it absolute, width 100% and height 100vh and center it

6. In the properties panel, change the settings to your liking.

Important Note

Important: When you'll add the component, the font size would be too small, so go inside each of the word and add the font and change the font size to your liking

Final Step

• Enjoy an awards winning loading greeting animation in your framer website!

• For any confusion or feature request, contact daniyalhundred@gmail.com, I usually respond within 10 minutes

Ideal Use Cases

Best for

• Portfolio websites and personal brands• Agency and studio websites• Product landing pages• Creative and interactive experiences• High-end presentation sites

Greeting Loader adds a polished intro moment that feels intentional, refined, and aligned with modern web design standards.