VIBRATION API

The Navigator.vibrate() method pulses the vibration hardware on the device, if such hardware exists. If the device doesn't support vibration, this method has no effect. If a vibration pattern is already in progress when this method is called, the previous pattern is halted and the new one begins instead.

Try me!

CALL TO ACTION

Examples

Example below shows how to trigger vibration on button element by ID.

Example: Vibrate on click

Single vibration 300ms duration.


<script>
window.navigator = window.navigator || {};
document.getElementById('button-play-v-once').addEventListener('click', function() {
            navigator.vibrate(300);
          });
</script>

VIBRATING BUTTON

Example: Vibrate Pattern

SOS Vibration pattern.


<script>
window.navigator = window.navigator || {};
  document.getElementById('button-play-v-sos').addEventListener('click', function() {
            navigator.vibrate([1000, 500, 1000, 500, 2000]);
          });
          </script>

VIBRATE SOS PATTERN

Example: Stop Vibration

Stop the vibration.


<script>
window.navigator = window.navigator || {};
 document.getElementById('button-stop-v').addEventListener('click', function() {
            navigator.vibrate(0);
          });
          </script>

STOP VIBRATION

How to use it in Webflow?

Add the Javascript in your custom code settings and add the same ID to your "trigger-element" in webflow.

1) Copy & Paste JavaScript

Add the javascript code snippet before closing </body> tag in page settings or project settings.

 
<script>
window.navigator = window.navigator || {};
      window.navigator = window.navigator || {};   
        document.getElementById('replace-your-button-ID').addEventListener('click', function() {
            navigator.vibrate(100);
          });         
  </script>

2) Add element and set ID

You can use code in previous step to trigger vibration on click. Insert the ID used in JavaScript here.