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.
• 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
• 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
• 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
• Auto Hide — Loader fades out and disables itself after animation• No Layout Shift — Content behind stays stable• Script Injection — Loads GSAP and CustomEase automatically
Words — Array of greeting words with language code and font per item
Spacing — Controls vertical spacing between words
Opacity Tiers — Controls opacity falloff from center to edgesBlur Tiers — Controls blur intensity across word layers
Transition — Controls animation duration and easing
Text Color — Color of greeting textBackground — Fullscreen background color
After copying the component, paste it on to your canvas.
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)
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
Right click on the component and lock it so that you can select the items below it
Make it absolute, width 100% and height 100vh and center it
In the properties panel, change the settings to your liking.
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
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
• 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.
Daniyal Habib
