5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:T776,

Add this elegant scroll indicator to your website to instantly display a living progress tracker that updates dynamically based on your content. Works seamlessly with CMS content and any heading-based layout.

How It Works

Collapsed — A minimal pill showing your scroll percentage. Clean and unobtrusive until you need it.

Expanded — Hover to reveal your full content structure. Section titles animate in, active sections highlight, and a click takes you exactly where you need to go.

Key Features

Gooey Animation — The percentage badge and indicator blend together with a satisfying organic animation as you begin scrolling. A subtle touch that makes navigation feel alive.

Frosted Glass Styling — Semi-transparent backgrounds with backdrop blur. Customizable colors, blur intensity, and borders to match any design.

Smart Content Detection — Five tracking modes: H1s only, H1+H2, H1-H3, all headings, or custom scroll sections via data attributes.

Native Framer Typography — Full font picker integration. Choose any font family, weight, size, and spacing directly from Framer's controls.

Intelligent Truncation — Long titles automatically truncate with ellipsis at your specified width.

Fully Customizable

Adjust sizing, padding, border radius, line thickness, animation physics, scroll offset, max items, custom label overrides, and more.

Drop it in and let your visitors always know exactly where they are.

---

Feel free to reach out if you need a custom slider or other type of component. dan@fetch.design

Please note: due to this being a digital product, refunds are not possible.

5a:[["$","$L5d",null,{"post":{"id":"019c2db3-a3a4-7faa-9d30-653d0033fff8","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"819018d8-b8c8-4378-b063-47f1b74d7585","name":"Dan Marek","slug":"dan-marek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28940/6d0MJdcJf21RQ6wMHwqlIhnIjvc-S4CurXlBHerBb9gilLBCgkpxiqogUC.png","followed":false,"followsYou":false},"media":[],"resources":[{"id":"cx0iJmJ3HZNtSwsxNHdL","resolved":true,"title":"Scroll Indicator Pro","body":"$5e","bodyJson":null,"introduction":"Compatible with Framer CMS","slug":"scroll-indicator-pro","author":{"framerUserId":"819018d8-b8c8-4378-b063-47f1b74d7585","name":"Dan Marek","slug":"dan-marek","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/28940/6d0MJdcJf21RQ6wMHwqlIhnIjvc-S4CurXlBHerBb9gilLBCgkpxiqogUC.png","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/cx0iJmJ3HZNtSwsxNHdL/scroll-indicator-pro-6o2RnitmAJ3TkD9lWI8WnZoPIV6LhH","metadata":{"tint":{"h":0,"s":0,"l":16},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-25T19:33:00.386Z","updatedAt":"2026-02-05T11:48:40.376Z","publishedAt":"2026-02-05T12:07:53.508Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://expanded-design-433771.framer.app/cms-page/dynamic-side-navigation-table-of-contents-component","price":"5","paymentUrl":"https://buy.polar.sh/polar_cl_YpNNxgLboDIyJrHbu5kw7u2OdAFeN2PgUCo7c2lN1DB","workshop":false,"categories":[{"id":"4c691677-c621-4041-a908-cbc2d3272658","name":"Navigation","slug":"navigation"}],"lastSaveId":"cZIthkWyE7dvWw90JQAy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":15,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-02-05T12:07:53.508Z","updatedAt":"2026-02-05T12:07:53.508Z","reported":false}}],"$L5f"]

Suggested for you