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.
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
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
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.
Kehinde Clement
