51:I[267044,["/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/3z6ke99nzr4_e.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/1fkcqskfw4hol.js","/creators-assets/_next/static/immutable/chunks/3ixl4aqv6ylo7.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/2di2v55rtz-8i.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/00owjoob9gqs9.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js"],"S"] 52:T9a6,

Scroll Gallery

Scroll Gallery turns a simple collection of images into an immersive scroll experience. As visitors move down the page, the gallery stays pinned while the selected image or video smoothly expands into a large featured view.

Made for visual storytelling

It works well for real estate websites, architecture portfolios, photography, product showcases, case studies, travel stories, and projects where visuals deserve more attention than a standard gallery.

What you can customize

Add multiple gallery images
Add a featured video
Use a custom poster image
Control video play timing
Choose animation easing
Adjust stagger timing
Turn video sound on or off
Restart the video on replay
Customize gap and padding
Change corner radius
Adjust pin distance
Change the background color

Everything is controlled from the Framer properties panel, so you can update the media, animation, spacing, playback behaviour, and appearance without editing the code.

How to use

Add Scroll Gallery to your page.
Set the component width to Fill.
Add your gallery images.
Add a video and poster image if needed.
Adjust the animation and layout settings.
Preview your experience before publishing.

Video and scroll controls

Play Threshold controls when the video starts during the scroll animation. A lower value starts it earlier, while a higher value starts it closer to the expanded view.

Pin Distance controls how long the gallery remains pinned. A smaller value creates a shorter, faster transition, while a larger value creates a slower, more cinematic experience.

Recommended settings

Play Threshold: 0.75
Easing: Linear
Stagger: 0
Video Sound: Off
Restart Replay: Off
Gap: 30px
Padding: 30px
Radius: 16px
Pin Distance: 300vh
Background: #0A0A0A

These settings provide a clean and balanced starting point. You can customize the complete gallery directly from Framer without touching the code.

53:T11c5,

🚀 Ultimate Range Slider for Framer – Fully Customizable, Modern & High-Performance

Looking for a powerful, flexible, and beautifully designed range slider for your next project?This all-in-one slider component is built to boost user interaction, enhance UI, and save development time - without any complexity.

✨ What Makes This Slider Stand Out?

This isn’t just a basic slider - it’s a complete slider system with multiple styles and advanced customization options, all packed into one easy-to-use component.

🎯 Powerful Features You’ll Love

🔹 Full Range Slider (Most Popular)

Display minimum, maximum, and current values
Ideal for filters, pricing, settings, and controls
Clean, intuitive, and professional UI

🔹 Minimal Mode (Hide Current Value)

Hide the live value for a clean, distraction-free look
Perfect for modern and minimal UI designs

🔹 Distraction-Free Slider (Hide Min & Max)

Remove min/max labels for a simplified interface
Best for sleek landing pages and simple interactions

🔹 Top-Aligned Values

Show min, max, and current value above the slider
Improves readability and UX
Great for dashboards, forms, and data-driven apps

🔹 Custom Prefix Support (₹, $, € & More)

Add currency or symbols like ₹, $, €
Perfect for:
- Pricing sliders
- Budget planners
- Cost estimators

👉 Example: ₹200 – ₹1300

🔹 Custom Suffix Support (K, M, GB & More)

Add suffixes like K, M, GB
Ideal for:
- Financial data
- Storage values
- Analytics metrics

👉 Example: 2M – 8M

🔹 Fully Customizable Value Styling

Style the current value your way:
- Background color
- Text color
- Border radius
Match perfectly with your brand identity

🔹 Premium Custom Range Knob

Design your own slider knob:
- Size
- Color
- Shape
Create a unique, high-end UI experience

🔹 Multi-Color Progress Slider

Use different colors for:
- Minimum
- Progress
- Maximum
Perfect for data visualization and advanced UI

🔹 Dynamic Value Display Anywhere

Show slider value in any text element
Easily connect via ID
Perfect for:
- Live pricing calculators
- Interactive forms
- Real-time updates

💡 Why This Slider is a Game-Changer

✅ Fully responsive across all devices✅ Modern, clean, and professional design✅ Super easy to customize (no coding headaches)✅ Seamless integration with Framer✅ Built for real-world projects

🧠 Perfect Use Cases

This slider is designed for:

