Have you ever wanted to make your phone vibrate right from a website using JavaScript?
In this complete guide, you'll learn how to leverage the new HTML Vibration API to create immersive web experiences by adding vibration effects with just a few lines of JavaScript code.
Before implementing vibration effects, it's important to ensure your overall website SEO is optimized. Consider getting a professional SEO Audit to identify any critical issues.
Why Use the Vibration API on Websites?
Vibration effects can provide tactile feedback to enhance UX for mobile users. When used sparingly, vibrations can make web elements feel more interactive without being annoying or overused.
Some great uses cases:
Provide haptic feedback on button clicks
Notifications and alerts
Fun effects paired with music or themes
With careful design, vibrations can significantly improve the UX on mobile sites and apps. ✨
Let's take a quick look at how it works:
// Vibrate for 1 secondnavigator.vibrate(1000);
In this complete guide you'll learn:
Browser Support - Which browsers and devices support the Vibration API
Code Examples - Useful snippets, libraries and plugins
So if you want to make your web projects vibrate, buzz, shake, and rattle - let's get started!
While vibration effects can enhance UX, they should be part of a broader SEO strategy. SEO Audit offers comprehensive audits to help improve your overall search rankings and visibility
Vibration API Browser Support
The Vibration API is supported in most modern browsers, but there are some exceptions:
Device/Browser
Support
iOS Safari
❌ No
Opera Mini
❌ No
IE
❌ No
Android Browser
✅ Since Android 4.4
Chrome
✅ Yes!
Firefox
✅ Yes!
Your Browser
The vibration API is implemented in navigator.vibrate. So calling the function makes your phone vibrate. You can test if your browser is recent enough to have the vibrate function in navigator. To check for support in JavaScript:
if ("vibrate" in navigator) { // vibration supported!}
There are some key limitations:
Requires actual vibration hardware in the device
Page needs to be visible - doesn't work in background tabs
Some browsers limit excessive vibration
Now let's look at how to actually trigger vibrations!
Usage of navigator.vibrate
The navigator.vibrate function either accepts a number or an array of numbers.
In the following example the device will vibrate for 1000 milliseconds (ms):
// device will vibrate wait vibratenavigator.vibrate([1000, 500, 1000])
Any new call stops the previous vibration sequence. If the page is no longer visible, like locking the device, minimizing the window, moving to another tab then the vibration also stops.
We can keep vibrating until the user stops touching the device. The vibration stops after a while though. But it's not meant to be pressed infinitely anyway.
In this example the device will keep vibrating until the touch event has stopped
var isMobile = /iPhone|iPod|iPad|Android|BlackBerry/.test(navigator.userAgent)$('.button').on(isMobile ? 'touchstart' : 'mousedown', function (e) { navigator.vibrate(Infinity) // Infinity is a number})$('.button').on(isMobile ? 'touchend' : 'mouseup', function (e) { navigator.vibrate(0)})
Vibrate on click
The best use case I can imagine for this API is for buttons. You get a little haptic feedback like you get for native apps. This can be done by setting the vibration to a very low number. For me 50ms seems ideal.
In this example all buttons and links on this page vibrate on tap. We also detect if the device is mobile and use touchend.
Vibrating after clicking a sliding checkbox is also very helpful. It feels really natural. There is a short vibration at the start, then a period of waiting whilst the checkbox is moving and then a longer vibration at the end.
If you're not sure how long the haptic feedback should be. You can experiment with various timespans. Try all of these buttons out a mobile device. Anything above 100ms seems to long for me.
In this example the following buttons vibrate each on a different timespan.
Another great use case are for notifications. These can be a bit longer than haptic feedback. Patterns can also be used to differentiate.
Please be aware of the vibration notification on the phone and try not to replicate them as to not to confuse the user. Some visual feedback together with the vibration would be ideal.
Click the buttons below. When the progress bar reaches the end. You get a notification! Each button is a different vibration pattern.
// Vibrate on completion
var pattern = [500, 100, 500];
$(".progress .bar")
.css({width: "0%"})
.animate({width: "100%"}, {
duration: 1000,
complete: function() {
if (canVibrate) navigator.vibrate(pattern);
}
});
Vibration with Song Patterns
Groggie mentioned his blog post on using the Vibration API for music and theme songs. It's a really cool example of what can be done using the Vibration API and some creative thought. Click on the titles below to play.
I used to write my own Vibration API code in Vue.js, but with the hooks being introduced into Vue 3,
I started using a hook called useVibrate from @vueuse/core.
import { useVibrate } from '@vueuse/core'// Vibrate the device for 300 ms, wait 100 ms, vibrate for 300 msconst pattern = [300, 100, 300]const { vibrate, stop, isSupported } = useVibrate({ pattern })vibrate() // will stop after the pattern is finishedstop() // stop vibration immediately
Next.js and React vibration
In Next.js and React, you can use the Web Vibration API directly in functional components. Here's an example of how you can create a custom hook to handle vibrations:
"use client"import { useCallback } from 'react';export function useVibration(pattern) { const vibrate = useCallback(() => { if ('vibrate' in navigator) { navigator.vibrate(pattern); } }, [pattern]); return vibrate;}
You can then use this hook in your components to trigger vibrations based on user interactions or other events.
Otherwise, here's an example of how you can create a button that vibrates when clicked:
'use client'// Only possible in the browser and Client componentsfunction VibrateButton({ pattern }) { const handleClick = () => { if ('vibrate' in navigator) { navigator.vibrate(pattern); } }; return ( <button onClick={handleClick}> Click to Vibrate </button> );}// Use the VibrateButton component in your app<VibrateButton pattern={[300, 100, 300]} />
jQuery.vibrate.js
If doing it manually seems difficult for you, I've written a jquery plugin that can get you started right away.
Download and embed the code then initialize in one of the following ways:
// Vibration for 50ms on all .button on click$('.button').vibrate()// Vibrate for 20ms on click$('.button').vibrate('short')// Vibrate for 50ms on click$('.button').vibrate('medium')$('.button').vibrate('default')$('.button').vibrate(50)// Vibrate for 100ms on click$('.button').vibrate('long')// Vibrate for 1000ms on touchstart. Stop vibrating on touchend.$('.button').vibrate({ duration: 1000, trigger: 'touchstart',})
For those exploring creative uses of web technologies, you might also be interested in my guide to the best AI presentation makers for crafting engaging visuals, or for a look at the more unconventional side of AI, check out my post on AI girlfriends and NSFW chatbots.
Interested in more Javascript and CSS articles? Check out our article on CSS Text
Gradients.
Optimized for Mobile
For optimal experience, view this article on a mobile device and test the examples. Visit il.ly/vibrate on your phone.
