5c:I[333483,["/creators-assets/_next/static/immutable/chunks/16d0e6blr3zvd.js","/creators-assets/_next/static/immutable/chunks/3jpuro209qqra.js","/creators-assets/_next/static/immutable/chunks/2qlox892e2j_q.js","/creators-assets/_next/static/immutable/chunks/0c6romi9ma0is.js","/creators-assets/_next/static/immutable/chunks/1jubx4t_1hq7l.js","/creators-assets/_next/static/immutable/chunks/30hhj9fl_j_en.js","/creators-assets/_next/static/immutable/chunks/07e2f_v4-u-we.js","/creators-assets/_next/static/immutable/chunks/33adfll0sgxzj.js","/creators-assets/_next/static/immutable/chunks/2504rifrkrd_l.js","/creators-assets/_next/static/immutable/chunks/3orcs6a8eyfvz.js","/creators-assets/_next/static/immutable/chunks/19-jcjdymr-fa.js","/creators-assets/_next/static/immutable/chunks/39xjxvqtwa0x7.js","/creators-assets/_next/static/immutable/chunks/41zrh_r6fdtfq.js","/creators-assets/_next/static/immutable/chunks/120zfy8hqrcwf.js","/creators-assets/_next/static/immutable/chunks/19r4rf2zyng-y.js","/creators-assets/_next/static/immutable/chunks/3o3dwck1w1ue6.js","/creators-assets/_next/static/immutable/chunks/2c_4he4mvu2r0.js","/creators-assets/_next/static/immutable/chunks/3n0g19afc7srh.js","/creators-assets/_next/static/immutable/chunks/3q7g04e77g4lf.js","/creators-assets/_next/static/immutable/chunks/1u1uuj9mj0hoo.js","/creators-assets/_next/static/immutable/chunks/0lmnldnlzsgok.js","/creators-assets/_next/static/immutable/chunks/2iw_-bo8jogap.js","/creators-assets/_next/static/immutable/chunks/0z2hzm-7v_g2c.js","/creators-assets/_next/static/immutable/chunks/3o1z26bd2_9eh.js","/creators-assets/_next/static/immutable/chunks/2qeyp4zfa4qwb.js","/creators-assets/_next/static/immutable/chunks/14h9277o22-rl.js","/creators-assets/_next/static/immutable/chunks/2qrxli96_t9cq.js","/creators-assets/_next/static/immutable/chunks/27vyv0cqm_295.js","/creators-assets/_next/static/immutable/chunks/1_2vu9p6mra4j.js","/creators-assets/_next/static/immutable/chunks/37uei1iwbnu3m.js","/creators-assets/_next/static/immutable/chunks/05i2jce8amocn.js","/creators-assets/_next/static/immutable/chunks/2njnkxjf39nsf.js","/creators-assets/_next/static/immutable/chunks/3edl5e308nytq.js","/creators-assets/_next/static/immutable/chunks/17w9c6wazundy.js","/creators-assets/_next/static/immutable/chunks/3zq_69yv5l6lg.js","/creators-assets/_next/static/immutable/chunks/14pxn0b6e1dc9.js","/creators-assets/_next/static/immutable/chunks/44oc0x6k7mw-i.js","/creators-assets/_next/static/immutable/chunks/02ciyo_cdpkrz.js","/creators-assets/_next/static/immutable/chunks/2_qutx8yar-up.js","/creators-assets/_next/static/immutable/chunks/0p4vy6mn-x9zs.js"],"PostDetailCard"] 5d:T90d,

About

SplitSide brings an elegant, highly interactive team showcase layout straight into your Framer projects. Perfect for landing pages, about sections, or portfolio screens, this component splits imagery and typography into a perfectly balanced, responsive layout.

What it does

It renders a dynamic split screen grid that beautifully pairs team member imagery with contextual text, bios, and links. The component handles custom image column widths, adjusts text alignments, and includes built in navigation arrows and progress tracking indicators.

What you can customize

Layout & Spacing: Adjust member counts, individual profile items, panel padding (horizontal and vertical), and custom text max widths to perfectly align with your grid.
Image Controls: Toggle photos to the left, right, or alternating layouts. Fine tune the image column width percentage, component height, and select image fitting options like cover.
Typography: Fully customize font sizes, line heights, letter spacing, and weights for names, roles, and bios. You can even force roles to uppercase for a cleaner aesthetic.
Animations: Switch up photo transitions (like slide) and text transitions (like fade up). Fine tune the transition duration and text stagger speeds, and toggle direction aware movement on or off.
Navigation & Extras: Show or hide progress bars, configure progress bar positions (top or bottom), and align arrows perfectly with customizable styles, sizes, and layout options.
Styling & Tags: Toggle skills or department tags with outline styles, control tag sizes, and fully customize color palettes for backgrounds, names, roles, bios, accents, dividers, and buttons.

