169
AI ready

Vinyl Record Scroll

£7
or the whole Vault, £99
Skip the demo Open in new tab

Pinned scroll scene that plays a record: the disc slides out of its sleeve onto a turntable, spins up under a groove sheen, and the tonearm tracks inward while the track list lights in step with the needle.

ScrollTrigger Lenis advanced
7 more details
pinningscrubvelocity-reactivemomentumscroll-storytellingkeyboard-navigationcanvas

Released

About this effect

A record release presented as a physical object. The scene pins with a square sleeve in frame; as the visitor scrolls, the black disc slides out of the sleeve's open edge, is carried in a shallow arc to the turntable and set down on the platter. The motor spins it up, the tonearm cues up, swings across and lowers onto the lead-in, and from there every further scroll walks the needle inward through the grooves.

Read the full effect overview

The track list beside the deck follows the needle: each track owns a groove band sized from its running time, the bands show on the record as faintly different rings with smooth gaps between them, and a track lights while the needle is over its band, with a hairline filling as it plays through. Scroll velocity feeds the spin, so a fast flick spins the record harder and it decays back to motor speed, while a flick back backspins it. Click or press Enter on any track and the scroll is cued to the start of its band. Scrolling back lifts the arm, slows the platter and returns the record to its sleeve.

Vinyl Record Scroll - GSAP animation effect preview

What's included

9 items
  • Five-act pinned story on one scrubbed ScrollTrigger: out of the sleeve, carried to the deck, set down, spun up, arm lowered and played inward
  • Groove sheen that never turns: a fixed conic bow-tie of light cut into fine striations by the groove rings, over a pressing that rotates beneath it with its label, dust and run-out etching
  • Spin speed from the motor (33 1/3 rpm by default) plus a velocity channel: a flick spins it harder, a flick back backspins it, and both decay back to motor speed
  • Track bands derived from your track lengths, drawn on the record as subtly different rings with smooth gaps, and mapped to the track list as the needle crosses them
  • Tonearm geometry solved from the layout with the law of cosines, so the stylus sits exactly on the band its track list row claims, at any size
  • Track rows are native buttons: click, Enter or Space cues the scroll to that track, with Lenis or native smooth scrolling
  • The spin loop runs only while the scene is on screen and stops completely on revert()
  • Phones stack sleeve and title above the deck with the track list condensed below; reduced motion shows the record at rest beside its sleeve with no pin and no spin
  • Static mode freezes any moment for thumbnails, print-style pages or a non-scrolling hero

Perfect for

5 use cases
  • Album, EP and single launch pages that want the release to feel like an object in hand
  • Record labels and record shops presenting a new pressing, a reissue or a box set
  • Podcast or audio series pages where episodes play like tracks on a side
  • Event and festival pages walking through a set list or a running order
  • Portfolio case studies for sleeve design and music branding

How it works

2 sections

ScrollTrigger pins the scene and scrubs one progress value that drives the whole sequence: the record drawn out of the sleeve and carried onto the platter, the tonearm lifting, swinging and lowering, and the needle travelling inward during play. Positions are read from the rendered layout, so restyling or resizing the deck keeps the record, platter and needle lined up.

The record is painted at the size it is shown, with groove bands sized from each track's length, and its light stays put while the disc turns beneath it, the way a real record catches a lamp. Spin speed follows the motor plus scroll velocity, so a flick spins it harder and it settles back to 33⅓; the loop pauses whenever the scene is off screen.

Plugins ScrollTrigger
Difficulty Advanced
Smooth scroll Lenis integration
Includes HTML + JS + CSS source, documentation, AI setup prompt, lifetime updates

Lighthouse, as measured

Google Lighthouse on this effect's demo, 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.

The Vault opens this source and the whole library.

Each product gives you the HTML, CSS and JavaScript source, the full documentation and an AI setup prompt, licensed for 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.

£99 Get the Vault See what you get

One payment, over 300 products, and future additions to the library.

Documentation

Quick Start

1. Add to your HTML <head>:

In your downloadThe working code for this step, in index.html.

