Reimplemented scrollsync animation

public/res/extensions/scrollSync.js

@@ -91,7 +91,6 @@ define([
     var isScrollPreview = false;
     var isEditorMoving = false;
     var isPreviewMoving = false;
-    var scrollingHelper = $('<div>');
     function getDestScrollTop(srcScrollTop, srcSectionList, destSectionList) {
         // Find the section corresponding to the offset
         var sectionIndex;
@@ -108,6 +107,34 @@ define([
         return destSection.startOffset + destSection.height * posInSection;
     }
 
+    var timeoutId;
+    var currentEndCb;
+    function animate(elt, startValue, endValue, stepCb, endCb) {
+        if(currentEndCb) {
+            clearTimeout(timeoutId);
+            currentEndCb();
+        }
+        currentEndCb = endCb;
+        var diff = endValue - startValue;
+        var startTime = Date.now();
+        function tick() {
+            var currentTime = Date.now();
+            var progress = (currentTime - startTime) / 200;
+            if(progress < 1) {
+                var scrollTop = startValue + diff * Math.cos((1 - progress) * Math.PI / 2 );
+                elt.scrollTop = scrollTop;
+                stepCb(scrollTop);
+                timeoutId = setTimeout(tick, 1);
+            }
+            else {
+                currentEndCb = undefined;
+                elt.scrollTop = endValue;
+                endCb();
+            }
+        }
+        tick();
+    }
+
     var doScrollSync = _.throttle(function() {
         if(!isPreviewVisible || mdSectionList.length === 0 || mdSectionList.length !== htmlSectionList.length) {
             return;
@@ -134,24 +161,12 @@ define([
                 lastPreviewScrollTop = previewScrollTop;
                 return;
             }
-            scrollingHelper.stop('scrollSyncFx', true).css('value', 0).animate({
+            animate($previewElt[0], previewScrollTop, destScrollTop, function(currentScrollTop) {
-                value: destScrollTop - previewScrollTop
+                isPreviewMoving = true;
-            }, {
+                lastPreviewScrollTop = currentScrollTop;
-                easing: 'easeOutSine',
+            }, function() {
-                duration: 200,
+                isPreviewMoving = false;
-                queue: 'scrollSyncFx',
+            });
-                step: function(now) {
-                    isPreviewMoving = true;
-                    lastPreviewScrollTop = previewScrollTop + now;
-                    $previewElt.scrollTop(lastPreviewScrollTop);
-                },
-                done: function() {
-                    setTimeout(function() {
-                        isPreviewMoving = false;
-                    }, 10);
-                },
-            }).dequeue('scrollSyncFx');
-
         }
         else if(isScrollPreview === true) {
             if(Math.abs(previewScrollTop - lastPreviewScrollTop) <= 9) {
@@ -170,23 +185,12 @@ define([
                 lastEditorScrollTop = editorScrollTop;
                 return;
             }
-            scrollingHelper.stop('scrollSyncFx', true).css('value', 0).animate({
+            animate($editorElt[0], editorScrollTop, destScrollTop, function(currentScrollTop) {
-                value: destScrollTop - editorScrollTop
+                isEditorMoving = true;
-            }, {
+                lastEditorScrollTop = currentScrollTop;
-                easing: 'easeOutSine',
+            }, function() {
-                duration: 200,
+                isEditorMoving = false;
-                queue: 'scrollSyncFx',
+            });
-                step: function(now) {
-                    isEditorMoving = true;
-                    lastEditorScrollTop = editorScrollTop + now;
-                    $editorElt.scrollTop(lastEditorScrollTop);
-                },
-                done: function() {
-                    setTimeout(function() {
-                        isEditorMoving = false;
-                    }, 10);
-                },
-            }).dequeue('scrollSyncFx');
         }
     }, 100);