An unobtrusive animation effect for providing feedback to the user.

giveFeedback.js

// Licensed under a CC0 1.0 Universal (CC0 1.0) Public Domain Dedication
// http://creativecommons.org/publicdomain/zero/1.0/

/*
This function takes two arguments:
element: a reference to a DOM node in the document e.g. a button.
feedbackContent: a string of text or HTML.

An example of usage would be:
document.querySelector('button').addEventListener('click', function() {
  giveFeedback(this, 'Wheee!');
});
*/

function giveFeedback(element, feedbackContent) {
    var feedback = document.createElement('span');
    feedback.setAttribute('role', 'status');
    feedback.innerHTML = feedbackContent;
    document.querySelector('body').appendChild(feedback);
    var elementBox = element.getBoundingClientRect();
    var feedbackBox = feedback.getBoundingClientRect();
    var y = Math.round((elementBox.top + window.scrollY) - feedbackBox.height);
    var x = Math.round((elementBox.left + window.scrollX + (elementBox.width/2)) - (feedbackBox.width/2));
    feedback.style.position = 'absolute';
    feedback.style.left = x + 'px';
    feedback.style.top = y + 'px';
    feedback.style.opacity = 1;
    feedback.style.transition = 'transform 1s, opacity 1s';
    feedback.style.transform = 'translateY(-75px)';
    feedback.style.opacity = 0;
    feedback.addEventListener('transitionend', function () {
      if (feedback.parentNode) {
        feedback.parentNode.removeChild(feedback);
      }
    }, false);
}

Blog post: Unobtrusive feedback

Codepen demo