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
Drag StickyScrollGallery into your Framer canvas or React project.
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
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
Launchly
