Material Design Drop Animation

index.html

<div id="container">
  <h1>Click or Touch the Screen.</h1>
  <p>Click as fast as you can. <em>Try it on a touchscreen - it's even more fun.</em></p>
</div>

Material-Design-Drop-Animation.markdown

Material Design Drop Animation

A similar UI convention is found within Google's Material Design language; I just wanted to riff on that a bit. This doesn't use canvas.

A Pen by Jesse Couch on CodePen.

License.

script.js

// initial animation

$(window).ready(function(){
  setTimeout(function(){
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },900);
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },600);
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },300);
    setTimeout(function(){
      $('#container').append('<div class="dot" style="top:50%;left:50%;"></div>')
    },0);
    setTimeout(function(){
      $('#container .dot').remove();
    },2900);
  },1500);
});


// click animation

if (Modernizr.touch) {   
    $('#container').on('touchstart',function(e) {
      var left = e.originalEvent.touches[0].pageX;
      var top = e.originalEvent.touches[0].pageY;

      $(this).append('<div class="dot" style="top:'+top+'px;left:'+left+'px;"></div>')
      setTimeout(function(){
        $('#container .dot:first-of-type').remove();
      },3000);
    });
    document.body.addEventListener('touchmove',function(e){
        e.preventDefault();
    });
} else {   
    $('#container').on('mousedown',function(e) {
      var left = e.pageX;
      var top = e.pageY;

      $(this).append('<div class="dot" style="top:'+top+'px;left:'+left+'px;"></div>')
      setTimeout(function(){
        $('#container .dot:first-of-type').remove();
      },3000);
    }); 
}

style.scss

* {
  user-select: none;
  cursor:default;
}

body,html {
  height:100%;
  font-family:helvetica neue,helvetica,arial,sans-serif;
}

h1,p {
  text-align:center;
  position:relative;
  z-index:1;
}

h1 {
  padding:50px 0;
  margin:0 50px;
  font-size:30px;
  line-height:30px;
  font-weight:200;
}

p {
  font-size:14px;
  font-weight:200;
  margin:0 50px;
  color:#53646e;
  em {
    color:#42a6df;
  }
}

#container {
  position:relative;
  height:100%;
  width:100%;
  overflow:hidden;
  button {
    padding:20px;
    border:none;
    background:transparent;
    display:block;
    position:relative;
    z-index:3;
    margin:0 auto;
  }
}

.dot {
  height:2px;
  width:2px;
  border-radius:100%;
  position:absolute;
  z-index:0;
  animation:sploosh 3s cubic-bezier(0.165, 0.84, 0.44, 1);
  background:transparent;
}

@keyframes sploosh {
  0% {
    box-shadow:0 0 0 0px rgba(66,166,223,.7);
    background:rgba(66,166,223,.7);
  }
  100% {
    box-shadow:0 0 0 300px rgba(66,166,223,.0);
    background:rgba(66,166,223,.0);
  }
}