125
AI ready

Curved Lift Transition

£10 or the whole Vault, £79.20

A preloader and page transition on one panel: it cycles your words on first load, then lifts away with a bottom edge that bends with its speed. Between pages it drops in with the destination's name and lifts onto the new page.

advanced
9 more details
page-transitionsoft-navigationload-sequencesvg-pathvelocity-reactiveinterruptible-transitionsqueued-transitionsfocus-managementprogressive-enhancement

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

Open the demo in a new tab
Open Curved Lift Transition demo in new tab

Released

About this effect

One coloured panel handles both moments a visitor notices. On first load it covers the page, runs a short cycle of words you choose, then lifts off the top of the screen. Its bottom edge bows downward as it picks up speed and flattens as it leaves, like a sheet with weight, rather than sliding away as a hard rectangle.

Read the full effect overview

Follow a link and the same panel falls in from the top with its edge bowing the other way, shows the name of the page you are going to, and lifts again onto that page. The curve follows the panel's actual speed, so a faster move bends it further and a move turned round halfway flexes back the other way. Underneath is soft navigation for ordinary multi-page HTML: the next page is fetched and swapped while the panel covers the screen, with history, scroll position, focus and an announcement handled.

Curved Lift Transition - GSAP animation effect preview

What's included

8 items
  • A curved bottom edge driven by the panel's measured speed through a damped spring, so it deepens as the panel accelerates and settles flat with a little give when it stops
  • First-load word cycle from a pipe-separated attribute, held only until the page is ready, with a minimum hold so it reads and a hard cap so it never delays a ready page
  • Returning visitors in the same session see a short version: the current page's name, then the lift
  • Between pages the panel drops in, shows the destination's name (from an attribute, or the page title) and lifts onto the new page
  • Fetch-and-swap navigation with prefetch on hover and focus, history with scroll restoration, focus moved to the new heading and the new title announced
  • Interruptible: a click on the page while the panel lifts turns it straight round, a click while covered retargets, and Back during a transition ends on the right page
  • Shallower curve on phones, a short crossfade with no travel under reduced motion, and ordinary links when JavaScript is off
  • Replay, pause, play and navigate methods, start and end events, and one revert call that restores the page as it was

Perfect for

4 use cases
  • Studio, agency and portfolio sites built as plain HTML pages that want a signature intro and app-like page changes without a framework
  • Brand and product sites where a few words on the first screen set the tone before the page appears
  • Shops and showrooms with a handful of pages where the destination name on the panel keeps visitors oriented
  • Existing static sites that want a preloader with a strict time budget rather than a spinner that holds the page hostage

How it works

1 section

The panel is in the page's HTML and covers it from the first paint, so nothing flashes before the intro; the content itself is ordinary HTML underneath for visitors without JavaScript and for crawlers. The panel's fill is one SVG path, a rectangle with a curved bottom edge, sized to the viewport in pixels so the edge spans the full width at any aspect without a seam. GSAP tweens the panel's travel and the word changes, and on every frame of the GSAP ticker the panel's speed is measured and fed into a small damped spring that sets the depth of the curve. The first-load sequence waits on the page load and web fonts, with a minimum hold and a hard cap. Same-origin links are fetched, the page container is swapped while the panel covers the screen, and history entries remember scroll position. Under reduced motion the page crossfades instead and the intro shows its first word for a beat.

Difficulty Advanced
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 Curved Lift Transition 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> of every page, before the stylesheet:

Code snippet omitted: it ships with the download.

2. At the start of <body> on every page, the panel:

Code snippet omitted: it ships with the download.

3. Wrap each page's content in one container:

Code snippet omitted: it ships with the download.

4. Before </body>:

Code snippet omitted: it ships with the download.