2. Add the scene to your <body> (sleeve art, label art and arm art trimmed here; the demo's index.html has them in full):

In your downloadThe working code for this step, in index.html.

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

In your downloadThe working code for this step, in index.html.

The script finds every [data-vinyl] scene, pins it for the configured runway and builds the record's canvases. Several scenes on one page run independently.

Using It With Your Own Design

What the effect needs from your markup:

  • The data-vinyl-* hooks shown above. The script never selects a class name except .vinyl__track-title, which it reads for the screen reader announcement (or [data-vinyl-title] if you prefer an attribute).
  • [data-vinyl-sleeve] is measured and [data-vinyl-sleeve-art] inside it is moved. Keep them as two elements: the wrapper must stay untransformed.
  • [data-vinyl-platter] marks where the record lands; its centre is the record's centre. [data-vinyl-disc] sits on it in your CSS and the script moves it from the sleeve.
  • [data-vinyl-arm] is a zero-size hub placed on the tonearm pivot. [data-vinyl-stylus] sits one arm length straight down from it. The script reads the pivot, the arm length and the platter centre from the layout and solves the arm angle for every needle position, so you can redraw or resize the deck freely as long as the arm can reach the record.
  • One [data-vinyl-track] button per track, in playing order. Its length comes from data-vinyl-duration (seconds) or, failing that, the m:ss text in its [data-vinyl-time]. Groove bands are sized from these lengths.

What is only the demo's styling:

  • The sleeve SVG, the label SVG and the arm SVG are artwork. Replace the sleeve with your own cover image and the label with your own label art; keep the label inside [data-vinyl-spin] so it turns with the record.
  • The plinth, strobe dots, mat, pilot lamp, arm rest and base are decoration in style.css. .vinyl.is-motor lights the pilot lamp; delete the lamp if you do not want it.
  • Instrument Serif and Mona Sans, the warm dark ground and the vermilion accent.

CSS the effect depends on:

  • --disc on .vinyl sets the record's diameter; the deck's positions (--cx, --cy, --px, --py, --arm) are multiples of it. Change the proportions there, not with transforms.
  • --vinyl-out-x and --vinyl-out-y give the direction the record leaves the sleeve (1 0 is out of the right edge, 0 1 out of the bottom; the demo switches to 0 1 on phones).
  • The sleeve has a higher z-index than the record, and the deck must not create a stacking context (no transform, filter, opacity or z-index on .vinyl__deck), or the record will not slide out from behind the sleeve.
  • .has-js .vinyl:not([data-vinyl-static]) .vinyl__disc is hidden until the script places the record in the sleeve; the reduced-motion block restores it. Without JavaScript the record simply rests on the platter.
  • The script owns transform on the record, its spin layer, the sleeve art, the arm and the strobe ring. Style their children instead.

Options

Set on the [data-vinyl] element.

Attribute Values Default Description
data-vinyl-runway px 2600 Pinned scroll distance on fine pointers
data-vinyl-mobile-runway px 2000 Pinned scroll distance on touch devices
data-vinyl-rpm number 33.333 Motor speed once spun up (45 for a single)
data-vinyl-velocity 0 to 4 1 How strongly scroll speed adds to the spin; 0 turns the flick channel off
data-vinyl-decay seconds 0.7 How quickly a flick decays back to motor speed
data-vinyl-scrub seconds 0.6 ScrollTrigger scrub smoothing
data-vinyl-light degrees 225 Direction of the groove sheen (canvas angle, clockwise from 3 o'clock)
data-vinyl-matrix text catalogue text Etching in the run-out groove; set it empty to remove
data-vinyl-static 0 to 1 none Freeze the scene at that progress with no pin and no spin

Set on each [data-vinyl-track] button:

Attribute Values Default Description
data-vinyl-duration seconds from [data-vinyl-time] Track length; sizes its groove band

Accessibility

  • Keyboard: track rows are native buttons with a visible focus ring. Enter or Space cues the scroll to the start of that track, using Lenis when it is present and native smooth scrolling otherwise.
  • Screen readers: the deck is decorative (aria-hidden); the sleeve carries a text alternative and the track list is an ordered list. A polite live region announces each new track as the needle reaches it.
  • Touch: the same scroll drives the scene, with a shorter runway.
  • Reduced motion: no pin, no spin and no smooth scrolling. The record rests on the platter beside its sleeve with the tonearm on its rest and the full track list readable. Choosing a track places the needle on it without animation. Changing the preference while the page is open switches modes cleanly.
  • No JavaScript or a blocked CDN: the sleeve, title, track list and the record on its platter are all visible.

Dependencies

Required:

  • GSAP 3.12+ (the demo is pinned to 3.15.0)
  • ScrollTrigger

Optional:

  • Lenis 1.x for smooth scrolling (the demo uses 1.3.17). Add ?smooth=off to the URL or data-smooth="off" to <html> to use native scrolling.

The record is painted with Canvas 2D createConicGradient (all current browsers). Where it is missing the record keeps a simpler CSS sheen.

Also in your download: the full source, worked examples, the events and programmatic API, and the class reference.

£7