remarqueeble 0.2.0 → 0.4.0

package/dist/remarqueeble-auto.mjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.2.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
 var DEFAULT_BEHAVIOR = "scroll";
@@ -23,6 +23,15 @@ var CSS_VAR_HEIGHT = "--attr-height";
 var CSS_VAR_HSPACE = "--attr-hspace";
 var CSS_VAR_VSPACE = "--attr-vspace";
 var CSS_VAR_BG_COLOR = "--attr-bgcolor";
+var CSS_VAR_ANIMATION_DURATION = "--animation-duration";
+var CSS_VAR_ANIMATION_DIRECTION = "--animation-direction";
+var CSS_VAR_ANIMATION_ITERATION_COUNT = "--animation-iteration-count";
+var CSS_VAR_ANIMATION_PLAY_STATE = "--animation-play-state";
+var CSS_VAR_ANIMATION_TIMING_FUNCTION = "--animation-timing-function";
+var CSS_VAR_TRANSLATE_X_END = "--translate-x-end";
+var CSS_VAR_TRANSLATE_X_START = "--translate-x-start";
+var CSS_VAR_TRANSLATE_Y_END = "--translate-y-end";
+var CSS_VAR_TRANSLATE_Y_START = "--translate-y-start";
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var parsePresentationalDimension = (value) => {
 	if (value === null) return null;
@@ -83,11 +92,6 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	];
 	track;
 	running = false;
-	position = 0;
-	lastTime = null;
-	loopsDone = 0;
-	forward = true;
-	rafId = null;
 	constructor() {
 		super();
 		const shadowRoot = this.attachShadow({ mode: "open" });
@@ -112,9 +116,32 @@ var RemarqueebleElement = class extends HTMLElementBase {
 				}
 
 				.track {
+					animation: remarqueeble-motion
+						var(${CSS_VAR_ANIMATION_DURATION}, 10s)
+						var(${CSS_VAR_ANIMATION_TIMING_FUNCTION}, linear)
+						var(${CSS_VAR_ANIMATION_ITERATION_COUNT}, infinite)
+						var(${CSS_VAR_ANIMATION_DIRECTION}, normal)
+						both;
+					animation-play-state: var(${CSS_VAR_ANIMATION_PLAY_STATE}, running);
 					display: inline-block;
 					will-change: transform;
 				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_START}, 100%),
+							var(${CSS_VAR_TRANSLATE_Y_START}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_END}, -100%),
+							var(${CSS_VAR_TRANSLATE_Y_END}, 0px)
+						);
+					}
+				}
 			</style>
 
 			<span class="track"><slot></slot></span>
@@ -122,6 +149,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		const track = shadowRoot.querySelector(".track");
 		if (!track) throw new Error("Remarqueeble track element was not created.");
 		this.track = track;
