Is there a way to disable the <AvatarGroup/> hover animations?

[martinreddy]

The <AvatarGroup/> component is great. However, one thing I'd like to change is the behavior where it animates the individual avatars when you hover over them. That is:

avatargroup.mov

I prefer to just use a <Tooltip/> to show the full list of user names and not have the avatars move around. Is there a way that I can disabled the builtin hover animation for <AvatarGroup/> to stop the avatars from moving when the user moves their mouse over them?

(As some feedback, if the intent of this animation is to be able to fully see an avatar that's behind another one, I'd suggest that the top most avatar should not be animated as it's already fully visible. This would also cover the case where right now if you only have one avatar, it is also animated when you hover over it. I'd be happy to report a feature request or bug for this if that would be useful.)

[wingkwong]

@martinreddy you can set data-[hover=true]:translate-x-0 in avatar base.

Example:

<AvatarGroup>
  <Avatar
    classNames={{
      base: "data-[hover=true]:translate-x-0",
    }}
    src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
  />
  <Avatar
    classNames={{
      base: "data-[hover=true]:translate-x-0",
    }}
    src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
  />
  <Avatar
    classNames={{
      base: "data-[hover=true]:translate-x-0",
    }}
    src="https://i.pravatar.cc/150?u=a042581f4e29026024d"
  />
</AvatarGroup>

[martinreddy]

That works great! Thanks, @wingkwong.