Processes Accordion

About Process Accordion

✦ Your process, one step at a time. Walk visitors through how you work. Open a step and the image travels with it, morphing on the way. Each step has its own title, text, image and CTA. Clean serif titles, smooth spring motion and a full-width layout, ready the moment you drop it in. Make it completely your own with flexible controls for layout, styling and motion :)

⚙ What you can customize

Easily adapt every part of the component to match your own brand and style.

Images ✦ Titles ✦ Descriptions ✦ CTA labels ✦ Links ✦ Open in new tab ✦ Open item on load ✦ Collapsible items ✦ Autoplay & progress bar ✦ Image side ✦ Image width & ratio ✦ Image radius ✦ Content width ✦ Section padding ✦ Item padding, gap & radius ✦ Badge styles ✦ Chevron or plus icon ✦ CTA as button or link ✦ Optional section header ✦ Tablet & mobile breakpoints ✦ Spring transition ✦ Typography ✦ Background & text colors ✦ Heading tags ✦ Optional FAQ schema

🎯 Perfect for

How-it-works sections ✦ Agency processes ✦ Service overviews ✦ Feature tours ✦ Onboarding steps ✦ Product highlights ✦ Landing pages ✦ FAQs

📱 Responsive by default

The layout automatically adapts to the component's width across Desktop, Tablet and Mobile. Titles scale down on smaller screens, and on mobile the image moves right into the open step, so nothing gets lost.

🖱 Included interactions

Image follows the open step ✦ Circle-to-card morph ✦ Smooth height animations ✦ Clickable images ✦ Animated CTA arrows ✦ Subtle image zoom ✦ Hover highlights ✦ Optional autoplay with progress bar ✦ Pause on hover & focus ✦ Arrow-key navigation ✦ Keyboard focus states ✦ Reduced-motion support

🔗 Live Preview

https://accordioninmotion.framer.website

––––––––

❤ Thank you so much for your support! I genuinely appreciate every download. I hope you have fun customizing this component and making it your own. Happy building!