+		this.track.addEventListener("animationend", () => this.handleAnimationEnd());
 	}
 	connectedCallback() {
 		this.running = true;
@@ -129,16 +157,10 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		requestAnimationFrame(() => {
 			if (!this.isConnected || !this.running) return;
 			this.reset();
-			this.tick();
 		});
 	}
 	disconnectedCallback() {
 		this.running = false;
-		this.lastTime = null;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
 	}
 	attributeChangedCallback(_name, oldValue, newValue) {
 		if (oldValue === newValue) return;
@@ -176,18 +198,16 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	start() {
 		if (this.running) return;
 		this.running = true;
-		this.lastTime = null;
-		this.tick();
+		this.reset();
+		this.syncAnimationPlayState();
 	}
 	stop() {
 		this.running = false;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
+		this.syncAnimationPlayState();
 	}
 	syncPresentationalHints() {
 		for (const hint of ATTRIBUTE_HINTS) this.syncVar(hint);
+		this.syncAnimationPlayState();
 	}
 	syncVar(hint) {
 		const raw = this.getAttribute(hint.attribute);
@@ -203,10 +223,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	reset() {
 		const hostSize = this.getHostSize();
 		const trackSize = this.getTrackSize();
-		this.loopsDone = 0;
-		this.forward = true;
-		this.position = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
-		this.render();
+		this.syncAnimation(hostSize, trackSize);
 	}
 	getHostSize() {
 		return this.isVerticalDirection ? this.clientHeight : this.clientWidth;
@@ -229,78 +246,63 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	getAlternateStartPosition(hostSize, trackSize) {
 		return this.directionSign < 0 ? hostSize - trackSize : 0;
 	}
-	tick(time = performance.now()) {
-		if (!this.running) return;
-		if (this.lastTime === null) this.lastTime = time;
-		if (time - this.lastTime >= this.scrollDelay) {
-			this.step();
-			this.lastTime = time;
-		}
-		if (!this.running) return;
-		this.rafId = requestAnimationFrame((nextTime) => this.tick(nextTime));
+	syncAnimationPlayState() {
+		this.style.setProperty(CSS_VAR_ANIMATION_PLAY_STATE, this.running ? "running" : "paused");
 	}
-	step() {
-		const hostSize = this.getHostSize();
-		const trackSize = this.getTrackSize();
-		const startPosition = this.getStartPosition(hostSize, trackSize);
-		const flushEndPosition = this.getFlushEndPosition(hostSize, trackSize);
-		const offEndPosition = this.getOffEndPosition(hostSize, trackSize);
-		const slideEndPosition = this.getSlideEndPosition(hostSize, trackSize);
-		const alternateStartPosition = this.getAlternateStartPosition(hostSize, trackSize);
-		const amount = this.scrollAmount;
-		const delta = this.directionSign * amount;
-		if (this.behavior === "alternate") {
-			this.position += this.forward ? delta : -delta;
-			if (this.forward) {
-				if (this.directionSign < 0 && this.position <= flushEndPosition || this.directionSign > 0 && this.position >= flushEndPosition) {
-					this.position = flushEndPosition;
-					this.forward = false;
-					this.incrementLoopCount();
-					if (this.shouldStopAfterLoop()) this.stop();
-				}
-			} else if (this.directionSign < 0 && this.position >= alternateStartPosition || this.directionSign > 0 && this.position <= alternateStartPosition) {
-				this.position = alternateStartPosition;
-				this.forward = true;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
-		} else if (this.behavior === "slide") {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= slideEndPosition || this.directionSign > 0 && this.position >= slideEndPosition) {
-				this.position = slideEndPosition;
-				this.incrementLoopCount();
-				if (!this.hasAttribute(ATTR_LOOP) || this.loop <= 0) this.stop();
-				else if (this.shouldStopAfterLoop()) this.stop();
-				else this.position = startPosition;
-			}
+	syncAnimation(hostSize, trackSize) {
+		const startPosition = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
+		const endPosition = this.behavior === "slide" ? this.getSlideEndPosition(hostSize, trackSize) : this.behavior === "alternate" ? this.getFlushEndPosition(hostSize, trackSize) : this.getOffEndPosition(hostSize, trackSize);
+		const distance = Math.abs(endPosition - startPosition);
+		const steps = Math.max(1, Math.ceil(distance / Math.max(1, this.scrollAmount)));
+		const duration = Math.max(1, steps * this.scrollDelay);
+		const iterationCount = this.getCssIterationCount();
+		this.track.style.removeProperty("transform");
+		this.style.setProperty(CSS_VAR_ANIMATION_DURATION, `${duration}ms`);
+		this.style.setProperty(CSS_VAR_ANIMATION_DIRECTION, this.behavior === "alternate" ? "alternate" : "normal");
+		this.style.setProperty(CSS_VAR_ANIMATION_ITERATION_COUNT, iterationCount);
+		this.style.setProperty(CSS_VAR_ANIMATION_TIMING_FUNCTION, `steps(${steps}, end)`);
+		if (this.isVerticalDirection) {
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, `${endPosition}px`);
 		} else {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= offEndPosition || this.directionSign > 0 && this.position >= offEndPosition) {
-				this.position = startPosition;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, `${endPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, "0px");
 		}
-		this.render();
+		this.restartAnimation();
 	}
-	incrementLoopCount() {
-		this.loopsDone++;
+	getCssIterationCount() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return "1";
+		if (!this.hasAttribute(ATTR_LOOP)) return "infinite";
+		if (Number.isFinite(this.loop) && this.loop > 0) return String(this.loop);
+		return "infinite";
+	}
+	handleAnimationEnd() {
+		if (!this.hasFiniteAnimation()) return;
+		this.running = false;
+		this.syncAnimationPlayState();
 	}
-	shouldStopAfterLoop() {
-		return this.hasAttribute(ATTR_LOOP) && this.loop > 0 && this.loopsDone >= this.loop;
+	restartAnimation() {
+		this.track.style.animationName = "none";
+		this.track.offsetWidth;
+		this.track.style.removeProperty("animation-name");
 	}
-	render() {
-		if (this.isVerticalDirection) this.track.style.transform = `translateY(${this.position}px)`;
-		else this.track.style.transform = `translateX(${this.position}px)`;
+	hasFiniteAnimation() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return true;
+		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
+var ReMarqueeElement = class extends RemarqueebleElement {};
+var ReMarqueeBleElement = class extends RemarqueebleElement {};
 var defineRemarqueebleElements = () => {
 	if (typeof customElements === "undefined") return;
-	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
-	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", ReMarqueeElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", ReMarqueeBleElement);
 };
 //#endregion
 //#region src/lib/auto.ts
 defineRemarqueebleElements();
 //#endregion
-export { defineRemarqueebleElements };

package/dist/remarqueeble.cjs

@@ -1,4 +1,4 @@
-/*! remarqueeble v0.2.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+/*! remarqueeble v0.4.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
@@ -24,6 +24,15 @@ var CSS_VAR_HEIGHT = "--attr-height";
 var CSS_VAR_HSPACE = "--attr-hspace";
 var CSS_VAR_VSPACE = "--attr-vspace";
 var CSS_VAR_BG_COLOR = "--attr-bgcolor";
+var CSS_VAR_ANIMATION_DURATION = "--animation-duration";
+var CSS_VAR_ANIMATION_DIRECTION = "--animation-direction";
+var CSS_VAR_ANIMATION_ITERATION_COUNT = "--animation-iteration-count";
+var CSS_VAR_ANIMATION_PLAY_STATE = "--animation-play-state";
+var CSS_VAR_ANIMATION_TIMING_FUNCTION = "--animation-timing-function";
+var CSS_VAR_TRANSLATE_X_END = "--translate-x-end";
+var CSS_VAR_TRANSLATE_X_START = "--translate-x-start";
+var CSS_VAR_TRANSLATE_Y_END = "--translate-y-end";
+var CSS_VAR_TRANSLATE_Y_START = "--translate-y-start";
 var HTMLElementBase = globalThis.HTMLElement ?? class {};
 var parsePresentationalDimension = (value) => {
 	if (value === null) return null;
@@ -84,11 +93,6 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	];
 	track;
 	running = false;
-	position = 0;
-	lastTime = null;
-	loopsDone = 0;
-	forward = true;
-	rafId = null;
 	constructor() {
 		super();
 		const shadowRoot = this.attachShadow({ mode: "open" });
@@ -113,9 +117,32 @@ var RemarqueebleElement = class extends HTMLElementBase {
 				}
 
 				.track {
+					animation: remarqueeble-motion
+						var(${CSS_VAR_ANIMATION_DURATION}, 10s)
+						var(${CSS_VAR_ANIMATION_TIMING_FUNCTION}, linear)
+						var(${CSS_VAR_ANIMATION_ITERATION_COUNT}, infinite)
+						var(${CSS_VAR_ANIMATION_DIRECTION}, normal)
+						both;
+					animation-play-state: var(${CSS_VAR_ANIMATION_PLAY_STATE}, running);
 					display: inline-block;
 					will-change: transform;
 				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_START}, 100%),
+							var(${CSS_VAR_TRANSLATE_Y_START}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${CSS_VAR_TRANSLATE_X_END}, -100%),
+							var(${CSS_VAR_TRANSLATE_Y_END}, 0px)
+						);
+					}
+				}
 			</style>
 
 			<span class="track"><slot></slot></span>
@@ -123,6 +150,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		const track = shadowRoot.querySelector(".track");
 		if (!track) throw new Error("Remarqueeble track element was not created.");
 		this.track = track;
+		this.track.addEventListener("animationend", () => this.handleAnimationEnd());
 	}
 	connectedCallback() {
 		this.running = true;
@@ -130,16 +158,10 @@ var RemarqueebleElement = class extends HTMLElementBase {
 		requestAnimationFrame(() => {
 			if (!this.isConnected || !this.running) return;
 			this.reset();
-			this.tick();
 		});
 	}
 	disconnectedCallback() {
 		this.running = false;
-		this.lastTime = null;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
 	}
 	attributeChangedCallback(_name, oldValue, newValue) {
 		if (oldValue === newValue) return;
@@ -177,18 +199,16 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	start() {
 		if (this.running) return;
 		this.running = true;
-		this.lastTime = null;
-		this.tick();
+		this.reset();
+		this.syncAnimationPlayState();
 	}
 	stop() {
 		this.running = false;
-		if (this.rafId !== null) {
-			cancelAnimationFrame(this.rafId);
-			this.rafId = null;
-		}
+		this.syncAnimationPlayState();
 	}
 	syncPresentationalHints() {
 		for (const hint of ATTRIBUTE_HINTS) this.syncVar(hint);
+		this.syncAnimationPlayState();
 	}
 	syncVar(hint) {
 		const raw = this.getAttribute(hint.attribute);
@@ -204,10 +224,7 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	reset() {
 		const hostSize = this.getHostSize();
 		const trackSize = this.getTrackSize();
-		this.loopsDone = 0;
-		this.forward = true;
-		this.position = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
-		this.render();
+		this.syncAnimation(hostSize, trackSize);
 	}
 	getHostSize() {
 		return this.isVerticalDirection ? this.clientHeight : this.clientWidth;
@@ -230,75 +247,61 @@ var RemarqueebleElement = class extends HTMLElementBase {
 	getAlternateStartPosition(hostSize, trackSize) {
 		return this.directionSign < 0 ? hostSize - trackSize : 0;
 	}
-	tick(time = performance.now()) {
-		if (!this.running) return;
-		if (this.lastTime === null) this.lastTime = time;
-		if (time - this.lastTime >= this.scrollDelay) {
-			this.step();
-			this.lastTime = time;
-		}
-		if (!this.running) return;
-		this.rafId = requestAnimationFrame((nextTime) => this.tick(nextTime));
+	syncAnimationPlayState() {
+		this.style.setProperty(CSS_VAR_ANIMATION_PLAY_STATE, this.running ? "running" : "paused");
 	}
-	step() {
-		const hostSize = this.getHostSize();
-		const trackSize = this.getTrackSize();
-		const startPosition = this.getStartPosition(hostSize, trackSize);
-		const flushEndPosition = this.getFlushEndPosition(hostSize, trackSize);
-		const offEndPosition = this.getOffEndPosition(hostSize, trackSize);
-		const slideEndPosition = this.getSlideEndPosition(hostSize, trackSize);
-		const alternateStartPosition = this.getAlternateStartPosition(hostSize, trackSize);
-		const amount = this.scrollAmount;
-		const delta = this.directionSign * amount;
-		if (this.behavior === "alternate") {
-			this.position += this.forward ? delta : -delta;
-			if (this.forward) {
-				if (this.directionSign < 0 && this.position <= flushEndPosition || this.directionSign > 0 && this.position >= flushEndPosition) {
-					this.position = flushEndPosition;
-					this.forward = false;
-					this.incrementLoopCount();
-					if (this.shouldStopAfterLoop()) this.stop();
-				}
-			} else if (this.directionSign < 0 && this.position >= alternateStartPosition || this.directionSign > 0 && this.position <= alternateStartPosition) {
-				this.position = alternateStartPosition;
-				this.forward = true;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
-		} else if (this.behavior === "slide") {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= slideEndPosition || this.directionSign > 0 && this.position >= slideEndPosition) {
-				this.position = slideEndPosition;
-				this.incrementLoopCount();
-				if (!this.hasAttribute(ATTR_LOOP) || this.loop <= 0) this.stop();
-				else if (this.shouldStopAfterLoop()) this.stop();
-				else this.position = startPosition;
-			}
+	syncAnimation(hostSize, trackSize) {
+		const startPosition = this.behavior === "alternate" ? this.getAlternateStartPosition(hostSize, trackSize) : this.getStartPosition(hostSize, trackSize);
+		const endPosition = this.behavior === "slide" ? this.getSlideEndPosition(hostSize, trackSize) : this.behavior === "alternate" ? this.getFlushEndPosition(hostSize, trackSize) : this.getOffEndPosition(hostSize, trackSize);
+		const distance = Math.abs(endPosition - startPosition);
+		const steps = Math.max(1, Math.ceil(distance / Math.max(1, this.scrollAmount)));
+		const duration = Math.max(1, steps * this.scrollDelay);
+		const iterationCount = this.getCssIterationCount();
+		this.track.style.removeProperty("transform");
+		this.style.setProperty(CSS_VAR_ANIMATION_DURATION, `${duration}ms`);
+		this.style.setProperty(CSS_VAR_ANIMATION_DIRECTION, this.behavior === "alternate" ? "alternate" : "normal");
+		this.style.setProperty(CSS_VAR_ANIMATION_ITERATION_COUNT, iterationCount);
+		this.style.setProperty(CSS_VAR_ANIMATION_TIMING_FUNCTION, `steps(${steps}, end)`);
+		if (this.isVerticalDirection) {
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, `${endPosition}px`);
 		} else {
-			this.position += delta;
-			if (this.directionSign < 0 && this.position <= offEndPosition || this.directionSign > 0 && this.position >= offEndPosition) {
-				this.position = startPosition;
-				this.incrementLoopCount();
-				if (this.shouldStopAfterLoop()) this.stop();
-			}
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_START, `${startPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_X_END, `${endPosition}px`);
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_START, "0px");
+			this.style.setProperty(CSS_VAR_TRANSLATE_Y_END, "0px");
 		}
-		this.render();
+		this.restartAnimation();
 	}
-	incrementLoopCount() {
-		this.loopsDone++;
+	getCssIterationCount() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return "1";
+		if (!this.hasAttribute(ATTR_LOOP)) return "infinite";
+		if (Number.isFinite(this.loop) && this.loop > 0) return String(this.loop);
+		return "infinite";
+	}
+	handleAnimationEnd() {
+		if (!this.hasFiniteAnimation()) return;
+		this.running = false;
+		this.syncAnimationPlayState();
 	}
-	shouldStopAfterLoop() {
-		return this.hasAttribute(ATTR_LOOP) && this.loop > 0 && this.loopsDone >= this.loop;
+	restartAnimation() {
+		this.track.style.animationName = "none";
+		this.track.offsetWidth;
+		this.track.style.removeProperty("animation-name");
 	}
-	render() {
-		if (this.isVerticalDirection) this.track.style.transform = `translateY(${this.position}px)`;
-		else this.track.style.transform = `translateX(${this.position}px)`;
+	hasFiniteAnimation() {
+		if (this.behavior === "slide" && !this.hasAttribute(ATTR_LOOP)) return true;
+		return this.hasAttribute(ATTR_LOOP) && Number.isFinite(this.loop) && this.loop > 0;
 	}
 };
+var ReMarqueeElement = class extends RemarqueebleElement {};
+var ReMarqueeBleElement = class extends RemarqueebleElement {};
 var defineRemarqueebleElements = () => {
 	if (typeof customElements === "undefined") return;
-	if (!customElements.get("re-marquee")) customElements.define("re-marquee", RemarqueebleElement);
-	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", RemarqueebleElement);
+	if (!customElements.get("re-marquee")) customElements.define("re-marquee", ReMarqueeElement);
+	if (!customElements.get("re-marquee-ble")) customElements.define("re-marquee-ble", ReMarqueeBleElement);
 };
 //#endregion
 exports.RemarqueebleElement = RemarqueebleElement;

package/dist/remarqueeble.d.ts

@@ -8,11 +8,6 @@ export declare class RemarqueebleElement extends HTMLElementBase {
     static observedAttributes: string[];
     private readonly track;
     private running;
-    private position;
-    private lastTime;
-    private loopsDone;
-    private forward;
-    private rafId;
     constructor();
     connectedCallback(): void;
     disconnectedCallback(): void;
@@ -36,11 +31,12 @@ export declare class RemarqueebleElement extends HTMLElementBase {
     private getOffEndPosition;
     private getSlideEndPosition;
     private getAlternateStartPosition;
-    private tick;
-    private step;
-    private incrementLoopCount;
-    private shouldStopAfterLoop;
-    private render;
+    private syncAnimationPlayState;
+    private syncAnimation;
+    private getCssIterationCount;
+    private handleAnimationEnd;
+    private restartAnimation;
+    private hasFiniteAnimation;
 }
 export declare const defineRemarqueebleElements: () => void;
 declare global {