diff --git a/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.pw.spec.ts b/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
index 031a575e4d3..d475c0aa5d4 100644
--- a/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
+++ b/packages/web-components/fast-components/src/horizontal-scroll/horizontal-scroll.pw.spec.ts
@@ -133,28 +133,33 @@ describe("FASTHorizontalScroll", function () {
             "fast-horizontal-scroll"
         )) as ElementHandle<fastHorizontalScroll>;
 
+        const doubleWidth = componentWidth * 2;
+
         await element.evaluateHandle(node => node.scrollToNext());
 
         await element.waitForElementState("stable");
 
         const firstXPos = await element.evaluate(node => node.scrollContainer.scrollLeft);
 
-        await element.evaluateHandle(node => node.scrollToNext());
+        await element.evaluateHandle(node => node.scrollToPrevious());
 
         await element.waitForElementState("stable");
 
-        await this.page.evaluate(
-            ({ element, componentWidth }) => {
-                element.style.setProperty("width", `${componentWidth * 2}px`);
-            },
-            { element, componentWidth }
-        );
+        await element.evaluateHandle((node, doubleWidth) => {
+            node.style.setProperty("width", `${doubleWidth}px`);
+        }, doubleWidth);
+
+        await element.waitForElementState("stable");
+
+        expect(await element.evaluate(node => node.clientWidth)).to.equal(doubleWidth);
 
         await element.evaluateHandle(node => node.scrollToNext());
 
         await element.waitForElementState("stable");
 
-        const secondXPos = await element.evaluate(node => node.scrollContainer.scrollLeft);
+        const secondXPos = await element.evaluate(
+            node => node.scrollContainer.scrollLeft
+        );
 
         expect(firstXPos).to.not.equal(secondXPos);
     });
diff --git a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
index 4afe36de294..c7f772c9baf 100644
--- a/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
+++ b/packages/web-components/fast-foundation/src/horizontal-scroll/horizontal-scroll.ts
@@ -428,21 +428,16 @@ export class HorizontalScroll extends FoundationElement {
 
         this.scrolling = true;
 
-        const seconds = Math.abs(newPosition - position) / this.speed;
+        const seconds =
+            this.duration ?? `${Math.abs(newPosition - position) / this.speed}s`;
 
-        this.move(newPosition, seconds);
-    }
+        this.content.style.setProperty("transition-duration", seconds);
 
-    /**
-     * Applies the CSS transition and transform to the content, then sets the
-     * scroll position for the scroll container.
-     *
-     * @param newPosition - position to move towards
-     * @param duration - The default calculated transition duration in seconds
-     * @internal
-     */
-    private move(newPosition: number, duration: number): void {
-        const transitionendHandler = (e?: TransitionEvent) => {
+        const computedDuration = parseFloat(
+            getComputedStyle(this.content).getPropertyValue("transition-duration")
+        );
+
+        const transitionendHandler = (e?: TransitionEvent): void => {
             if (e && e.target !== e.currentTarget) {
                 return;
             }
@@ -460,15 +455,6 @@ export class HorizontalScroll extends FoundationElement {
             this.scrolling = false;
         };
 
-        this.content.style.setProperty(
-            "transition-duration",
-            this.duration ?? `${duration}s`
-        );
-
-        const computedDuration = parseFloat(
-            getComputedStyle(this.content).getPropertyValue("transition-duration")
-        );
-
         if (computedDuration === 0) {
             transitionendHandler();
             return;