FlowSteps is a step-based carousel component for Framer that creates engaging, animated presentations of sequential content. Display processes, features, testimonials, or onboarding steps with elegant stacked card animations and complete design control.
Perfect for product tours, feature highlights, onboarding flows, and storytelling experiences with both manual navigation and automatic cycling.
Copy and paste FlowSteps into your Framer project
Add content using the Steps control (title, description, optional image)
Customize appearance: dimensions, radius, shadow, transitions, padding, fonts, colors
Enable Autoplay for automatic progression
Toggle Pause on Hover for user control
Steps Array: Add unlimited steps displayed as stacked cards
3D Stack Effect: Background cards scale and dim for depth
Navigation: Arrow buttons or keyboard arrows (left/right)
Autoplay Mode: Auto-cycles through steps at set intervals
Responsive Images: Full background image support with positioning
Performance: Only visible cards render and animate
Step-based navigation for tutorials and onboarding
Smooth card animations with customizable speed
Autoplay with adjustable intervals
3D layered stack effect for visual depth
Framer font picker integration
Keyboard accessible navigation
No code required—fully configurable in property panel
Content: Steps array (title, description, image) Card Styling: Width, height, radius, shadow Animation: Transition speed, dim scale, dim opacity Layout: Arrows gap, padding (top/right/bottom/left) Typography: Font family, text color, title/desc sizes Autoplay: Enable/disable, interval, pause on hover
Onboarding flows for product walkthroughs
Process explanations and workflows
Feature showcases with visuals
Testimonial carousels and case studies
Product tours and storytelling
Educational tutorials and courses
Portfolio project presentations
Service offerings and packages
SaaS websites • Landing pages • Educational platforms • Agency portfolios • E-commerce sites • App marketing • Course platforms
Built with React and Framer Motion for smooth 60fps animations. Fully responsive, keyboard accessible, and performance-optimized. No coding required—configure everything through Framer's property panel.
Have questions or need custom components? Reach out at buildwithmohanhq@gmail.com
Made with ❤️ by Mohan