Do read receipt avatars with absolute positioning: this should be a lot easier to animate. Also mess around with the MemberAvatar a bit so it's easier to style.

src/skins/vector/css/atoms/MemberAvatar.css

@@ -14,7 +14,7 @@ See the License for the specific language governing permissions and
 limitations under the License.
 */
 
-.mx_MemberAvatar {
+.mx_MemberAvatar_image {
     z-index: 20;
     border-radius: 20px;
 }
@@ -25,6 +25,6 @@ limitations under the License.
     text-align: center;
 }
 
-.mx_MemberAvatar_wrapper {
+.mx_MemberAvatar {
     position: relative;
-}
+}

src/skins/vector/css/molecules/EventTile.css

@@ -130,15 +130,19 @@ limitations under the License.
 }
 
 .mx_EventTile_readAvatars {
+    position: relative;
+    display: inline-block;
+    width: 14px;
+    height: 14px;
 }
 
 .mx_EventTile_readAvatars .mx_MemberAvatar {
-    margin-left: 1px;
+    position: absolute;
-    margin-right: 1px;
+    display: inline-block;
-    vertical-align: middle;
 }
 
 .mx_EventTile_readAvatarRemainder {
     color: #acacac;
     font-size: 12px;
+    position: absolute;
 }

src/skins/vector/views/atoms/MemberAvatar.js

@@ -49,20 +49,22 @@ module.exports = React.createClass({
                 initial = this.props.member.name[1].toUpperCase();
          
             return (
-                <span className="mx_MemberAvatar_wrapper">
+                <span className="mx_MemberAvatar" style={this.props.style}>
                     <span className="mx_MemberAvatar_initial"
                           style={{ fontSize: (this.props.width * 0.75) + "px",
                                    width: this.props.width + "px",
                                    lineHeight: this.props.height*1.2 + "px" }}>{ initial }</span>
-                    <img className="mx_MemberAvatar" src={this.state.imageUrl}
+                    <img className="mx_MemberAvatar_image" src={this.state.imageUrl}
                          onError={this.onError} width={this.props.width} height={this.props.height} />
                 </span>
             );            
         }
         return (
-            <img className="mx_MemberAvatar" src={this.state.imageUrl}
+            <img className="mx_MemberAvatar mx_MemberAvatar_image" src={this.state.imageUrl}
                 onError={this.onError}
-                width={this.props.width} height={this.props.height} />
+                width={this.props.width} height={this.props.height}
+                style={this.props.style}
+            />
         );
     }
 });

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

@@ -91,24 +91,32 @@ module.exports = React.createClass({
 
         var MemberAvatar = sdk.getComponent('atoms.MemberAvatar');
 
+        var left = 0;
+
         for (var i = 0; i < receipts.length; ++i) {
             var member = room.getMember(receipts[i].userId);
             // add to the start so the most recent is on the end (ie. ends up rightmost)
             avatars.unshift(
-                <MemberAvatar key={member.userId} member={member} width={14} height={14} resizeMethod="crop" />
+                <MemberAvatar key={member.userId} member={member}
+                    width={14} height={14} resizeMethod="crop"
+                    style={ {left: left} }
+                />
             );
+            left -= 15;
             if (i + 1 >= MAX_READ_AVATARS) {
                 break;
             }
         }
         var remainder = receipts.length - MAX_READ_AVATARS;
+        var remText;
         if (remainder > 0) {
-            avatars.unshift(
+            remText = <span className="mx_EventTile_readAvatarRemainder" style={ {left: left} }>+{ remainder }</span>;
-                <span className="mx_EventTile_readAvatarRemainder">+{ remainder }</span>
-            );
         }
 
-        return <span className="mx_EventTile_readAvatars">{ avatars }</span>;
+        return <span className="mx_EventTile_readAvatars">
+            {remText}
+            {avatars}
+        </span>;
     },
 
     render: function() {