Hopefully now mostly complete animations: we iterate through zero or more start states and then settle on the final place.

src/Velociraptor.js

@@ -38,10 +38,26 @@ 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);
                 }
                 self.children[c.key] = old;
             } else {
-                self.children[c.key] = c;
+                // new element. If it has a startStyle, use that as the style and go through
+                // the enter animations
+                var newProps = {
+                    ref: self.collectNode.bind(self, c.key)
+                };
+                if (c.props.startStyle && Object.keys(c.props.startStyle).length) {
+                    var startStyle = c.props.startStyle;
+                    if (Array.isArray(startStyle)) {
+                        startStyle = startStyle[0];
+                    }
+                    newProps._restingStyle = c.props.style;
+                    newProps.style = startStyle;
+                    console.log("mounted@startstyle0: "+JSON.stringify(startStyle));
+                    // apply the enter animations once it's mounted
+                }
+                self.children[c.key] = React.cloneElement(c, newProps);
             }
         });
     },
@@ -49,20 +65,25 @@ module.exports = React.createClass({
     collectNode: function(k, node) {
         if (
             this.nodes[k] === undefined &&
-            node.props.enterTransition &&
+            node.props.startStyle &&
-            Object.keys(node.props.enterTransition).length
+            Object.keys(node.props.startStyle).length
         ) {
             var domNode = ReactDom.findDOMNode(node);
-            var transitions = node.props.enterTransition;
+            var startStyles = node.props.startStyle;
             var transitionOpts = node.props.enterTransitionOpts;
-            if (!Array.isArray(transitions)) {
+            if (!Array.isArray(startStyles)) {
-                transitions = [ transitions ];
+                startStyles = [ startStyles ];
                 transitionOpts = [ transitionOpts ];
             }
-            for (var i = 0; i < transitions.length; ++i) {
+            // start from startStyle 1: 0 is the one we gave it
-                Velocity(domNode, transitions[i], transitionOpts[i]);
+            // to start with, so now we animate 1 etc.
-                console.log("enter: "+JSON.stringify(transitions[i]));
+            for (var i = 1; i < startStyles.length; ++i) {
+                Velocity(domNode, startStyles[i], transitionOpts[i-1]);
+                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));
         }
         this.nodes[k] = node;
     },

src/controllers/organisms/RoomView.js

@@ -671,7 +671,7 @@ module.exports = {
             }
 
             var node = this.eventNodes[ev.getId()];
-            if (node === undefined) continue;
+            if (!node) continue;
 
             var domNode = node.getDOMNode();
             var boundingRect = domNode.getBoundingClientRect();

src/skins/vector/views/molecules/EventTile.js

@@ -112,19 +112,22 @@ module.exports = React.createClass({
             // them and making them scoped to the whole RoomView. Not impossible, but
             // getElementById seems simpler at least for a first cut.
             var oldAvatarDomNode = document.getElementById('mx_readAvatar'+member.userId);
-            var startStyle = { left: left+'px' };
+            var startStyles = [];
-            var enterTransitions = [];
             var enterTransitionOpts = [];
             if (oldAvatarDomNode && this.readAvatarRect) {
                 var oldRect = oldAvatarDomNode.getBoundingClientRect();
-                startStyle.top = oldRect.top - this.readAvatarRect.top;
+                var topOffset = oldRect.top - this.readAvatarRect.top;
 
                 if (oldAvatarDomNode.style.left !== '0px') {
-                    startStyle.left = oldAvatarDomNode.style.left;
+                    var leftOffset = oldAvatarDomNode.style.left;
-                    enterTransitions.push({ left: left+'px' });
+                    // start at the old height and in the old h pos
+                    startStyles.push({ top: topOffset, left: leftOffset });
                     enterTransitionOpts.push(transitionOpts);
                 }
-                enterTransitions.push({ top: '0px' });
+
+                // 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);
             }
 
@@ -132,8 +135,8 @@ module.exports = React.createClass({
             avatars.unshift(
                 <MemberAvatar key={member.userId} member={member}
                     width={14} height={14} resizeMethod="crop"
-                    style={startStyle}
+                    style={ { left: left+'px', top: '0px' } }
-                    enterTransition={enterTransitions}
+                    startStyle={startStyles}
                     enterTransitionOpts={enterTransitionOpts}
                     id={'mx_readAvatar'+member.userId}
                 />