Engage your visitors with the Timed Photo Carousel, a high-performance Framer component that mimics the popular "Story" format found on Instagram and TikTok. Unlike standard sliders, this component features a unique segmented progress bar that visually indicates the remaining time for each slide using connected dots and bars.
It is built for modern web design, offering complete control over the visual presentation. You can apply linear gradients to the progress bars, toggle between top or bottom positioning, and adjust the thickness to fit your brand identity. It handles responsive images efficiently and uses optimized animation logic (requestAnimationFrame) to ensure buttery-smooth performance on all devices.
Functions (Key Features):
Story-Style Indicator: Features a segmented progress bar with dots, simulating the viral social media "Story" aesthetic.
Gradient Support: Switch between solid colors or dual-color gradients for the progress indicators.
Fully Customizable: Adjust bar height, thickness, padding, and corner radius to match your UI.
Flexible Positioning: Place the progress indicator at the Top or Bottom of the image container.
Smart Auto-Play: Smooth automatic transitions with customizable duration per slide.
How to Use:
Insert: Drag the Timed Photo Carousel component onto your canvas.
Add Images: In the properties panel, upload your images or connect them via variables.
Timing: Set the Slide Duration (e.g., 3-5 seconds) for the auto-advance speed.
Styling: Choose your Bar Color Mode (Basic or Gradient). If Gradient, pick two colors to create a unique look.
Positioning: Use Bar Position to place the indicators at the Bottom (default) or Top.
Fine Tune: Adjust Bar Thickness and Padding to control how subtle or bold the interface looks.
Engage your visitors with the Timed Photo Carousel, a high-performance Framer component that mimics the popular "Story" format found on Instagram and TikTok. Unlike standard sliders, this component features a unique segmented progress bar that visually indicates the remaining time for each slide using connected dots and bars.
It is built for modern web design, offering complete control over the visual presentation. You can apply linear gradients to the progress bars, toggle between top or bottom positioning, and adjust the thickness to fit your brand identity. It handles responsive images efficiently and uses optimized animation logic (requestAnimationFrame) to ensure buttery-smooth performance on all devices.
Functions (Key Features):
Story-Style Indicator: Features a segmented progress bar with dots, simulating the viral social media "Story" aesthetic.
Gradient Support: Switch between solid colors or dual-color gradients for the progress indicators.
Fully Customizable: Adjust bar height, thickness, padding, and corner radius to match your UI.
Flexible Positioning: Place the progress indicator at the Top or Bottom of the image container.
Smart Auto-Play: Smooth automatic transitions with customizable duration per slide.
How to Use:
Insert: Drag the Timed Photo Carousel component onto your canvas.
Add Images: In the properties panel, upload your images or connect them via variables.
Timing: Set the Slide Duration (e.g., 3-5 seconds) for the auto-advance speed.
Styling: Choose your Bar Color Mode (Basic or Gradient). If Gradient, pick two colors to create a unique look.
Positioning: Use Bar Position to place the indicators at the Bottom (default) or Top.
Fine Tune: Adjust Bar Thickness and Padding to control how subtle or bold the interface looks.
