25+ JavaScript Notifications - Free Code + Demos

Collection of 25+ JavaScript Notifications. All items are 100% free and open-source. The list also includes boxes javascript notifications.

1. Pulsing Notification

JavaScript Notifications - Pulsing Notification
Just what it looks like.
Author: Derek Wheelden (frxnz)
Created on: January 12, 2014
Made with: HTML, SCSS
Tags: css3, animation, keyframe, pulsing, notification

2. Notification Bell

JavaScript Notifications - Notification Bell
Design a notification component where an SVG icon is animated while a message is introduced from the side. Entry for the 16th weekly coding challenge.
Author: Gabriele Corti (borntofrappe)
Created on: July 11, 2019
Made with: HTML, CSS, JS
Tags: weeklycodingchallenge, notification, svg, bell

3. Notification-cards-animation

JavaScript Notifications - Notification-cards-animation
An experiment of animation with css and javascript which puts in scene notification cards that animate when a card is deleted or archived.
Author: VERDIEU Steeve (flatpixels)
Created on: April 24, 2019
Made with: HTML, CSS, JS
Tags: css-animation, ui-design, javascript vanilla, animation with javascript

4. Funky Notification With Shape Interaction

JavaScript Notifications - Funky Notification with shape interaction
Author: Ryan (ryanparag)
Created on: February 11, 2019
Made with: Pug, SCSS, Babel
CSS Pre-processor: SCSS
JS Pre-processor: Babel
HTML Pre-processor: Pug
Tags: svg, toggle, generate, night mode, dark mode

5. Pop Up Social Feed Notification

JavaScript Notifications - Pop up social feed notification
Author: Nooray Yemon (yemon)
Created on: July 3, 2018
Made with: HTML, CSS

6. Android Music Notification

JavaScript Notifications - Android Music Notification
The Android notification for music. Long press (hold mouse) to trigger animation.
Author: Cory L (TheVVaFFle)
Created on: May 1, 2018
Made with: Pug, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Pug
Tags: android, music, notification, effect, animated

7. Notification Bell

JavaScript Notifications - Notification bell
Author: Jonatan Sosa (jjonatansosa)
Created on: April 12, 2018
Made with: HTML, CSS, JS

8. Untitled

JavaScript Notifications - Untitled
Author: Mihai Veronica (Veronica-mihai)
Created on: January 29, 2019
Made with: HTML, JS

9. Stripe Notification Animation

JavaScript Notifications - Stripe Notification Animation
Author: ninja (shradhan)
Created on: December 8, 2017
Made with: HTML, SCSS, JS

10. Notyf

👻 A minimalistic, responsive, vanilla JavaScript library to show toast notifications.
Created on: August 31, 2016

11. Notie

🔔 a clean and simple notification, input, and selection suite for javascript, with no dependencies
Created on: November 5, 2015

12. Notification Bell

JavaScript Notifications - Notification Bell
Author: Ryan Morr (ryanmorr)
Created on: June 15, 2015
Made with: HTML, CSS, JS
Tags: notification, alert, bell

13. Noty

Dependency-free notification library that makes it easy to create alert - success - error - warning - information - confirmation messages as an alternative the standard alert dialog.
Created on: January 28, 2012

14. Pure JavaScript Notifications

JavaScript Notifications - Pure JavaScript Notifications
Simple JavaScript notification display, fading after some time.
Author: McSwampy (McSwampy)
Created on: January 17, 2020
Made with: HTML, Less, JS
Tags: javascript, notification, notifications, fade

15. Fancy Notifications

JavaScript Notifications - Fancy notifications
Just a simple and beautiful notification control.
Author: Mitsu (MitsuGM)
Created on: April 2, 2016
Made with: HTML, Less, JS
Tags: notifications

16. Cookie Notification Js

JavaScript Notifications - cookie notification js
Forked from StudioKlik's Pen cookie notification js.
Author: Ryan (Ryie)
Created on: July 13, 2018
Made with: HTML, CSS, JS

17. Simple Notifications Solution, Custom Out Animations

JavaScript Notifications - Simple Notifications Solution, custom out animations
Author: Paulina Hetman (pehaa)
Created on: August 25, 2018
Made with: HTML, CSS, JS

18. Notifs - Clean, Yet Beautiful Notifications In Your Website

JavaScript Notifications - Notifs - clean, yet beautiful notifications in your website
Pure html/css/js(ts) notifications plugin with clean design. Usage: copy short snippet in html, add css and ts(js) to your project. Choose between light/dark mode, notification content type. Set position where notification will spawn - right side, bottom right corner, whole screen. ...
Read More
Author: Vít Štefan (vitstefan)
Created on: June 29, 2020
Made with: HTML, CSS, TypeScript
Tags: notifications, clean-notifications, clean-design, pure-htmlcssjs

19. Sidebar Notification Layout

JavaScript Notifications - Sidebar notification layout
Responsive layout for a notification interface that can be toggled to a sidebar
Author: Eze (talentedunicorn)
Created on: February 24, 2020
Made with: HTML, SCSS, JS
Tags: css, notifications, layout, grid, sidebar

20. Simple Toast Notifications (With Vanillajs)

JavaScript Notifications - Simple Toast Notifications (With Vanillajs)
Author: Stanislav (Beaglefoot)
Created on: September 29, 2019
Made with: HTML, SCSS, JS
Tags: toast, notifications, toaster, vanillajs, reinventing the wheel

21. Notiflix - Notify

JavaScript Notifications - Notiflix - Notify
Author: Notiflix JS (notiflix)
Created on: February 28, 2019
Made with: HTML, CSS, JS
Tags: notification, notifications, javascript, library, notiflix

22. Thanks For Notifications

JavaScript Notifications - Thanks for notifications
Playing with making use of emojis in the interface and keyframes to achieve a slap motion effect. Some JS added for click event interactions and setting an emoji cursor.
Author: Piotr Galor (pgalor)
Created on: November 11, 2018
Made with: HTML, CSS, JS
Tags: ui, animation, notification, notifications, emoji

23. Notifs

JavaScript Notifications - notifs
Experimenting on fictional notifications
Author: Lucagez (lucagez)
Created on: November 6, 2018
Made with: HTML, CSS, JS
Tags: notifications, animation, notif

24. IOS 12 Dark Mode Notifications

JavaScript Notifications - iOS 12 Dark Mode Notifications
Author: Gabrielle Wee 🧧 (gabriellewee)
Made with: Haml, SCSS, JS
CSS Pre-processor: SCSS
JS Pre-processor: None
HTML Pre-processor: Haml