Swinging Bell Notification Icon

Create an animated notification bell with Tailwind

Using an SVG Bell icon and custom tailwind class, we can make a bell symbol that swings to draw the user's attention.

Create the Icon

Not a requirement for this example (you could in-line the SVG) but here I have downloaded one of the Heroicons from https://heroicons.dev/ and made it into a Laravel 7 component.

views/components/svg/bell.blade.php

<svg fill="none" viewBox="0 0 24 24" stroke="currentColor" {{ $attributes->merge(['class'=>'inline-block']) }}>
    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
        d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9">
    </path>
</svg>

This uses most of the code copied from the heroicons site, but with the addition of merging any passed attributes.

Create the blade content for the bell

@if($notifications->count() > 0)
    <span class="text-base tracking-tighter text-yellow-500">
        <x-svg.bell class="h-5 -mr-1 align-text-top animate-swing origin-top"/>
        <sup>{{ $notifications->count() }}</sup>
    </span>
@endif

Create Tailwind Extension

In the code above, you will see a new class; animate-swingwe add this using the tailwind.config.js file

extend: {
      keyframes: {
        'swing': {
          '0%,100%' : { transform: 'rotate(15deg)' },
          '50%' : { transform: 'rotate(-15deg)' },
        }
      },
      animation: {
        'swing': 'swing 1s infinite'
      }
    }

The bell is rotated around a point that is in the centre top of the icon, starting at 15 degrees through 0 degrees to -15 degrees and back again over a 1 second duration.