Related Snippets

60 by shared tags
1 / 10
Scroll Lava Lamp Blobs

Scroll Lava Lamp Blobs

Scroll Day/Night Sky Cycle

Scroll Day/Night Sky Cycle

ScrollTo Anchor Nav

ScrollTo Anchor Nav

Scroll Before After

Scroll Before After

Three.js Scroll Shader Fluid Gradient Wave

Three.js Scroll Shader Fluid Gradient Wave

Scroll Canvas Generative Flow Field

Scroll Canvas Generative Flow Field

Learn Coding Visually

Learn to code with interactive, live-preview playgrounds — HTML, CSS, JavaScript, React & more.

See all ->
HTML Playground42 lessons · Click-based · Live previewCSS PlaygroundLearn CSS with a live editorJavaScript Playground60 lessons · DOM · Async · CanvasReact PlaygroundLearn React with a live code editorGSAP PlaygroundLearn GSAP animation interactivelySVG Playground44 lessons · shapes · paths · animationSCSS Playground45 lessons · Sass modules · tokensTailwind PlaygroundLearn Tailwind CSS with a live editorBootstrap 5 Playground50 lessons · live preview

Scroll Vinyl Record Spin — Tonearm Drop & Speed-Up Effect

Scroll Vinyl Record Spin · Scroll · Plain HTML, CSS & JS · Live preview

TagsGSAPGlassmorphismScroll AnimationJS Libraries

What's included

Features

Vinyl grooves and label rendered entirely with layered repeating-radial-gradient backgrounds, no image or canvas
One gsap.timeline() sequences three overlapping phases via explicit time-offset positioning, not separate triggers
Quadratic spin-up (spin * spin) makes the record visibly accelerate rather than snap to constant angular velocity
Tonearm swings via a single transform-origin-pivoted rotation, no joint elements or inverse kinematics
Now-playing card timed to fade in only once the record is most of the way up to speed
Direct style.transform writes in onUpdate keep the per-frame rotation update cheap
Warm vinyl-and-wood color palette reinforced by radial gradients on the stage backdrop
Fully reversible and pinned — scrolling up lifts the needle and spins the record back down to rest

About this UI Snippet

How to Build a Scroll-Driven Vinyl Record Spin-Up With CSS and GSAP

Screenshot of the Scroll Vinyl Record Spin snippet rendered live

The Scroll Vinyl Record Spin snippet sequences three coordinated pieces of motion — a tonearm lowering, a record accelerating from rest, and a now-playing card fading in — from one scrubbed GSAP timeline, using pure CSS gradients for the vinyl grooves and label instead of any image or canvas drawing.

Repeating radial gradients as vinyl grooves

The record's dark base and its fine groove texture are both repeating-radial-gradient(circle at center, ...) backgrounds layered on top of each other — one with a slightly larger step for the disc's overall banding, one with a much finer 1px step and low white opacity for the actual groove lines. No image asset, no SVG, and the grooves automatically stay centered and circular at any record size.

A timeline with overlapping, offset phases

Rather than three separate ScrollTriggers, one gsap.timeline() holds all three phases as tweens positioned at explicit time offsets (0, 0.3, 0.55) rather than sequentially — the tonearm starts lowering immediately, the record's acceleration begins slightly before the tonearm finishes settling (so the touch of the needle plausibly kicks off the spin), and the now-playing card only appears once the record is already most of the way up to speed. Overlapping phases like this read as one continuous mechanical sequence rather than three disconnected steps.

A non-linear spin-up, not constant angular velocity

Real turntables ramp up to speed rather than snapping instantly to full RPM. The record's rotation tween uses a plain numeric proxy (state.spin) and, in its onUpdate, computes total turns as spin * spin * 26 — a quadratic ease so the record visibly accelerates, covering far more rotation in the second half of the phase than the first, then applies that as a single rotate() transform written directly to the element for minimal per-frame overhead.

Tonearm rotation as one transform-origin trick

The tonearm's pivot is set via transform-origin at its mounting-post coordinates, so rotating the whole .vny-tonearm element by a small negative degree swings the entire arm-and-head assembly down onto the record edge, without needing separate joint elements or inverse kinematics.

Everything keyed to one scrubbed timeline

Because all three phases live inside one timeline scrubbed by a single ScrollTrigger, scrolling back up reverses the whole sequence in the correct order automatically — the card fades out first, the record decelerates back toward rest, and the tonearm lifts back off — with no manual state tracking required.

Build with AI

Build, Understand, Optimize, and Extend It With AI

You do not need a canvas drawing or an image asset to understand how this vinyl record spins up realistically on scroll. Paste this snippet's HTML, CSS, and JS into an AI assistant like Claude and ask it to explain why the rotation uses spin squared instead of a linear ramp, or why the timeline's three phases are given overlapping time offsets rather than running strictly in sequence. The same assistant can help you extend it — ask it to add a subtle wobble to the tonearm as it settles, vary record label colors per "track", or add a second record that swaps in once the first fades out. It can also help optimize further, for instance using CSS custom properties for the rotation angle instead of writing inline transform strings. Treat the code as a conversation starter, not a finished artifact.

Prompt to recreate it

Copy this into your AI assistant of choice to build the effect from scratch, or as a jumping-off point for your own variant:

text
Build a "scroll-scrubbed vinyl record spin-up" in plain HTML, CSS, and JavaScript using CSS gradients, GSAP, and GSAP's ScrollTrigger plugin, all loaded from a CDN (no bundler, no build step, no canvas, no image assets).

