CenterLiftCarousel brings a highly interactive, dynamic 320px dimensional 3D feel directly to your Framer designs. Drop it into your portfolio, product showcase, or landing page hero sections to effortlessly draw user focus to your primary content. As visitors scroll or drag through the loop, the active center card elegantly scales up and lifts while adjacent items gracefully recede with customizable opacity, offering a striking editorial layout that remains fluid and responsive across desktop, tablet, and mobile breakpoints.
It renders a continuous loop carousel that tracks user interaction via touch dragging or mouse wheel scrolling. The component automatically calculates custom responsive layouts based on your defined tablet and mobile breakpoints. It handles real time layout adjustments, dynamically calculating card gaps, custom font assignments, and precision pagination dot offsets. It applies fluid spring animations to the lift transitions, keeping the motion natural as inactive cards scale down and change opacity based on their distance from the screen center.
Sizing & Breakpoints: Card width and height, card gaps, responsive sizing toggles, custom tablet breakpoints and sizing, custom mobile breakpoints and sizing, and corner border radius.
Animation & Lift Physics: Inactive item scale, inactive item opacity values, custom spring animation settings, and the exact vertical lift height for the centered card.
Layout Gaps & Typography: Spacing gaps between tags, titles, subtitles, and buttons. Full font family selection for titles, subtitles, tags, and navigation buttons.
Colors & Styling: Total control over the canvas background, individual card backgrounds, primary text, subtitles, tag backgrounds, tag text, button backgrounds, and button text colors.
Navigation Controls: Show or hide navigation arrows, set arrow visibility to always show or mobile only, toggle drag to scroll, toggle mouse wheel scrolling, show or hide pagination dots, plus complete customization over dot color, active dot color, dot size, dot gap, and vertical bottom offsets.
product feature showcases
design portfolio and case study highlights
dynamic testimonial and review loops
landing page heroes and visual sections
interactive pricing or plan cards
If you ship something cool with it, post it on X and tag me @Dulajweb , or send it over. I’d love to see what you create.
Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb
Dulaj dilshan
