From d6b86598e540859dd57c5592fad1b623bd7bce3f Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Mon, 16 Nov 2015 16:13:21 +0000
Subject: [PATCH] Bouncy bouncy!

---
 src/Velociraptor.js                           |  8 ++++----
 src/VelocityBounce.js                         | 15 +++++++++++++++
 src/skins/vector/views/molecules/EventTile.js | 19 +++++++++++++------
 3 files changed, 32 insertions(+), 10 deletions(-)
 create mode 100644 src/VelocityBounce.js

diff --git a/src/Velociraptor.js b/src/Velociraptor.js
index 029dcf8d..81ecd9e5 100644
--- a/src/Velociraptor.js
+++ b/src/Velociraptor.js
@@ -38,7 +38,7 @@ module.exports = React.createClass({
 
                 if (oldNode.style.left != c.props.style.left) {
                     Velocity(oldNode, { left: c.props.style.left }, self.props.transition);
-                    console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
+                    //console.log("translation: "+oldNode.style.left+" -> "+c.props.style.left);
                 }
                 self.children[c.key] = old;
             } else {
@@ -54,7 +54,7 @@ module.exports = React.createClass({
                     }
                     newProps._restingStyle = c.props.style;
                     newProps.style = startStyle;
-                    console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
+                    //console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
                     // apply the enter animations once it's mounted
                 }
                 self.children[c.key] = React.cloneElement(c, newProps);
@@ -79,11 +79,11 @@ module.exports = React.createClass({
             // to start with, so now we animate 1 etc.
             for (var i = 1; i < startStyles.length; ++i) {
                 Velocity(domNode, startStyles[i], transitionOpts[i-1]);
-                console.log("start: "+JSON.stringify(startStyles[i]));
+                //console.log("start: "+JSON.stringify(startStyles[i]));
             }
             // and then we animate to the resting state
             Velocity(domNode, node.props._restingStyle, transitionOpts[i-1]);
-            console.log("enter: "+JSON.stringify(node.props._restingStyle));
+            //console.log("enter: "+JSON.stringify(node.props._restingStyle));
         }
         this.nodes[k] = node;
     },
diff --git a/src/VelocityBounce.js b/src/VelocityBounce.js
new file mode 100644
index 00000000..c85aa254
--- /dev/null
+++ b/src/VelocityBounce.js
@@ -0,0 +1,15 @@
+var Velocity = require('velocity-animate');
+
+// courtesy of https://github.com/julianshapiro/velocity/issues/283
+// We only use easeOutBounce (easeInBounce is just sort of nonsensical)
+function bounce( p ) {
+    var pow2,
+        bounce = 4;
+
+    while ( p < ( ( pow2 = Math.pow( 2, --bounce ) ) - 1 ) / 11 ) {}
+    return 1 / Math.pow( 4, 3 - bounce ) - 7.5625 * Math.pow( ( pow2 * 3 - 2 ) / 22 - p, 2 );
+}
+
+Velocity.Easings.easeOutBounce = function(p) {
+    return 1 - bounce(1 - p);
+}
diff --git a/src/skins/vector/views/molecules/EventTile.js b/src/skins/vector/views/molecules/EventTile.js
index 4a0879f1..0a97d3ce 100644
--- a/src/skins/vector/views/molecules/EventTile.js
+++ b/src/skins/vector/views/molecules/EventTile.js
@@ -29,6 +29,7 @@ var ContextualMenu = require('../../../../ContextualMenu');
 var TextForEvent = require('matrix-react-sdk/lib/TextForEvent');
 
 var Velociraptor = require('../../../../Velociraptor');
+require('../../../../VelocityBounce');
 
 var eventTileTypes = {
     'm.room.message': 'molecules.MessageTile',
@@ -100,9 +101,9 @@ module.exports = React.createClass({
 
         var left = 0;
 
-        var transitionOpts = {
-            duration: 1000,
-            easing: 'linear'
+        var reorderTransitionOpts = {
+            duration: 100,
+            easing: 'easeOut'
         };
 
         for (var i = 0; i < receipts.length; ++i) {
@@ -122,13 +123,19 @@ module.exports = React.createClass({
                     var leftOffset = oldAvatarDomNode.style.left;
                     // start at the old height and in the old h pos
                     startStyles.push({ top: topOffset, left: leftOffset });
-                    enterTransitionOpts.push(transitionOpts);
+                    enterTransitionOpts.push(reorderTransitionOpts);
                 }
 
                 // then shift to the rightmost column,
                 // and then it will drop down to its resting position
                 startStyles.push({ top: topOffset, left: '0px' });
-                enterTransitionOpts.push(transitionOpts);
+                console.log(topOffset+': '+Math.min(Math.log(Math.abs(topOffset)) * 200, 3000));
+                enterTransitionOpts.push({
+                    // Sort of make it take a bit longer to fall in a way
+                    // that would make my A level physics teacher cry.
+                    duration: Math.min(Math.log(Math.abs(topOffset)) * 200, 3000),
+                    easing: 'easeOutBounce'
+                });
             }
 
             // add to the start so the most recent is on the end (ie. ends up rightmost)
@@ -154,7 +161,7 @@ module.exports = React.createClass({
 
         return <span className="mx_EventTile_readAvatars" ref={this.collectReadAvatarNode}>
             {remText}
-            <Velociraptor transition={transitionOpts}>
+            <Velociraptor transition={reorderTransitionOpts}>
                 {avatars}
             </Velociraptor>
         </span>;