5e:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2ul6havqzfm41.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/2ouyrs2yz196q.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/3-tcb9ouhlqkm.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/1fo1h_o5odhhk.js","/creators-assets/_next/static/immutable/chunks/102lphbyhyqtr.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/1zpmt8l695i6d.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2rwbpl35w01v4.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/1p31g3z3kho5v.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/3sj_xp-v1_jxx.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/0ph1ht6wvel_v.js","/creators-assets/_next/static/immutable/chunks/2zfre20tirh12.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/0v-er0xp5q011.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0-hg6m03a-yoq.js"],"PostDetailCard"] 5f:T13dd,

The Sync Scroll Slider transforms traditional scroll gallery layouts into immersive, scroll-driven experiences. As users scroll vertically through your website, this horizontal scroll slider seamlessly moves your images and videos horizontally in synchronized motion, creating a cinematic and modern visual effect.

Whether you need a horizontal image slider, a horizontal video slider, or a combined scroll media slider, this component handles it all. Built for creators, agencies, and modern websites, this on scroll slider delivers smooth animations, responsive layouts, and highly customizable controls directly inside Framer.

Key Features

Sync Scroll Slider Mechanism: Scroll-reactive horizontal motion with smooth, synchronized movement.
Multi-Row Scroll Gallery: Staggered multi-row animations for cinematic depth effects.
Dynamic On Scroll Slider Response: Real-time speed adjustment based on user interaction.
Premium Horizontal Scroll Slider Physics: Smooth easing and floating motion transitions.
Fully Customizable Media Gallery: Complete control over rows, spacing, sizing, and styling.
Flexible Sizing: Adjustable item width, height, gap, and corner radius.
Independent Row Control: Create advanced horizontal scroll gallery layouts with independent row speeds and offset animations.
Performance Optimized: Lightweight execution ensuring a responsive and smooth horizontal media slider experience.
No Code Required: Native Framer controls with no complex setup required.

Perfect For

Creative Portfolios & Photography Galleries: Showcase high-quality work using a premium scroll image slider.
Agency Websites & Brand Showcases: Present case studies with a dynamic scroll video slider.
Landing Pages & Product Showcases: Capture user attention instantly with an interactive scroll media slider.
Logo Galleries: Display client logos in a clean, automated horizontal scroll slider.

Keywords: Sync Scroll Slider, Gallery Scroll Slider, Scroll Slider, On Scroll Slider, Scroll Gallery Slider, Scroll Gallery, Horizontal Scroll Gallery, Scroll Media Slider, Scroll Image Slider, Scroll Video Slider, Horizontal Media Slider, Horizontal Scroll Slider, Horizontal Image Slider, Horizontal Video Slider

Customization Controls

Sync Scroll Slider includes flexible customization controls directly inside the Framer properties panel, allowing creators to easily adjust layouts, spacing, styling, and motion behavior without writing additional code

Available Controls

1. Total Rows

Choose the number of horizontal media rows displayed inside the component.

2. Row Media Items

Add, remove, and organize media separately for each row using Framer’s built-in array controls.

3. Gap Size

Adjust spacing between media items for tighter or more open layouts.

4. Item Width & Height

Customize media dimensions to create landscape, portrait, square, or custom card layouts.

5. Corner Radius

Apply rounded or sharp corners to match different visual styles and design systems.

6. Scroll Speed

Control how quickly the rows react to vertical scrolling for subtle or more dynamic motion effects.

Easy Media Management

Media can be updated directly from the Framer properties panel by adding, removing, or rearranging items inside each row array.

This makes it easy to :

Replace images or videos
Reorder media items
Create custom row compositions
Build unique gallery layouts quickly

Flexible & Responsive

All controls are designed to work seamlessly across responsive layouts, making the component ideal for portfolios, galleries, landing pages, showcases, and modern interactive sections.

Important Note :

Please ensure that all images and videos are properly compressed prior to uploading for optimal speed and performance.

5b:[["$","$L5e",null,{"post":{"id":"019eb117-4444-76dc-885b-135a1e095d58","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"e345ab55-2332-4208-93c3-60dfe7e719ff","name":"7 Sync Technologies","slug":"7-sync-technologies","avatar":"https://framerusercontent.com/avatars/users/e345ab55-2332-4208-93c3-60dfe7e719ff/LZO9fplfb","followed":false,"followsYou":false},"media":[],"resources":[{"id":"SJ5SxyRrgWTrckM5DtAJ","resolved":true,"title":"Sync Scroll Slider","body":"$5f","bodyJson":null,"introduction":"Horizontal Media Gallery Scroll Slider","slug":"sync-scroll-slider","author":{"framerUserId":"e345ab55-2332-4208-93c3-60dfe7e719ff","name":"7 Sync Technologies","slug":"7-sync-technologies","avatar":"https://framerusercontent.com/avatars/users/e345ab55-2332-4208-93c3-60dfe7e719ff/LZO9fplfb","followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/SJ5SxyRrgWTrckM5DtAJ/sync-scroll-slider-UEcFiobkU29p11dvp55mdTrSZYieyv"}],"post":null,"createdAt":"2026-06-06T10:20:32.802Z","updatedAt":"2026-06-10T10:23:03.686Z","publishedAt":"2026-06-10T10:32:32.580Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://framer.com/m/SyncScrollSlider-eS7UAJ.js@Kog2VcEu283eC00RzbgG","previewUrl":"https://sync-scroll-slider.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"Kog2VcEu283eC00RzbgG"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":137,"liked":false},"comments":{"count":10},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-06-10T10:32:32.580Z","updatedAt":"2026-06-10T10:32:32.580Z","reported":false}}],"$L60"]

Suggested for you

Suggested for you

Suggested for you