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:T1120,

Avatar Group Animations

The Editable Avatar Group Animations is an advanced, highly customizable avatar group component designed to display multiple user avatars in an elegant overlapping layout with smooth animations and interactive tooltips that pop.

How to Use

Basic Setup

Add the Avatar Group component to your Framer canvas
Edit the number of Avatars (supports up to 10 avatars)
Customize the avatars in the component properties panel

Adding Custom Avatars

Image: Upload an image for profile pictures
Fallback Text: Set initials or short text (e.g., "JD", "AB") for when images don't load
Name/Tooltip: Add the person's name that appears on hover

Styling Options

Avatar Appearance

Avatar Size: Adjust from 24px to 120px
Overlap: Control how much avatars overlap (0-40px)
Border Width: Set border thickness (0-8px)
Border Color: Choose border color (great for brand consistency)

Typography

Font Controls: Full typography control, including font family, weight, size, and spacing

Animation Settings

Hover Effects

Scale: Simple scale up on hover
Lift: Combines upward movement with scaling
Rotate: Adds subtle rotation with scaling
Up: Pure vertical lift without scaling

Timing Controls

Hover Scale: How much to scale on hover (1.0-1.5x)
Animation Duration: Overall animation timing (0.1-2s)
Bounce Damping: Controls the bounciness of spring animations (lower values = more bounce)

Use Cases for This Component Include:

Team Pages: Showcase project members with their names revealed on hover.
Messaging Apps: Display participants in a conversation.
Social Apps: Show friend groups, followers, or connections.
Project Collaboration: Indicate team members working on specific projects, tasks, or shared documents.
Social Proof Element: Display customer testimonials, user reviews, or satisfied clients to build trust and credibility.

5a:[["$","$L5d",null,{"post":{"id":"0199787f-a5b6-70da-858c-f22fc1b494d0","title":null,"body":null,"bodyJson":null,"author":{"framerUserId":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","slug":"kehinde-clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","badges":["expert"],"followed":false,"followsYou":false},"media":[],"resources":[{"id":"ljv5cLjeDlaPLlwRyodC","resolved":true,"title":"Avatar Animations","body":"$5e","bodyJson":null,"introduction":"","slug":"avatar-animations","author":{"framerUserId":"8f32da37-7ae3-4ab5-9077-ad58e83754a6","name":"Kehinde Clement","slug":"kehinde-clement","avatar":"https://framerusercontent.com/avatars/users/8f32da37-7ae3-4ab5-9077-ad58e83754a6/eu4YVhXm3","badges":["expert"],"followed":false,"followsYou":false},"media":[{"type":"image","url":"https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/ljv5cLjeDlaPLlwRyodC/avatar-animations-K6W71Ey9C4eWSMwu9y2X4LeKkpZpSh","metadata":{"tint":{"h":0,"s":0,"l":57},"width":1600,"height":1200}}],"post":null,"createdAt":"2025-08-27T09:12:45.991Z","updatedAt":"2025-09-23T21:33:16.253Z","publishedAt":"2025-09-23T21:34:15.478Z","featuredAt":null,"approvedAt":null,"type":"component","attributes":{"url":"https://re.chujiqiqi.com/m/AvatarGroupEditable-1-j5wT.js@fDPIj5tp7EoQ5FrmI7KK","previewUrl":"https://animatedavatars.framer.website/","price":null,"paymentUrl":null,"workshop":true,"categories":[{"id":"7fe42fdd-1b16-4f5a-93b8-009488614de8","name":"Text","slug":"text"}],"lastSaveId":"fDPIj5tp7EoQ5FrmI7KK","tags":[]}}],"contests":[],"categories":[],"tags":[],"likes":{"count":26,"liked":false},"comments":{"count":0},"reposts":{"count":0,"reposted":false,"repostId":null},"version":1,"edited":false,"editedAt":null,"createdAt":"2025-09-23T21:34:15.478Z","updatedAt":"2025-09-23T21:34:15.478Z","reported":false}}],"$L5f"]

Suggested for you