Sticky Scroll

StickyScrollGallery transforms ordinary image galleries into immersive scroll experiences.The center column remains sticky while left and right columns scroll naturally, creating a cinematic parallax effect. Lazy-loading ensures optimal performance, while responsive design guarantees that it works seamlessly on mobile and desktop.

Designed for Framer and React, the component provides a variety of customization options including title/subtitle/footers, colors, fonts, image dimensions, gaps, border radius, and interactivity hooks.

Key Features

• Sticky center column with smooth scrolling left and right columns

• Fully responsive: adapts to mobile and desktop layouts

• Lazy-loaded images for optimized performance

• Optional collapsible header with title and subtitle

• Configurable footer text with gradient styling

• Adjustable image height, border radius, and gaps

• Customizable colors and fonts for title, subtitle, footer, and background

• Clickable images with callback support

• Framer-ready: no extra dependencies required

How to Use

1. Drag StickyScrollGallery into your Framer canvas or React project.

2. Open the properties panel and configure:

   • Title / Subtitle / Footer Text — set your gallery headings

   • Colors — background color and text color

   • Fonts — set typography for title, subtitle, and footer

   • Images — upload images for left, center sticky, and right columns

   • Image Height / Border Radius / Gap — customize spacing and style

   • Show / Hide Options — toggle header, footer, background grid, and text

   • Allow Title Collapse — enable a collapsible header for compact views

3. Preview the gallery — scroll interaction and sticky behavior will animate automatically.

Customization Options

• Images: Assign images to left, center (sticky), and right columns; supports multiple image formats.

• Header: Toggle header visibility, title, subtitle, and background grid.

• Footer: Toggle footer visibility and customize text with gradient styling.

• Fonts: Control font family, size, variant, line-height, and letter spacing.

• Image Height: Adjust the vertical size of gallery images.

• Border Radius: Round the corners of images for aesthetic styling.

• Gap: Define spacing between images in the gallery layout.

• Title Collapse: Allow users to collapse or expand the header for compact scrolling.

• Text & Background Colors: Set colors for text and overall background.

• Responsive Behavior: Automatically switches to a single column layout on mobile.

• Image Click Callback: Handle clicks on images for interactive effects.

Perfect For

• Portfolio websites and creative showcases

• Landing pages with interactive storytelling

• Photography galleries or art exhibits

• Product showcases for e-commerce or SaaS

• Any scroll-driven immersive experience