Greeting Loader

Greeting Loader is a refined intro animation designed to create a strong first impression.

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 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 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.

Multilingual animated intro loader