diff --git a/src/tabs/Curve/3Dcurve_anim_canvas.tsx b/src/tabs/Curve/3Dcurve_anim_canvas.tsx
index f968547658..4e947a498f 100644
--- a/src/tabs/Curve/3Dcurve_anim_canvas.tsx
+++ b/src/tabs/Curve/3Dcurve_anim_canvas.tsx
@@ -306,10 +306,35 @@ State
         <div
           style={{
             display: 'flex',
+            flexDirection: 'column',
             alignContent: 'center',
             justifyContent: 'center',
           }}
         >
+          <div
+            style={{
+              display: 'flex',
+              marginTop: '10px',
+              padding: '10px',
+              flexDirection: 'row',
+              justifyContent: 'stretch',
+              alignContent: 'center',
+            }}
+          >
+            {buttons}
+            {sliders}
+            <Switch
+              style={{
+                marginLeft: '20px',
+                marginRight: '20px',
+                marginTop: '10px',
+                whiteSpace: 'nowrap',
+              }}
+              label="Auto Play"
+              onChange={this.autoPlaySwitchChanged}
+              checked={this.state.autoPlay}
+            />
+          </div>
           <WebGLCanvas
             style={{
               flexGrow: 1,
@@ -319,30 +344,6 @@ State
             }}
           />
         </div>
-        <div
-          style={{
-            display: 'flex',
-            marginTop: '10px',
-            padding: '10px',
-            flexDirection: 'row',
-            justifyContent: 'stretch',
-            alignContent: 'center',
-          }}
-        >
-          {buttons}
-          {sliders}
-          <Switch
-            style={{
-              marginLeft: '20px',
-              marginRight: '20px',
-              marginTop: '10px',
-              whiteSpace: 'nowrap',
-            }}
-            label="Auto Play"
-            onChange={this.autoPlaySwitchChanged}
-            checked={this.state.autoPlay}
-          />
-        </div>
       </>
     );
   }