---
title: "Avatar Animations — Free Framer component · Best of Framer"
description: "Free Framer component · by Kehinde Clement · Text. Avatar Group Animations The Editable Avatar Group Animations i s an advanced, highly customizable avatar group component designed…"
canonical: "https://framer.elliotli.dev/component/avatar-animations"
---

[Home](/)/[Components](/components)/[Text](/components/category/text)/Avatar Animations

# Avatar Animations

[View on Framer](https://framer.com/marketplace/components/avatar-animations/?via=elliot-li)

![Avatar Animations preview image 1](https://framer.elliotli.dev/og/component/avatar-animations/e17f3c52e9297b55/1600x1200.jpg)

## Summary

Avatar Group Animations The Editable Avatar Group Animations i s an advanced, highly customizable avatar group component designed to display multiple user avatars in an elegant…

## Description

## Avatar Group Animations

The **Editable Avatar Group Animations i**s 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)
    

![](https://y4pdgnepgswqffpt.public.blob.vercel-storage.com/components/description-image-mihi2kfi-ny0j1qULC37DBMTEwhNUGbakrLOLQX)

**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.
    

## Rank history [How rankings work →](/terms#rankings)

-   All · #1536

## Details

- **Author**: Kehinde Clement
- **Published**: 2025-09-23
- **Updated**: 2025-09-23
- **Added**: 2025-08-27
- **Categories**: Text

## More like this

-   [Hover Stretch Text](/component/hover-stretch-text) — 584.studio · $3 — Responsive & fully customizable
-   [Type Write Effect](/component/type-write-effect) — Russet Supply · Free — Animated Text & Interactive Typing
-   [Odometer Stats](/component/odometer-stats) — Pixlify · Free — Rolling number counters
-   [Clipped Words](/component/clipped-words) — Interface Studio · $5 — Words With a Little Chaos