# Twang Lanyard > A two-leg SVG lanyard simulation that lets a weighted event pass fall, whip, twist, and settle through damped rope constraints. Canonical: https://gsapvault.com/effects/twang-lanyard Live demo: https://gsapvault.com/demos/twang-lanyard/index.html | Property | Value | |----------|-------| | Type | effect | | Tier | paid | | Price | £5 | | Difficulty | advanced | | Plugins | Core GSAP only | | Techniques | rope-physics, constraint-solver, svg-animation, touch-drag, velocity-reactive, viewport-aware-ticker, 3d-transforms, keyboard-navigation | | Uses Lenis | No | ## Overview A tactile event-pass effect that couples two independently simulated SVG strap chains to one weighted rigid badge using GSAP core. Grab the pass and release a hard sideways whip to send delayed S-curves through both legs, kick the connector, twist the pass through centre, and resolve into decreasing pendulum swings. ## Features - Dual rope chains — independent Verlet points feed one shared connector - Weighted badge dynamics — translation, rotation, gravity, and angular release velocity - Layered velocity response — perspective, highlight direction, shadow travel, and connector tension - Real touch dragging — the same grab-and-whip simulation runs on coarse pointers with stronger damping - Keyboard tugs — arrow keys apply directional impulses while Enter and Space trigger a full twang - Configurable physics — tune gravity, damping, stiffness, solver iterations, swing strength, and strap copy - Static fallback — polished hanging SVG and pass remain visible without JavaScript or with reduced motion - Lifecycle-safe setup — per-instance listeners, visibility observer, ticker, resize timer, matchMedia, and GSAP context all revert cleanly ## Use Cases - Conference landing pages with a tactile attendee-pass hero - Festival and culture sites with a branded interaction visitors can immediately understand - Speaker announcements with a memorable portrait-led identity treatment - Event registration confirmations with a playful reward moment - Portfolio experiments demonstrating DOM and SVG constraint physics without canvas ## Vibe-Code Ready Setup This effect includes `START-HERE-AI.md`, a product-specific copy-paste setup prompt for Cursor, Claude Code, ChatGPT, GitHub Copilot, Windsurf, and other coding assistants. It tells the assistant to inspect the existing stack, integrate the supplied files, preserve the design, scope selectors, retain accessibility and responsive behaviour, add framework-appropriate GSAP cleanup, and report what it tested. [How AI-assisted setup works](https://gsapvault.com/vibe-coding) ## How It Works Each strap is a chain of Verlet points joined by fixed-distance constraints. The two lower endpoints repeatedly solve against a shared attachment point on a rigid badge body, so a fast release travels through the legs with a visible delay before pulling the connector taut. GSAP's ticker advances the fixed-step simulation and core setters render the SVG path geometry, badge translation and rotation, perspective tilt, moving light, shadow, and connector scale. The return motion comes from gravity, damping, and constraint relaxation rather than an elastic easing preset. ## Integration Preview How this effect integrates into a page. The full documentation (examples, events, programmatic API, customization guide) ships with the download. ### Quick Start **1. Add to your HTML ``:** ```html ``` **2. Add before the closing `` tag:** ```html ``` **3. Add the effect structure to your ``:** ```html
Your event pass design
``` 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`. ### Options | Attribute | Values | Default | Description | |-----------|--------|---------|-------------| | `data-gravity` | Positive number | `1850` | Downward acceleration in pixels per second squared | | `data-damping` | `0.9` to `< 1` | `0.989` | Desktop velocity retained per fixed simulation step; lower values settle sooner | | `data-touch-damping` | `0.9` to `< 1` | `0.982` | Coarse-pointer damping; intentionally stronger than desktop by default | | `data-stiffness` | `0.2` to `1` | `0.94` | Fraction of strap-length error corrected per solver pass | | `data-iterations` | `3` to `14` | `9` | Desktop constraint passes per step; more passes make the straps pull taut sooner | | `data-touch-iterations` | `3` to `14` | `7` | Coarse-pointer constraint passes per step | | `data-swing` | Positive number | `1` | Multiplier for pointer-release and keyboard impulse strength | | `data-strap-label` | Text | `AFTERLIGHT` | Word repeated along optional `[data-lanyard-label]` text paths | On touch devices `data-touch-damping` supplies the stronger damping value, `data-touch-iterations` uses fewer solver passes, and the script builds shorter chains. ### 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. ### Dependencies **Required:** - GSAP core 3.12+ (demo uses 3.14.2) **Not required:** - Draggable - InertiaPlugin - ScrollTrigger - Lenis - Canvas or a collision library ## What You Get - `index.html`: working demo page - `assets/script.js`: commented, readable source - `assets/style.css`: effect styles - `README.md`: full documentation with examples and framework integration notes - `START-HERE-AI.md`: product-specific copy-paste prompt for AI-assisted setup - `LICENSE.txt`: standard license terms - Lifetime updates: re-download anytime from your library ## Get the Code This is a premium effect. The standard license costs £5 one-time and covers unlimited personal and commercial projects with no attribution required. The only restrictions: no redistribution of the code itself and no competing effect libraries. - [Buy Twang Lanyard](https://gsapvault.com/effects/twang-lanyard) - [Effects & Templates Vault (£39 one-time, best value): every current and future effect and template](https://gsapvault.com/effects) ## Judge the Code Quality First These related effects are free with complete source published, written to the same production standard (cleanup functions, reduced-motion support, framework-agnostic): - [3D Card Flip Gallery](https://gsapvault.com/effects/3d-card-flip.md): Tactile 3D cards with deep perspective, reactive edge-light, shadow inversion, hover/focus parity, and tap auto-close. --- From [GSAP Vault](https://gsapvault.com): production-ready GSAP animation effects. Full catalog for agents: https://gsapvault.com/llms-full.txt