Added animateTransform for the cursor for smoother animation

bigbluebutton-html5/imports/ui/components/presentation/cursor/component.jsx

 import React, { Component, PropTypes } from 'react';
+import { findDOMNode } from 'react-dom';
 
 const propTypes = {
   //Width of the view box
@@ -43,35 +44,70 @@ const defaultProps = {
 export default class Cursor extends Component {
   constructor(props) {
     super(props);
+    this.state = {
+      cx: 0,
+      cy: 0,
+      finalRadius: 5,
+      fill: 'red',
+    }
+  }
+
+  componentWillMount() {
+    let calculatedData = this.calculatePositionAndRadius(this.props);
+    this.setState({
+      currentData: calculatedData,
+      prevData: calculatedData,
+    });
+  }
+
+  componentWillReceiveProps(nextProps) {
+    let calculatedData = this.calculatePositionAndRadius(nextProps);
+    this.setState({
+      prevData: this.state.currentData,
+      currentData: calculatedData,
+    });
+  }
+
+  componentDidUpdate() {
+    const { cursor } = this.refs;
+    var node = findDOMNode(cursor);
+    node.beginElement();
+  }
+
+  calculatePositionAndRadius(propsObj) {
+    return {
+      //Adjust the x,y cursor position according to zoom
+      cx: (propsObj.cursorX * propsObj.viewBoxWidth) + propsObj.viewBoxX,
+      cy: (propsObj.cursorY * propsObj.viewBoxHeight) + propsObj.viewBoxY,
+      //Adjust the radius of the cursor according to zoom
+      finalRadius: propsObj.radius * propsObj.widthRatio / 100,
+      fill: propsObj.fill,
+    }
   }
 
   render() {
     const {
-      viewBoxWidth,
-      viewBoxHeight,
-      viewBoxX,
-      viewBoxY,
-      widthRatio,
-      cursorX,
-      cursorY,
-      fill,
-      radius,
-    } = this.props;
-
-    //Adjust the x,y cursor position according to zoom
-    let cx = (cursorX * viewBoxWidth) + viewBoxX;
-    let cy = (cursorY * viewBoxHeight) + viewBoxY;
-
-    //Adjust the radius of the cursor according to zoom
-    let finalRadius = radius * widthRatio / 100;
+      currentData,
+      prevData
+    } = this.state;
 
     return (
       <circle
-        cx={cx}
-        cy={cy}
-        r={finalRadius}
-        fill={fill}
-      />
+        r={currentData.finalRadius}
+        fill={currentData.fill}
+      >
+        <animateTransform
+          ref="cursor"
+          attributeName="transform"
+          type="translate"
+          from={prevData.cx + " " + prevData.cy}
+          to={currentData.cx + " " + currentData.cy}
+          begin={'indefinite'}
+          dur="0.1s"
+          repeatCount="0"
+          fill="freeze"
+        />
+      </circle>
     );
   }
 }