5d:I[333483,["/creators-assets/_next/static/immutable/chunks/356g_j0l71_46.js","/creators-assets/_next/static/immutable/chunks/15s1ft4k9lx-7.js","/creators-assets/_next/static/immutable/chunks/0x8sumr53pdkk.js","/creators-assets/_next/static/immutable/chunks/3pud1dqsw0-_7.js","/creators-assets/_next/static/immutable/chunks/1m75iqpnspynu.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/3ohf-5_4hfjuq.js","/creators-assets/_next/static/immutable/chunks/2jjhfe7-w6y9a.js","/creators-assets/_next/static/immutable/chunks/325i2v5l4tnlq.js","/creators-assets/_next/static/immutable/chunks/0kisxyo3aw231.js","/creators-assets/_next/static/immutable/chunks/2b1mm8iiske-y.js","/creators-assets/_next/static/immutable/chunks/0i7m0zg6jfazw.js","/creators-assets/_next/static/immutable/chunks/3-hmotkz_bdv_.js","/creators-assets/_next/static/immutable/chunks/06bqtx1jsc1kz.js","/creators-assets/_next/static/immutable/chunks/3q5wansxm4vp6.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/3naniu4pnqfyw.js","/creators-assets/_next/static/immutable/chunks/2-y_r3u4wh2s3.js","/creators-assets/_next/static/immutable/chunks/456d4lcv9-syj.js","/creators-assets/_next/static/immutable/chunks/36-o7-3julke0.js","/creators-assets/_next/static/immutable/chunks/2xq6uu2rcdc2i.js","/creators-assets/_next/static/immutable/chunks/2y9gv91n8o3i9.js","/creators-assets/_next/static/immutable/chunks/41i4r4u9uolgz.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/3e73rezw4k1a2.js","/creators-assets/_next/static/immutable/chunks/15q00pdqk0br3.js","/creators-assets/_next/static/immutable/chunks/293prjxu_wz0c.js","/creators-assets/_next/static/immutable/chunks/0l9v835j421-s.js","/creators-assets/_next/static/immutable/chunks/40oma2w708rd-.js","/creators-assets/_next/static/immutable/chunks/2x7-2b3jcc9x7.js","/creators-assets/_next/static/immutable/chunks/3_pg4jxj9aiiw.js","/creators-assets/_next/static/immutable/chunks/3k6sa9ujkqb5c.js","/creators-assets/_next/static/immutable/chunks/3l2h8slpbzxqo.js","/creators-assets/_next/static/immutable/chunks/2xgtw4s-tlhet.js","/creators-assets/_next/static/immutable/chunks/3b306xa-3tb7g.js","/creators-assets/_next/static/immutable/chunks/2fvzgkzqkig_w.js","/creators-assets/_next/static/immutable/chunks/3g6klxxyg4m8-.js","/creators-assets/_next/static/immutable/chunks/0qx5rzvbsd7bx.js","/creators-assets/_next/static/immutable/chunks/1cphzzg2t2qo2.js"],"PostDetailCard"] 5e:Tce6,

Full Description:

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.

Instructions:

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

How it Works:

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

Features:

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

Properties:

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

Use Cases:

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

Perfect For:

SaaS websites • Landing pages • Educational platforms • Agency portfolios • E-commerce sites • App marketing • Course platforms

Details:

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.

Support:

Have questions or need custom components? Reach out at buildwithmohanhq@gmail.com

Made with ❤️ by Mohan

5a:[["$","$L5d",null,{"post":{"id":"019bdc7c-1491-7c7f-a1bd-7880b50aa4d9","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"9e412565-9494-492c-be0a-54ddb43a4f58","name":"Mohan","slug":"buildwithmohanhq","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/431169/avatar-ckGy3TUUxHSpCQsmXWMFiZGZyJsvHJ.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"vIxlxxNrD7yGuw835w7K","resolved":true,"title":"Step Carousel","body":"$5e","bodyJson":null,"introduction":"Animated step-based carousel component","slug":"stepcarousel","author":{"framerUserId":"9e412565-9494-492c-be0a-54ddb43a4f58","name":"Mohan","slug":"buildwithmohanhq","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/431169/avatar-ckGy3TUUxHSpCQsmXWMFiZGZyJsvHJ.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/vIxlxxNrD7yGuw835w7K/stepcarousel-gvYl5EmEspOhhyMBatCj3mipW6mYwu","metadata":{"tint":{"h":0,"s":0,"l":3},"width":1600,"height":1200}}],"post":null,"createdAt":"2026-01-02T18:55:24.686Z","updatedAt":"2026-01-23T13:43:35.648Z","publishedAt":"2026-01-20T17:37:57.905Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://hy.chujiqiqi.com/m/Step-card-1-1-giYB.js@sX2XebwG0v3tLohNADfe","previewUrl":"https://flowsteps.framer.website/","price":null,"paymentUrl":null,"workshop":false,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"sX2XebwG0v3tLohNADfe","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":33,"liked":false},"comments":{"count":1},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-01-20T17:37:57.905Z","updatedAt":"2026-01-20T17:37:57.905Z","reported":false}}],"$L5f"]

Suggested for you