LIVE NOW

Visual Configurator is now active — Customize 50+ professional animations Visual Configurator is live!

Get Started
Avatar Circles Configurator

How to Use in Bricks Builder

  1. Customize your avatar circles effect using the controls below
  2. Click the Get Code button and copy the JavaScript
  3. In Bricks Builder, add a Code element and paste the JavaScript
  4. Add the attribute
    data-avatar-circles📋
    to any container element
This tool creates a custom script with your settings built-in. You only need to add the data attribute to implement your avatar circles effect!
BricksFusion Exclusive Get Your Avatar Circles Effect

Add an elegant overlapping avatar circles effect to your website with this custom-crafted JavaScript snippet.

  • Easy implementation with simple data attributes
  • Interactive hover animations
  • Fully responsive and mobile-friendly
  • Customizable number of avatars and extra counter
Avatar Settings
Extra People Count
Number of Extra People 0
Extra People URL (Optional)
Counter Style

Standard circular counter that matches avatar sizing

Automatically expands width based on number size

Rounded rectangle that accommodates larger numbers

Separate badge with emphasized appearance

Abbreviate Large Numbers
Format numbers like "1.2k" instead of "1200"
Style Settings
Avatar Size 40px
Border Width 2px
Border Color
Extra Count Background
Extra Count Hover
Extra Count Text Color
Overlap Distance 16px
Animation Settings
Animation Type

No animations applied

Avatars appear one after another when in viewport

Subtle pulsing animation to maintain visual interest

Avatars periodically glow to highlight

Animation Speed 500ms
Enable Animation on Scroll
Trigger animations when scrolling into view

JavaScript Code