Avatar Animations

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:

1. Team Pages: Showcase project members with their names revealed on hover.

2. Messaging Apps: Display participants in a conversation.

3. Social Apps: Show friend groups, followers, or connections.

4. Project Collaboration: Indicate team members working on specific projects, tasks, or shared documents.

5. Social Proof Element: Display customer testimonials, user reviews, or satisfied clients to build trust and credibility.