webdevpuneet.com

Related Snippets

204 in Scroll Effects category
25–30 of 60

Scroll Fabric Unroll Bolt

Scroll Pinball Flipper Launch

Scroll Polaroid Stack Flip

Scroll Neon Sign Flicker On

Scroll Terrain Contour Lines

Scroll Cassette Tape Rewind

Scroll Fabric Unroll Bolt — Free HTML CSS JS Snippet

Scroll Fabric Unroll Bolt · Scroll · Plain HTML, CSS & JS · Live preview

CategoryScroll Effects
TagsGSAPScroll AnimationJS Libraries

Copy & paste

Source Code

Requires
JS · gsap.min.jsJS · ScrollTrigger.min.js
<div class="wrap">
  <div class="hint">Scroll ↓ to unroll the bolt of fabric</div>
  <div class="table">
    <div class="bolt-scene">
      <div class="roll" id="roll">
        <div class="roll-end"></div>
        <div class="roll-core"></div>
      </div>
      <div class="fabric" id="fabric">
        <div class="fabric-edge"></div>
        <span class="fabric-label">Heritage Weave — 100% Cotton</span>
      </div>
    </div>
  </div>
</div>

Extend with AI

Take This Snippet Further With AI

The AI prompt for this one is for Patreon supporters ($3 a month), along with a site with no ads. Supporters enter the passcode once and it is remembered in this browser.

· Become a supporter

What's included

Features

Sticky-positioned stage (position: sticky) combined with pin: false ScrollTrigger — no spacer elements inserted
Fabric width grows from 4% to 82% via a scrubbed, ease: none tween for direct scroll tracking
Roll rotates up to 900° and shrinks in width simultaneously to sell the unrolling illusion
CSS-only woven pattern from two stacked repeating-linear-gradient layers, no image assets
Fabric label crossfades in at a fixed timeline milestone once enough cloth has unrolled
Fully reversible — scrolling up retracts the fabric and respins the roll back
Warm textile palette: cotton cream background, walnut roll, brick-red woven fabric
Single scrubbed timeline keeps every sub-animation perfectly synchronized

About this UI Snippet

Scroll Fabric Unroll Bolt — Scrubbed Width Growth, Roll Rotation & Sticky Staging

Screenshot of the Scroll Fabric Unroll Bolt snippet rendered live

A textile-shop-style scroll effect: a rolled bolt of fabric sits at the left of a sticky stage, and as the page scrolls, a patterned strip grows out from it like cloth being unrolled across a cutting table. Pair with Scroll Parallax Layers for a complementary scrub technique, or Scroll Progress if you want an explicit completion indicator alongside it.

A sticky stage inside a tall section

The outer .table element is 260vh tall — it defines how much scroll distance the unroll takes. Inside it, .bolt-scene is position: sticky; top: 20vh, so it holds its position on screen for the duration of that scroll distance without GSAP's pin. This snippet intentionally uses pin: false on its ScrollTrigger — sticky positioning does the visual staging instead, which is lighter weight and avoids GSAP inserting spacer elements.

Growing width, not translateX

The fabric strip starts at width: 4% and is tweened to width: 82% with ease: none inside a scrubbed timeline. Because scrub is a number, the width tracks scroll position directly — scrolling up shrinks the fabric back into the roll exactly as it grew out.

Selling the unroll with rotation and shrink

Two more tweens run in parallel on the same timeline position (0): the roll rotates up to 900° (transformOrigin: '50% 50%') to look like it is spinning as cloth pays out, and its width tweens down from 56px to 34px, implying the roll is getting thinner as material leaves it. All three tweens share the same scrub-driven timeline, so they stay perfectly in sync in both scroll directions.

Pattern via layered repeating-linear-gradient

The fabric texture is pure CSS — two stacked repeating-linear-gradient backgrounds at opposing angles create a woven plaid-like pattern with no image asset, so it scales crisply as the strip's width changes.

Label fade-in as a milestone

The fabric label crossfades in via a short tween placed at timeline position 0.3, appearing only once enough fabric has unrolled to read comfortably — a simple example of layering a discrete "reveal" on top of a continuous scrub.

Step by step

How to Use

  1. 1
    Scroll through the sectionScroll down slowly — the fabric strip grows out from the roll, the roll spins and thins, and the label fades in partway through.
  2. 2
    Scroll back upThe whole sequence reverses smoothly — the fabric retracts, the roll unspins, and the label fades out.
  3. 3
    Change the fabric patternEdit the repeating-linear-gradient values on .fabric in the CSS panel to swap in stripes, checks, or a different colorway.
  4. 4
    Adjust unroll distanceChange the height of .table (currently 260vh) to make the unroll take more or less scroll distance.
  5. 5
    Tune the final fabric lengthChange the width: "82%" target in the JS panel to make the unrolled strip longer or shorter relative to the stage.
  6. 6
    Export in your formatClick "HTML" for a standalone file, "JSX" for React, or "Tailwind" for a React + Tailwind version.

Real-world uses

Common Use Cases

Textile or fashion brand storytelling section
Showcase fabric, pattern, or material craftsmanship on a product or about page with a tactile, tangible scroll reveal.
E-commerce product reveal
Adapt the growing-strip technique to reveal a product image, swatch, or spec sheet as customers scroll a product detail page.
Learn scrubbed width/size tweens
Study how easing a CSS width property with ease: none inside a scrub timeline produces a 1:1 scroll-to-size mapping.
Craft or maker-brand landing page
Use as a signature hero moment for artisanal, handmade, or heritage-craft brands that want a slow, materials-forward first impression.
Editorial long-form feature
Pair with narrative copy about textile production, weaving history, or supply chain transparency for a magazine-style scroll feature.

Got questions?

Frequently Asked Questions

Sticky positioning achieves the same "stays in view while scrolling through this section" effect without GSAP inserting a pin-spacer element, which keeps the DOM simpler for an effect like this that does not need pin's more advanced pinning controls.

The width tween uses ease: "none" inside a scrub-driven timeline, so GSAP maps scroll progress directly and linearly to the width value — no easing curve means no lag between scroll position and fabric length.

Two repeating-linear-gradient backgrounds are layered at opposing 45-degree angles with different colors and opacities, producing a plaid-like weave purely in CSS that stays crisp at any element size.

All three tweens are placed at the same timeline position (0) in one scrubbed GSAP timeline, so they progress in lockstep with scroll — this is what makes the roll look like it is actively unspooling the fabric rather than the two effects happening independently.

Yes — change the height of the .table element. A taller section spreads the same 0-to-1 animation across more scroll distance, making it feel slower; a shorter one speeds it up.