diff --git a/spine-ts/spine-webgl/example/webcomponent-tutorial.html b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
index aa892c733..b151088bf 100644
--- a/spine-ts/spine-webgl/example/webcomponent-tutorial.html
+++ b/spine-ts/spine-webgl/example/webcomponent-tutorial.html
@@ -1782,7 +1782,7 @@ skins.forEach((skin, i) => {
                 By default, the callback does two things:
                 <ul>
                     <li>set <code>onScreenAtLeastOnce</code> to <code>true</code> when the widget enters the viewport the first time</li>
-                    <li>if <code>manual-start</code> and <code>on-screen-manual-start</code> are set the widget <code>start</code> is invoked
+                    <li>if <code>start-when-visible</code> is set, the widget <code>start</code> is invoked
                         the first time the widget enters the viewport and the assets are loaded only in that moment.</li>
                 </ul>
                 <br>
@@ -1799,8 +1799,7 @@ skins.forEach((skin, i) => {
                         atlas="assets/coin-pma.atlas"
                         skeleton="assets/coin-pro.skel"
                         animation="animation"
-                        manual-start
-                        on-screen-manual-start
+                        start-when-visible
                     ></spine-widget>
                 </div>
                 <div class="skin-grid-element">
diff --git a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
index e104b34e5..0812a094c 100644
--- a/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
+++ b/spine-ts/spine-webgl/src/SpineWebComponentWidget.ts
@@ -197,7 +197,7 @@ interface WidgetAttributes {
 	debug: boolean
 	identifier: string
 	manualStart: boolean
-	onScreenManualStart: boolean
+	startWhenVisible: boolean
 	pages?: Array<number>
 	clip: boolean
 	offScreenUpdateBehaviour: OffScreenUpdateBehaviourType
@@ -593,18 +593,27 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 
 	/**
 	 * If false, assets loading are loaded immediately and the skeleton shown as soon as the assets are loaded
-	 * If true, it is necessary to invoke the start method to start the loading process
+	 * If true, it is necessary to invoke the start method to start the widget and the loading process
 	 * Connected to `manual-start` attribute.
 	 */
 	public manualStart = false;
 
 	/**
-	 * If true and manualStart is true, allows the default {@link onScreenFunction} to invoke the {@link start} method.
+	 * If true, automatically sets manualStart to true to pervent widget to start immediately.
+	 * Then, in combination with the default {@link onScreenFunction}, the widget {@link start}
+	 * the first time it enters the viewport.
 	 * This is useful when you want to load the assets only when the widget is revealed.
-	 * By default, is false implying the start method to be invoked manually.
-	 * Connected to `on-screen-manual-start` attribute.
+	 * By default, is false.
+	 * Connected to `start-when-visible` attribute.
 	 */
-	public onScreenManualStart = false;
+	public set startWhenVisible (value: boolean) {
+		this.manualStart = true;
+		this._startWhenVisible = value;
+	}
+	public get startWhenVisible (): boolean {
+		return this._startWhenVisible;
+	}
+	public _startWhenVisible = false;
 
 	/**
 	 * An array of indexes indicating the atlas pages indexes to be loaded.
@@ -664,7 +673,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 		if (widget.loading && !widget.onScreenAtLeastOnce) {
 			widget.onScreenAtLeastOnce = true;
 
-			if (widget.manualStart && widget.onScreenManualStart) {
+			if (widget.manualStart && widget.startWhenVisible) {
 				widget.start();
 			}
 		}
@@ -820,7 +829,7 @@ export class SpineWebComponentWidget extends HTMLElement implements Disposable,
 		identifier: { propertyName: "identifier", type: "string" },
 		debug: { propertyName: "debug", type: "boolean" },
 		"manual-start": { propertyName: "manualStart", type: "boolean" },
-		"on-screen-manual-start": { propertyName: "onScreenManualStart", type: "boolean" },
+		"start-when-visible": { propertyName: "startWhenVisible", type: "boolean" },
 		spinner: { propertyName: "loadingSpinner", type: "boolean" },
 		clip: { propertyName: "clip", type: "boolean" },
 		pages: { propertyName: "pages", type: "array-number" },