diff --git a/browser/src/canvas/CanvasSectionContainer.ts b/browser/src/canvas/CanvasSectionContainer.ts
index 41bd619368af5..88100445ae112 100644
--- a/browser/src/canvas/CanvasSectionContainer.ts
+++ b/browser/src/canvas/CanvasSectionContainer.ts
@@ -2082,13 +2082,16 @@ class CanvasSectionContainer {
 			this.continueAnimating = false;
 		}
 
+		const section: CanvasSectionObject = this.getSectionWithName(this.getAnimatingSectionName());
+		if (section)
+			section.onAnimationStep(this.frameCount, this.elapsedTime);
+
 		if (this.continueAnimating) {
 			this.drawSections(this.frameCount, this.elapsedTime);
 			this.frameCount++;
 			requestAnimationFrame(this.animate.bind(this));
 		}
 		else {
-			var section: CanvasSectionObject = this.getSectionWithName(this.getAnimatingSectionName());
 			if (section) {
 				section.isAnimating = false;
 				section.onAnimationEnded(this.frameCount, this.elapsedTime);
diff --git a/browser/src/canvas/CanvasSectionObject.ts b/browser/src/canvas/CanvasSectionObject.ts
index 38d0b51c22cf1..e327db4454e22 100644
--- a/browser/src/canvas/CanvasSectionObject.ts
+++ b/browser/src/canvas/CanvasSectionObject.ts
@@ -79,6 +79,7 @@ class CanvasSectionObject {
 	onResize(): void { return; }
 	onDraw(frameCount?: number, elapsedTime?: number, subsetBounds?: cool.Bounds): void { return; }
 	onDrawArea(area?: cool.Bounds, paneTopLeft?: cool.Point, canvasContext?: CanvasRenderingContext2D): void { return; } // area is the area to be painted using canvasContext.
+	onAnimationStep(frameCount: number, elapsedTime: number): void { return; }
 	onAnimationEnded(frameCount: number, elapsedTime: number): void { return; } // frameCount, elapsedTime. Sections that will use animation, have to have this function defined.
 	onNewDocumentTopLeft(size: Array<number>): void { return; }
 	onRemove(): void { return; } // This Function is called right before section is removed.
diff --git a/browser/src/canvas/sections/ScrollSection.ts b/browser/src/canvas/sections/ScrollSection.ts
index e73eb7fd05b68..ba54fa58f5e2e 100644
--- a/browser/src/canvas/sections/ScrollSection.ts
+++ b/browser/src/canvas/sections/ScrollSection.ts
@@ -514,21 +514,7 @@ export class ScrollSection extends CanvasSectionObject {
 		}
 	}
 
-	public onDraw (frameCount: number, elapsedTime: number): void {
-		if (this.isAnimating && frameCount >= 0)
-			this.calculateCurrentAlpha(elapsedTime);
-
-		if ((this.sectionProperties.drawVerticalScrollBar || this.sectionProperties.animatingVerticalScrollBar)) {
-			if ((<any>window).mode.isMobile())
-				this.DrawVerticalScrollBarMobile();
-			else
-				this.drawVerticalScrollBar();
-		}
-
-		if ((this.sectionProperties.drawHorizontalScrollBar || this.sectionProperties.animatingHorizontalScrollBar)) {
-			this.drawHorizontalScrollBar();
-		}
-
+	public onAnimationStep (frameCount: number, elapsedTime: number): void {
 		if (this.sectionProperties.animatingScroll) {
 			const lineHeight = this.containerObject.getScrollLineHeight();
 			const accel = lineHeight * ScrollSection.scrollAnimationAcceleration;
@@ -567,6 +553,22 @@ export class ScrollSection extends CanvasSectionObject {
 		}
 	}
 
+	public onDraw (frameCount: number, elapsedTime: number): void {
+		if (this.isAnimating && frameCount >= 0)
+			this.calculateCurrentAlpha(elapsedTime);
+
+		if ((this.sectionProperties.drawVerticalScrollBar || this.sectionProperties.animatingVerticalScrollBar)) {
+			if ((<any>window).mode.isMobile())
+				this.DrawVerticalScrollBarMobile();
+			else
+				this.drawVerticalScrollBar();
+		}
+
+		if ((this.sectionProperties.drawHorizontalScrollBar || this.sectionProperties.animatingHorizontalScrollBar)) {
+			this.drawHorizontalScrollBar();
+		}
+	}
+
 	public onAnimationEnded (frameCount: number, elapsedTime: number): void {
 		this.sectionProperties.animatingVerticalScrollBar = false;
 		this.sectionProperties.animatingHorizontalScrollBar = false;