Serve the pages from a web server (soft navigation needs fetch, so file:// falls back to ordinary page loads, with the intro still playing).

Using It With Your Own Design

What the effect needs from your markup: one [data-cl-panel] element outside the swapped container (it persists between pages), and one [data-cl] container on every page, holding everything that changes between pages. Put the panel on every page, because any page can be the first one a visitor opens. The new page's main h1 receives focus after a swap. Everything outside [data-cl] (the panel, a fixed header if you want one to persist, analytics snippets) stays as it is.

What is only the demo's styling: everything below the "Demo site" comment in style.css: the homeware shop layout, fonts, photographs and the replay link. Keep the first block (the panel rules) and change its three colour tokens.

CSS the effect depends on:

  • .has-js [data-cl-panel] { visibility: visible } is what covers the page from the first paint, so the content never flashes before the intro. The content is still in the HTML underneath for crawlers and for visitors without JavaScript. If the script never starts, a CSS fail-safe drops the cover after five seconds.
  • The panel is position: fixed, full width, 100lvh tall, with a high z-index (--cl-z). Do not give it padding or a border: the curved edge is drawn from its measured box.
  • The words sit in .cl-panel__line, which clips them (overflow: hidden) as they rise in and out.

Options and API

Set these on [data-cl-panel]:

Attribute Values Default Description
data-cl-words Pipe-separated text none Words cycled on first load. Without it the intro shows the current page's name
data-cl-once present / false absent Play the word cycle once per browser session. Later full page loads show the short version: the page's name, then the lift
data-cl-duration Seconds 0.8 Length of the lift
data-cl-drop Seconds 0.55 Length of the drop between pages
data-cl-bow 0 and up 1 Depth of the curve. 0 gives a straight edge, 1.5 a deeper bend
data-cl-word-time Seconds 0.42 Time each word gets in the cycle
data-cl-min-hold Seconds 1.2 Shortest first-load sequence, so the words can be read
data-cl-max-hold Seconds 4 Hard cap. The panel lifts by then even if the page is still loading
data-cl-push Fraction of the viewport 0.06 How far the page underneath rises as the panel leaves it. 0 turns it off

On each page's container:

Attribute Description
data-cl The container swapped between pages
data-cl-title The name shown on the panel when arriving at this page. Falls back to the part of <title> before a colon, `

On links: data-cl-ignore (on the link or any ancestor) leaves a link to the browser. Links with target, download, modifier keys, other origins and same-page #anchors are always left alone.

CSS custom property Default Description
--cl-panel #1fb563 Panel colour
--cl-ink #0d120f Words and page names on the panel
--cl-accent #f7f7f6 The dot beside them
--cl-z 1000 Panel stacking order

JavaScript

Code snippet omitted: it ships with the download.

pause() turns link interception off (links become ordinary page loads) and holds a running sequence under the panel just before it lifts. play() resumes both. While paused, the hard cap does not apply: you asked for the hold.

Events

All are dispatched on document.

Event Detail When
cl:start { kind, url } A sequence begins. kind is load, replay or navigate
cl:leave { container, url } Just before the old container is removed
cl:swap { container, url, trigger } The new container is in the page (still covered). Start your page scripts here
cl:end { kind, url } The panel has left the screen
cl:error { url, error } A fetch failed; the browser then loads the page normally

Scripts inside a fetched container do not run. Initialise page-specific code from cl:swap and clean it up on cl:leave.

Interruptions

The rule is retarget while covered, turn round while lifting:

  • A second click on the same link, or a rapid double-click, is ignored.
  • A new destination before the page has been swapped (another API call, or Back) retargets the running transition; nothing is swapped twice.
  • A new destination after the swap but while still covered queues and runs under the same cover, without lifting in between.
  • A click on the page while the panel is lifting turns the panel straight round from where it is; the curve flexes the other way as it changes direction.
  • Back during a transition always ends on the page the address bar shows.

Accessibility

  • Focus and announcement: after each page swap focus moves to the new page's h1 (or main), the document title updates and a polite live region announces it.
  • The panel is aria-hidden and holds no focusable elements, so it never traps focus.
  • Reduced motion: the first load shows the first word for a beat and the panel fades away, with no travel. Between pages the content crossfades with no panel, no movement and no scale.
  • No JavaScript, no GSAP or a blocked CDN: the panel never covers the page and every link is an ordinary link.
  • Time budget: the first-load sequence waits only for the page load and web fonts, with a minimum hold so the words read and a hard cap after which it lifts regardless. Returning visitors in the same session get the short version when data-cl-once is set.

Dependencies

  • GSAP 3.12+ (core only). The demo is built against GSAP 3.15.0.

Teardown

CurvedLift.revert() (or window.gsapContext.revert()) kills the running animations, removes every listener and the live region, empties the panel back to the markup you wrote, removes .has-js so the CSS cover cannot return, and restores the browser's scroll restoration. Links are ordinary links again.

Images and Credits

The demo photographs are from Pexels, whose licence permits modification and redistribution, and are baked into graded WebP files in assets/img/. Replace them with your own.

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