Merge branch 'animation' of https://github.com/algolia/docsearch into develop

# Conflicts:
#	docs/css/_home.scss
#	docs/index.haml

docs/css/_home.scss

@@ -272,3 +272,48 @@ footer.site-footer {
   width: 319px;
   height: 180px;
 }
+
+
+.ripple {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  border-radius: 100px;
+  border: 1px solid #888;
+  -webkit-animation: anim-ripple 1.8s ease-out infinite forwards;
+  animation: anim-ripple 1.8s ease-out infinite forwards;
+  top: 0;
+  left: 50%;
+}
+
+@-webkit-keyframes anim-ripple {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+    transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform:translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+    transform:translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+  }
+}
+
+@keyframes anim-ripple {
+  0% {
+    opacity: 0;
+    -webkit-transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+    transform: translate3D(-50%, 10px, 0) scale3d(3, 3, 1);
+  }
+  50% {
+    opacity: 0.4;
+  }
+  100% {
+    opacity: 0;
+    -webkit-transform: translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+    transform: translate3D(-50%, 10px, 0) scale3d(1, 1, 1);
+  }
+}

docs/index.haml

@@ -12,10 +12,9 @@ layout: default
       %div.index-container
         %svg.index
           = File.read('img/illus-index.svg')
-      .spacer30
-      .text-center
-        %p We’ve created the fastest, easiest way to search within documentation.
-        %p
 And best of all? It’s FREE.
+        %div.ripple
+      %p We’ve created the fastest, easiest way to search within documentation.
+      %p
 And best of all? It’s FREE.
     %form#join-form{action: '#', method: 'POST'}
       %h3 Get Started. It’s FREE!
       .spacer20

docs/js/animation.js

@@ -1,15 +1,17 @@
 document.addEventListener("DOMContentLoaded", function(){
   var box = getIndexDomPosition();
 
-  var center = [box[0] , box[1] + 30];
+  var center = [box[0], box[1] + 40];
 
   var particles = [];
   for(var i=0; i<10; i++) {
     setTimeout(function(){
       var p = genParticle(center);
       particles.push(p);
-    }, i * 300);
+    }, i * 600);
   }
+  
+  var ripples = [];
 
   window.requestAnimationFrame(function loop(){
     window.requestAnimationFrame(loop);
@@ -59,6 +61,7 @@ document.addEventListener("DOMContentLoaded", function(){
     e.style.left = center[0] + 'px';
 
     p.pos = [x + center[0], y + center[1]];
+    p.originPos = [x + center[0], y + center[1]];
     p.v = [0, 0];
     p.r = r;
   }
@@ -70,7 +73,7 @@ document.addEventListener("DOMContentLoaded", function(){
 
     var pos = [p.pos[0] - 18, p.pos[1] - 23];
     p.e.style.transform = 'translate(' + pos[0] + 'px, ' + pos[1] + 'px) rotate('+ p.r + 'deg)';
-    p.e.style.opacity = 1 - Math.pow( 2 * toCenter - 1 , 10);
+    p.e.style.opacity = 1 - Math.max(0, Math.sqrt(Math.pow(4 * toCenter - 2, 2)) - 1) 
     p.e.className = 'doc-page';
   }
 
@@ -89,7 +92,7 @@ document.addEventListener("DOMContentLoaded", function(){
   }
 
   function getIndexDomPosition() {
-    var position = jQuery('#index')[0].getBBox();
+    var position = document.querySelector('#index').getBBox();
     return [position.x , position.y ];
   }
 });