Twang Lanyard

Quick Start

1. Add to your HTML <head>:

Code snippet omitted: it ships with the download.

2. Add before the closing </body> tag:

Code snippet omitted: it ships with the download.

3. Add the effect structure to your <body>:

Code snippet omitted: it ships with the download.

The complete card artwork, real portrait, scannable GSAP Vault QR code, connector, strap edge treatment, and responsive sizing are in index.html and assets/style.css.

Using It With Your Own Design

What the effect needs from your markup: One [data-lanyard] root containing [data-lanyard-svg], exactly two [data-lanyard-path] paths, [data-lanyard-badge], [data-lanyard-connector], and [data-lanyard-face]. Strap text is optional; every [data-lanyard-label] receives the configured repeated label. Keep the badge and connector inside the root, but the visual content inside the face is entirely yours. Use unique SVG path IDs when placing more than one lanyard on a page.

What is only the demo's styling: The Afterlight branding, Unsplash portrait, QR destination, pass typography, black stage, and palette can all be replaced or removed. The script never queries those decoration classes; its API is exclusively the documented data- hooks.

CSS the effect depends on: Keep the structural classes shown in Quick Start, or carry their layout rules into your own selectors. The root must be a positioned, clipped interaction area with a real height and touch-action: none; the bundled class defaults to 100svh, and you can override that height when embedding it in a section. The SVG must cover that area. The badge must be absolutely positioned; in the live state ([data-state="live"]) it must use top: 0, left: 0 because the simulation writes pixel transforms. Preserve transform-style: preserve-3d on the face for velocity tilt, transform-origin: 50% 100% on the connector, and set --connector-reach on the root to the pixel distance from the badge's top edge to the rope attachment point. Include readable static path geometry and a static badge position outside [data-state="live"] so no-JS and reduced-motion visitors receive a complete hanging pass.

Options

On touch devices data-touch-damping supplies the stronger damping value, data-touch-iterations uses fewer solver passes, and the script builds shorter chains.

Data Hooks

Accessibility

• The root is keyboard focusable and has visible focus styling.
• Arrow keys apply directional tugs. Enter and Space trigger the same strong sideways response as a pointer whip.
• Add an aria-label or aria-describedby prompt that explains both drag and keyboard controls.
• Pointer interaction uses Pointer Events, so mouse, pen, and touch share one path. The clipped stage lets visitors pull the pass below the frame without creating page overflow.
• prefers-reduced-motion: reduce creates no simulation, pointer listeners, resize listener, or ticker. The authored static lanyard remains visible.
• Without JavaScript, the same static SVG paths and pass remain fully composed.
• The pass content remains semantic HTML and can carry meaningful attendee or event text.

Performance Notes

• The simulation uses a fixed 1/120 second step with a catch-up cap for stable constraints across refresh rates.
• SVG and DOM nodes are reused; the effect creates no per-frame elements and uses no canvas.
• An IntersectionObserver pauses the GSAP ticker whenever the lanyard leaves the viewport.
• Mobile uses shorter chains and stronger damping while preserving the same touch-drag mechanic.
• Keep data-iterations at or below 14; higher values add CPU cost with little visible improvement.

Demo Image Credit

The bundled speaker portrait is an art-directed crop of an Unsplash photograph. The QR code is generated locally and encodes https://gsapvault.com/.

Dependencies

Required:

• GSAP core 3.12+ (demo uses 3.15.0)

Not required:

• Draggable
• InertiaPlugin
• ScrollTrigger
• Lenis
• Canvas or a collision library