Requirements:
- A pinned section containing a circular "record" element styled with layered repeating-radial-gradient backgrounds to fake vinyl grooves (one coarser step for overall disc banding, one much finer low-opacity step for groove lines), a circular label element near its center, and a separate "tonearm" element positioned near the top-right of the record with its transform-origin set to a plausible mounting-post position.
- Build one gsap.timeline() attached to a ScrollTrigger on the pinned section, with pin: true, start at top top, a numeric scrub, and a multi-hundred-percent end.
- Inside that timeline, add a tween that rotates the tonearm element by a small negative degree (lowering it onto the record) positioned near the start of the timeline.
- Add a second tween, overlapping partway through the tonearm's lowering, that animates a plain numeric proxy value from 0 to 1 and, in its onUpdate callback, computes the record's rotation angle as that value squared times a large turn count, then writes a rotate() transform directly to the record element, so the record visibly accelerates from rest up to a fast spin rather than snapping to constant speed immediately.
- Add a third tween, starting once the record is mostly up to speed, that fades and slides in a small "now playing" info card (album art swatch, track title, artist).
- Confirm scrolling back up reverses the full sequence in the correct order: the card fades out, the record decelerates back toward rest, and the tonearm lifts back off the record — since the entire sequence lives in one timeline scrubbed by a single ScrollTrigger.

Want to tighten it up first? Run this prompt through the AI Prompt Studio to score it across 8 quality dimensions, catch anti-patterns, and tune the wording for Claude, ChatGPT, or Gemini before you paste it in.

Source Code

Requires
JS · gsap.min.jsJS · ScrollTrigger.min.js
<section class="vny-stage" id="vnyStage">
  <div class="vny-intro"><p>Scroll ↓ to drop the needle and spin up the record</p></div>
  <div class="vny-deck">
    <div class="vny-record" id="vnyRecord">
      <div class="vny-grooves"></div>
      <div class="vny-label">
        <span class="vny-label-title">SIDE A</span>
        <span class="vny-label-sub">45 RPM</span>
      </div>
      <div class="vny-hole"></div>
    </div>
    <div class="vny-tonearm" id="vnyTonearm">
      <div class="vny-tonearm-base"></div>
      <div class="vny-tonearm-arm">
        <div class="vny-tonearm-head"></div>
      </div>
    </div>
  </div>
  <div class="vny-card" id="vnyCard">
    <div class="vny-card-art"></div>
    <div class="vny-card-text">
      <strong>Now Playing</strong>
      <span>Nocturne in Warm Static</span>
      <span class="vny-card-artist">The Slow Room</span>
    </div>
  </div>
</section>
<section class="vny-bottom"><p>Side A, spinning at full speed.</p></section>

Step by step

How to Use

  1. 1
    Load the two GSAP CDN scriptsAdd gsap.min.js and ScrollTrigger.min.js from the CDN panel, in that order.
  2. 2
    Paste HTML, CSS, and JSA stationary record with its tonearm lifted appears inside a pinned stage.
  3. 3
    Scroll downThe tonearm lowers onto the record, the disc accelerates up to full speed, and a "Now Playing" card fades in.
  4. 4
    Scroll back upThe card fades out, the record decelerates, and the tonearm lifts off — the full sequence reverses in order.
  5. 5
    Restyle the label and cardEdit the .vny-label and .vny-card-text content and colors for your own track/album details.
  6. 6
    Adjust the pacingChange the ScrollTrigger end value (+=350%) or the timeline's phase offsets for a slower or snappier drop.

Real-world uses

Common Use Cases

Music, label, and DJ portfolio sites
Open a record label, artist, or DJ homepage with a literal needle-drop moment as the hero interaction.
Music streaming and playlist apps
Use as an onboarding or now-playing flourish that reinforces the app's music-first identity.
Retro and nostalgia-themed brands
A spinning vinyl motif suits vintage audio gear, cafes, and analog-craft brands better than a static photo.
Product pages for turntables and audio gear
Demonstrate a product's core interaction — dropping the needle — directly in the page itself.
Teaching multi-phase GSAP timelines
A compact example of offsetting several tweens within one timeline to create an overlapping, mechanical sequence.
Podcast and audio-essay landing pages
Pair with scroll thread stitch reveal for a crafted, tactile scroll-story feel.

Got questions?

Frequently Asked Questions

Two layered repeating-radial-gradient backgrounds handle it: one with a slightly larger repeat step colors the disc's overall dark banding, and a second with a much finer 1px repeat step and very low white opacity produces the fine groove lines. Because it is a gradient, it scales cleanly with the record's size and needs no image asset.

The rotation tween drives a plain numeric proxy (state.spin) from 0 to 1, and in its onUpdate callback the actual rotation angle is computed as spin squared times a turn count. Squaring the progress means the record covers much less rotation early in the phase and much more later, which reads as genuine acceleration rather than an instant jump to full RPM.

The .vny-tonearm element's transform-origin is set to the coordinates of its mounting post (where it would be screwed to a real turntable), so rotating that one element by a small negative degree swings the entire arm-and-head assembly down toward the record edge as a single rigid rotation, no separate joints needed.

Positioning the tonearm-lower, record-spin-up, and card-fade-in tweens at explicit time offsets (0, 0.3, 0.55) rather than back-to-back lets them overlap naturally — the record's acceleration begins slightly before the tonearm has fully settled, so the needle touching down plausibly triggers the spin, and the whole sequence reads as one continuous mechanical action instead of three disconnected steps.

Yes. Click JSX for a React component, Vue for a Vue 3 SFC, Angular for a standalone component, or Tailwind for a React + Tailwind version. Build the timeline inside a mount effect keyed to refs on the record, tonearm, and card, and on unmount kill the ScrollTrigger instance so the pin does not leak between route changes.