Great for

Agency about pages
Corporate team spotlights
Founder and speaker profiles
Portfolio creative retrospectives
High end studio showcase sections

Need help?

Questions or feedback? Reach me anytime: dulajdilshan766@gmail.com or on X @Dulajweb

59:[["$","$L5c",null,{"post":{"id":"019f53e7-6338-75d9-9c10-34c648980c88","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"I6HeaK8cD3B7lSroFzCC","resolved":true,"title":"SplitScreenCarousel","body":"$5d","bodyJson":{"type":"doc","content":[{"type":"customHeading","content":[{"type":"text","text":"About"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"SplitSide brings an elegant, highly interactive team showcase layout straight into your Framer projects. Perfect for landing pages, about sections, or portfolio screens, this component splits imagery and typography into a perfectly balanced, responsive layout. "}]},{"type":"customHeading","content":[{"type":"text","text":"What it does"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"It renders a dynamic split screen grid that beautifully pairs team member imagery with contextual text, bios, and links. The component handles custom image column widths, adjusts text alignments, and includes built in navigation arrows and progress tracking indicators. "}]},{"type":"customHeading","content":[{"type":"text","text":"What you can customize"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Layout & Spacing","marks":[{"type":"bold"}]},{"type":"text","text":": Adjust member counts, individual profile items, panel padding (horizontal and vertical), and custom text max widths to perfectly align with your grid."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Image Controls","marks":[{"type":"bold"}]},{"type":"text","text":": Toggle photos to the left, right, or alternating layouts. Fine tune the image column width percentage, component height, and select image fitting options like cover."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Typography","marks":[{"type":"bold"}]},{"type":"text","text":": Fully customize font sizes, line heights, letter spacing, and weights for names, roles, and bios. You can even force roles to uppercase for a cleaner aesthetic."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Animations","marks":[{"type":"bold"}]},{"type":"text","text":": Switch up photo transitions (like slide) and text transitions (like fade up). Fine tune the transition duration and text stagger speeds, and toggle direction aware movement on or off."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Navigation & Extras","marks":[{"type":"bold"}]},{"type":"text","text":": Show or hide progress bars, configure progress bar positions (top or bottom), and align arrows perfectly with customizable styles, sizes, and layout options."}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Styling & Tags","marks":[{"type":"bold"}]},{"type":"text","text":": Toggle skills or department tags with outline styles, control tag sizes, and fully customize color palettes for backgrounds, names, roles, bios, accents, dividers, and buttons."}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Great for"}],"attrs":{"level":2}},{"type":"bulletList","content":[{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Agency about pages"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Corporate team spotlights"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Founder and speaker profiles"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"Portfolio creative retrospectives"}]}]},{"type":"listItem","content":[{"type":"paragraph","content":[{"type":"text","text":"High end studio showcase sections"}]}]}]},{"type":"customHeading","content":[{"type":"text","text":"Need help?"}],"attrs":{"level":2}},{"type":"paragraph","content":[{"type":"text","text":"Questions or feedback? Reach me anytime: "},{"type":"text","text":"dulajdilshan766@gmail.com","marks":[{"type":"link","attrs":{"rel":"noopener noreferrer nofollow","href":"mailto:dulajdilshan766@gmail.com","target":"_blank"}}]},{"type":"text","text":" or on X @Dulajweb"}]}]},"introduction":"The ultimate interactive team show","slug":"splitscreencarousel","author":{"framerUserId":"0bce05c0-4760-4da5-b2f4-851230a1db47","name":"Dulaj dilshan","slug":"dulaj-dilshan-gy7b4j","avatar":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/creators/132150/avatar-ZgETawWJyCuMuzgHBdPTUADcWJAJWn.jpg","badges":["available","expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/media/0bce05c0-4760-4da5-b2f4-851230a1db47/019f53e7-2bb2-734b-9620-7b6f9fe9d3b5.png"}],"post":null,"createdAt":"2026-07-12T01:18:20.720Z","updatedAt":"2026-08-31T20:39:29.376Z","publishedAt":"2026-07-12T01:18:20.716Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":null,"previewUrl":"https://splitscreencarousel.framer.website/","price":"15","paymentUrl":"https://buy.polar.sh/polar_cl_Pwb9EXkvNviSahgyE29mYrTBiR7oalHf6XRCm3PMQgd","workshop":true,"categories":[{"id":"8f93ccfe-423c-47f2-b8ae-79e9e132012f","name":"Carousels","slug":"carousels"}],"lastSaveId":"StDL21R99WxNY6PjvgSH"}}],"contests":[],"categories":[],"tags":[],"likes":{"count":7,"liked":false},"comments":{"count":4},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2026-07-12T01:18:20.985Z","updatedAt":"2026-07-12T01:18:20.985Z","reported":false}}],"$L5e"]

Suggested for you