I started creating a timeline component with AI, and in the end I saw the potential for other use cases. I did my best to make it as responsive and customisable as possible.
This framer code component is a deep customizable Multi-Image Card Carousel for different use cases - product overview, timeline and more.
Per section: button label, title, subtitle, tags, caption, filter values and any number of images. Text fields support bold, italic and line breaks. No limit on sections.
Previous, next and menu buttons with an optional progress bar. A menu overlay lists all sections. Arrow keys, swipe gestures, image arrows and indicator dots included.
Opens images full screen, with arrows, dots, close button, backdrop, separate opening and closing transitions and optional page-scroll locking. Can be switched off.
Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages.
Steps through all images of a card before moving on. Pauses on hover, on hidden browser tabs, when scrolled out of view, and for a set delay after any manual step.
Fade, Crossfade, Zoom and Swipe, set separately for cards, images and the lightbox, each with Framer's transition editor. Optional Ken Burns effect.
Semantic HTML, ARIA labels, screen-reader announcements on card changes, focus handling in the lightbox, full keyboard navigation, and reduced-motion support.
Twelve property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, all through Framer's native controls.
Uses Framer's animation library and Phosphor Icons. Version ONE.
Questions and feedback are welcome via the Framer Community.
I hope this code component can be also a great utility for your project.
I started creating a timeline component with AI, and in the end I saw the potential for other use cases. I did my best to make it as responsive and customisable as possible.
This framer code component is a deep customizable Multi-Image Card Carousel for different use cases - product overview, timeline and more.
Per section: button label, title, subtitle, tags, caption, filter values and any number of images. Text fields support bold, italic and line breaks. No limit on sections.
Previous, next and menu buttons with an optional progress bar. A menu overlay lists all sections. Arrow keys, swipe gestures, image arrows and indicator dots included.
Opens images full screen, with arrows, dots, close button, backdrop, separate opening and closing transitions and optional page-scroll locking. Can be switched off.
Show all sections or only selected ones. Matching is case-insensitive and accepts several values, so one component can serve different pages.
Steps through all images of a card before moving on. Pauses on hover, on hidden browser tabs, when scrolled out of view, and for a set delay after any manual step.
Fade, Crossfade, Zoom and Swipe, set separately for cards, images and the lightbox, each with Framer's transition editor. Optional Ken Burns effect.
Semantic HTML, ARIA labels, screen-reader announcements on card changes, focus handling in the lightbox, full keyboard navigation, and reduced-motion support.
Twelve property groups covering fonts, colours, borders, shadows, radii, padding, spacing, alignment, hover effects, image sizing and visibility switches, all through Framer's native controls.
Uses Framer's animation library and Phosphor Icons. Version ONE.
Questions and feedback are welcome via the Framer Community.
I hope this code component can be also a great utility for your project.
Markus Petzold