SaaS websites
Pricing calculators
Dashboards
Landing pages
Finance tools
Analytics platforms

👨‍💻 Who Should Use This?

✔ Designers✔ No-code creators✔ Startups✔ SaaS founders✔ Agencies

🛒 Save Time & Build Faster

Stop rebuilding sliders from scratch.

👉 Just drag, drop, and customize👉 Maintain design consistency👉 Deliver better user experience in minutes

🔥 One Slider. Endless Possibilities.

If you want a professional, flexible, and high-performance range slider for Framer, this is the only component you need.

💜 Upgrade Your UI Today

Add this slider to your project and instantly elevate your design, UX, and interactivity.

50:["$","$L51",null,{"value":{"fallback":{"$inf$activity-creator-cb99a75c-f6b5-43cd-bedb-2c5a9a67da83-all:/unified/creator/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/activity/":[{"data":[{"id":"019fcd9b-0fad-77c0-a793-b2d3f3d16c83","type":"component.created","target":{"type":"component","id":"9IOHsfOeVDgihX3hjLmu","preview":"Animated Gallery","previewJson":null,"thumbnail":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/019fcd9a-19e2-72a0-aab8-56c110117afa.png","targetDeleted":false,"owned":false,"actions":null},"context":null,"actors":[{"id":"cb99a75c-f6b5-43cd-bedb-2c5a9a67da83","name":"Deep Javiya","avatar":"https://framerusercontent.com/avatars/users/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/Nzbz4Mjf6","slug":"deep-javiya","followed":false,"followsYou":false}],"actorCount":1,"message":null,"resourceType":"component","visibility":"public","startedAt":"2026-08-04T16:28:39.213Z","latestAt":"2026-08-04T16:28:39.213Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}],"$inf$posts:cb99a75c-f6b5-43cd-bedb-2c5a9a67da83:/unified/posts/?creator=cb99a75c-f6b5-43cd-bedb-2c5a9a67da83&with=reposts":[{"data":[{"id":"019fcd9b-0dab-73d9-a966-abbb3a6af9ef","title":null,"body":"

Just published Scroll Gallery — a free Framer component for creating smooth, scroll-animated image and video galleries.

Add your own media, adjust the spacing, radius, playback settings, and pin distance, and customize everything directly from the properties panel.

Built for portfolios, real estate, architecture, case studies, and visual storytelling. Would love to see what you create with it.

","bodyJson":{"type":"doc","content":[{"type":"paragraph","content":[{"type":"text","text":"Just published Scroll Gallery — a free Framer component for creating smooth, scroll-animated image and video galleries."}]},{"type":"paragraph","content":[{"type":"text","text":"Add your own media, adjust the spacing, radius, playback settings, and pin distance, and customize everything directly from the properties panel."}]},{"type":"paragraph","content":[{"type":"text","text":"Built for portfolios, real estate, architecture, case studies, and visual storytelling. Would love to see what you create with it."}]}]},"author":{"framerUserId":"cb99a75c-f6b5-43cd-bedb-2c5a9a67da83","name":"Deep Javiya","slug":"deep-javiya","avatar":"https://framerusercontent.com/avatars/users/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/Nzbz4Mjf6","followed":false,"followsYou":false},"media":[],"resources":[{"id":"9IOHsfOeVDgihX3hjLmu","resolved":true,"title":"Animated Gallery","body":"$52","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"Scroll Gallery"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Scroll Gallery turns a simple collection of images into an immersive scroll experience. As visitors move down the page, the gallery stays pinned while the selected image or video smoothly expands into a large featured view."}]},{"type":"customHeading","content":[{"type":"text","text":"Made for visual storytelling"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"It works well for real estate websites, architecture portfolios, photography, product showcases, case studies, travel stories, and projects where visuals deserve more attention than a standard gallery."}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add multiple gallery images"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a featured video"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Use a custom poster image"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Control video play timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Choose animation easing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust stagger timing"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Turn video sound on or off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Restart the video on replay"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Customize gap and padding"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Change corner radius"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust pin distance"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Change the background color"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"Everything is controlled from the Framer properties panel, so you can update the media, animation, spacing, playback behaviour, and appearance without editing the code."}]},{"type":"customHeading","content":[{"type":"text","text":"How to use"}],"attrs":{"level":1}},{"type":"orderedList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add Scroll Gallery to your page."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Set the component width to "},{"type":"text","text":"Fill","marks":[{"type":"bold"}]},{"type":"text","text":"."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add your gallery images."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Add a video and poster image if needed."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Adjust the animation and layout settings."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Preview your experience before publishing."}]}]}],"attrs":{"type":null,"start":1}},{"type":"customHeading","content":[{"type":"text","text":"Video and scroll controls"}],"attrs":{"level":1}},{"type":"paragraph","content":[{"type":"text","text":"Play Threshold","marks":[{"type":"bold"}]},{"type":"text","text":" controls when the video starts during the scroll animation. A lower value starts it earlier, while a higher value starts it closer to the expanded view."}]},{"type":"paragraph","content":[{"type":"text","text":"Pin Distance","marks":[{"type":"bold"}]},{"type":"text","text":" controls how long the gallery remains pinned. A smaller value creates a shorter, faster transition, while a larger value creates a slower, more cinematic experience."}]},{"type":"customHeading","content":[{"type":"text","text":"Recommended settings"}],"attrs":{"level":1}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Play Threshold: 0.75"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Easing: Linear"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Stagger: 0"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Video Sound: Off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Restart Replay: Off"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Gap: 30px"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Padding: 30px"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Radius: 16px"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Pin Distance: 300vh"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Background: #0A0A0A"}]}]}]},{"type":"paragraph","content":[{"type":"text","text":"These settings provide a clean and balanced starting point. You can customize the complete gallery directly from Framer without touching the code."}]}]},"introduction":"Gallery that comes alive on scroll","slug":"animated-gallery","author":{"framerUserId":"cb99a75c-f6b5-43cd-bedb-2c5a9a67da83","name":"Deep Javiya","slug":"deep-javiya","avatar":"https://framerusercontent.com/avatars/users/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/Nzbz4Mjf6","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/019fcd9a-19e2-72a0-aab8-56c110117afa.png","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1448,"height":1086}}],"post":null,"createdAt":"2026-08-04T16:28:38.163Z","updatedAt":"2026-08-04T16:28:38.163Z","publishedAt":"2026-08-04T16:28:38.160Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/AnimatedGallery-4x7qJS.js@5O40xd3F7luF7hk4e0SD","previewUrl":"https://animated-gallery.framer.ai/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"66bb31f7-cddf-4a3e-8604-95b3467aecc2","name":"Galleries","slug":"galleries"}],"lastSaveId":"5O40xd3F7luF7hk4e0SD","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":23,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-08-04T16:28:38.699Z","updatedAt":"2026-08-04T16:28:38.699Z"},{"id":"019cb831-a62a-7cff-b543-3be51bd1e338","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"cb99a75c-f6b5-43cd-bedb-2c5a9a67da83","name":"Deep Javiya","slug":"deep-javiya","avatar":"https://framerusercontent.com/avatars/users/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/Nzbz4Mjf6","followed":false,"followsYou":false},"media":[],"resources":[{"id":"ex0WcUMpW4GzsFmuMzU9","resolved":true,"title":"Advance Range Slider","body":"$53","bodyJson":null,"introduction":"Powerful • Flexible • Fully Customizable","slug":"advance-range-slider","author":{"framerUserId":"cb99a75c-f6b5-43cd-bedb-2c5a9a67da83","name":"Deep Javiya","slug":"deep-javiya","avatar":"https://framerusercontent.com/avatars/users/cb99a75c-f6b5-43cd-bedb-2c5a9a67da83/Nzbz4Mjf6","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ex0WcUMpW4GzsFmuMzU9/advance-range-slider-Ucr349Rfhasbkga6ZP4V43cHwKjjpz","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-02-07T22:57:17.872Z","updatedAt":"2026-04-21T17:38:46.204Z","publishedAt":"2026-03-04T09:33:07.498Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/Range-Slider-zKPisf.js@vuWriUuRN9fvIv7A7XKy","previewUrl":"https://advance-range-slider.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"bc230830-1d89-456e-96fe-6a9de5a801d0","name":"Forms","slug":"forms"}],"lastSaveId":"vuWriUuRN9fvIv7A7XKy","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":10,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-03-04T09:33:07.498Z","updatedAt":"2026-03-04T09:33:07.498Z"}],"pagination":{"next":null,"previous":null},"totalCount":"$undefined","feedSession":"$undefined"}]}},"children":"$L54"}]