127
AI ready

Wordmark Dock Preloader

£10 or the whole Vault, £79.20

A preloader where your brand wordmark fills the screen, its letters rising through a mask one by one, then the whole mark shrinks and flies into the header's logo slot as the page arrives around it.

Flip intermediate
4 more details
load-sequenceflip-layoutmask-revealstagger

This demo reads better at your own screen size than in the frame below:

Open the demo in a new tab
Open Wordmark Dock Preloader demo in new tab

Released

About this effect

Most preloaders put a logo on an overlay, fade it out, and leave a second copy of the same logo waiting in the header. This one has only one logo. Your header wordmark, live text or your own SVG, grows to fill the width of the screen and its letters rise into view through a mask, one after another. When the page is ready, the whole mark shrinks and flies into its own slot in the header, and the navigation, headline and hero arrive around it as the cover draws up behind the flight.

Read the full effect overview

Because the giant mark and the header logo are the same element, there is no swap and no flicker at the end: the loader simply becomes the masthead. The fit is measured, so a five-letter name and a fifteen-letter name both fill the screen edge to edge, and the mark lands exactly where your header puts it, whatever the layout.

It waits on real readiness, with a minimum hold so the wordmark always reads and a hard cap so nobody waits on a slow image. Repeat visitors in the same session can skip it, and it degrades to a short cover fade for reduced motion and a plain header without JavaScript.

Wordmark Dock Preloader - GSAP animation effect preview

What's included

8 items
  • One logo, not two: the header wordmark itself becomes the giant intro mark and docks back into place
  • Letters rise through individual masks, with element children such as an SVG mark or a coloured dot kept whole
  • Fitted to the viewport by measurement after fonts load, so short and long brand names both fill the width
  • Lands on the header slot's real position with the Flip plugin, wherever your layout puts the logo
  • Waits for fonts and page load, with a minimum hold and a hard cap, and an accent hairline that shows the wait
  • Page content marked for reveal arrives around the docking mark; images can open with a clip from below
  • Once-per-session mode, replay(), pause() and play() to hold the sequence, and a wordmarkdock:complete event
  • Reduced motion keeps the logo in the header and fades the cover; no JavaScript shows a normal header

Perfect for

5 use cases
  • Studio and agency sites where the brand name is the first and strongest thing on the page
  • Product and furniture brands with a distinctive wordmark set in a characterful face
  • Launch pages that want a branded opening without a separate splash logo
  • Portfolio sites whose header logo should feel earned rather than simply present
  • Multi-page sites that play the intro once per visit and open later pages straight onto the header

How it works

3 sections

The cover is an ordinary layer over a complete page, so search engines and visitors without JavaScript get the full HTML and a normal header. When the script starts, it takes the logo already sitting in your header, lifts it above the cover and scales it about its centre until it spans the screen. The size adapts to your actual logo in its actual typeface, waiting for webfonts first, which is why any brand name fills the width without guesswork.

Each letter sits in its own clipping mask and rises into view in a quick stagger. The mark then holds until the page reports ready, never shorter than the minimum and never longer than the cap, while a thin accent line underneath tracks the wait.

The dock is the signature. The Flip plugin records the giant mark, lets it settle back into its header slot, and animates the difference, so the logo shrinks and travels along one continuous path into exactly the place your layout gives it. The cover draws up behind the flight, the navigation and copy rise in, and the hero image opens from below. At the end the letters are joined back into the original text, so the header holds the same logo it started with.

Plugins Flip
Difficulty Intermediate
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo (3 pages, lowest score shown), from the latest scan. A measurement of the demo as shipped, not a promise for your page.

Accessibility
100
Best practices
100

No performance score, on purpose. That figure depends on how you deploy: your server's compression and caching, your CDN, the connection and the device doing the test, none of which the code controls. The same page can score very differently on two consecutive runs, so measure it where it will live.

Paid effect

Purchase to unlock the code.

Buying Wordmark Dock Preloader opens the HTML, CSS and JavaScript source, the full documentation, an AI setup prompt for your editor, and every update we ship to it. Standard license: unlimited personal and commercial projects. Every paid product is tested for desktop and mobile layouts, reduced-motion handling, animation cleanup and keyboard controls wherever there is something to operate.

£10 Standard license, unlimited projects

Browse free effects

Or the whole library: the Vault, £79.20, one payment.

Documentation

Quick Start

1. In the <head>, before your stylesheet:

Code snippet omitted: it ships with the download.

2. The cover goes first in <body>; mark your header logo:

Code snippet omitted: it ships with the download.

3. Before the closing </body> tag:

Code snippet omitted: it ships with the download.

The script starts itself. Copy the Effect block from the top of style.css (or the whole file while you try it).

Using It With Your Own Design

The logo. data-wd-target is a CSS selector for the element that becomes the giant mark; it defaults to [data-wd-mark]. Point it at the wordmark itself, not at a padded link around it: the fit measures that element's box. It can hold:

  • Live text. Each character rises in its own mask. At the end the characters are joined back into the original text nodes, so kerning and selection behave normally in the header.
  • Element children. Any child element (an inline SVG, an icon, a styled dot such as the demo's <span data-mark=".">) is kept whole and rises as one letter. For an SVG logo, give each letter its own child element, or use one <svg> and it rises as a single piece.

An inline element is made inline-block for the run only, because it has to be transformed. Give the logo its colour from --wd-ink so the giant and docked states match.

Stacking. The cover sits at z-index: var(--wd-z) (1000). The logo is lifted one above it with position: relative and a z-index for the run. If your header creates its own stacking context (a sticky or fixed header with a z-index, a transform, a filter), the logo cannot escape it: put data-wd-lift on the header and the header is lifted instead. Give a lifted header a transparent or cover-coloured background, or set --wd-cover to match it.

Reveal targets. Anything with data-wd-reveal is hidden while the cover is up (by the html.wd-lock rule in the CSS) and rises in as the mark docks. data-wd-reveal="clip" opens the element from below instead, which suits images. When the sequence ends their inline opacity, visibility, transform and clip-path are cleared, so do not rely on inline values for those properties on reveal targets.

What is only the demo. Halden, Gloock and Mona Sans, the photographs, the header, nav, hero layout and the Replay button styling. The progress hairline is optional: delete the data-wd-progress element and nothing else changes.

Colours and timings:

Property Default What it controls
--wd-cover #f4f4f2 Cover ground
--wd-ink #141412 Wordmark colour (applied by your logo CSS)
--wd-accent #0b8457 Progress hairline (and, in the demo, the dot)
--wd-z 1000 Cover stacking order
--wd-min 1.2 Minimum hold, seconds
--wd-max 4 Hard cap, seconds
--wd-rise 0.9 Letter rise, seconds
--wd-dock 1.1 Flight into the header, seconds

Options

Data attributes on the [data-wd] element override the CSS timings.

Attribute Default Description
data-wd-target [data-wd-mark] Selector for the header logo
data-wd-min 1.2 Shortest hold in seconds, so a cached load still reads. 0 is allowed
data-wd-max 4 Hard cap in seconds: the mark docks by then whatever is still loading
data-wd-rise 0.9 Letter rise duration
data-wd-dock 1.1 Dock flight duration
data-wd-fit 0.9 Share of the viewport width the giant mark fills (0.2 to 1)
data-wd-once off Skip the sequence once it has played this session. A value names a separate session key; empty uses the site-wide key

Other hooks: data-wd-mark (default logo hook), data-wd-lift (stacking escape, above), data-wd-progress (hairline), data-wd-reveal / data-wd-reveal="clip" (page content), data-wd-replay (any button that replays).

What "ready" means. The giant mark docks when all of these hold: the letters have risen, the minimum has passed, the logo's webfont has loaded and the document has finished loading (window load, so images included). The cap overrides readiness. The hairline climbs toward 90% on time alone and only completes when the page is ready.

Once per session. Every completed run records itself in sessionStorage (under the site-wide key unless data-wd-once names one). A page with data-wd-once then opens with no cover. Storage that is blocked just means the sequence plays.

Accessibility

  • The cover is aria-hidden and holds nothing focusable, so it never traps focus. The logo link is not clickable while giant.
  • While the letters are split, a visually hidden copy of the text keeps the logo readable to screen readers; the masks are hidden from them.
  • All content is in the HTML from the start: the cover is only a layer, so crawlers and assistive technology read the full page.
  • Scroll is locked only while the cover is up.

Reduced Motion Behavior

The logo stays in its header slot, lifted above the cover, and the cover fades out over 0.4s once the logo's font is ready. No travel, scaling or masking. A preference change mid-sequence settles the page cleanly.

Without JavaScript

The cover is display: none unless has-js is present, and the script removes has-js if GSAP or Flip fails to load. As a last resort the cover hides itself after six seconds if the script never starts.

Dependencies

Required:

  • GSAP 3.12+ (the demo pins 3.15.0)
  • Flip plugin

No other plugins and no Lenis.

Worked examples, the events and programmatic API, and the class reference ship with the download, alongside the full source.