Avatar Animations

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…

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