remarqueeble 0.2.0 → 0.3.0

package/README.md

@@ -15,6 +15,9 @@ By Rémino Rem
 <!-- mtoc-start -->
 
 - [Installation](#installation)
+    - [HTML (CDN)](#html-cdn)
+    - [npm](#npm)
+    - [Direct download](#direct-download)
 - [Usage](#usage)
 - [Attributes](#attributes)
 - [API](#api)
@@ -28,23 +31,44 @@ By Rémino Rem
 
 ## Installation
 
-```sh
-npm install remarqueeble
+### HTML (CDN)
+
+Register the custom elements automatically from a CDN:
+
+```html
+<script
+    type="module"
+    src="https://unpkg.com/remarqueeble/dist/remarqueeble-auto.min.js"></script>
 ```
 
-[Back to top](#)
+Mirrors:
 
----
+- https://unpkg.com/remarqueeble/dist/remarqueeble-auto.min.js
+- https://cdn.jsdelivr.net/npm/remarqueeble/dist/remarqueeble-auto.min.js
 
-## Usage
+Use a pinned version in production:
+
+```html
+<script
+    type="module"
+    src="https://unpkg.com/remarqueeble@0.2.0/dist/remarqueeble-auto.min.js"></script>
+```
+
+### npm
+
+Install the package first:
+
+```sh
+npm install remarqueeble
+```
 
-Register the custom elements automatically:
+Then register the custom elements automatically:
 
 ```js
 import 'remarqueeble/auto'
 ```
 
-Or register them explicitly:
+Or import the explicit API:
 
 ```js
 import { defineRemarqueebleElements } from 'remarqueeble'
@@ -52,7 +76,25 @@ import { defineRemarqueebleElements } from 'remarqueeble'
 defineRemarqueebleElements()
 ```
 
-Then use either element name:
+TypeScript declarations are included with the package.
+
+### Direct download
+
+Download the package tarball or individual files from npm/CDN:
+
+- https://www.npmjs.com/package/remarqueeble
+- https://unpkg.com/remarqueeble/dist/
+- https://cdn.jsdelivr.net/npm/remarqueeble/dist/
+
+The browser-ready auto-registration file is `dist/remarqueeble-auto.min.js`.
+
+[Back to top](#)
+
+---
+
+## Usage
+
+After registration, use either element name:
 
 ```html
 <re-marquee>Default marquee behaviour.</re-marquee>

package/dist/auto.d.ts

@@ -1 +1 @@
-export { defineRemarqueebleElements } from './remarqueeble';
+export {};

package/dist/remarqueeble-auto.cjs

@@ -1,5 +1,4 @@
-/*! remarqueeble v0.2.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
-Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
+/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
 //#region src/lib/remarqueeble.ts
 var DEFAULT_DIRECTION = "left";
 var DEFAULT_BEHAVIOR = "scroll";
@@ -24,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;
@@ -84,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" });
@@ -113,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>
@@ -123,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;
@@ -130,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;
@@ -177,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);
@@ -204,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;
@@ -230,69 +246,53 @@ 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 defineRemarqueebleElements = () => {
@@ -304,4 +304,3 @@ var defineRemarqueebleElements = () => {
 //#region src/lib/auto.ts
 defineRemarqueebleElements();
 //#endregion
-exports.defineRemarqueebleElements = defineRemarqueebleElements;

package/dist/remarqueeble-auto.min.js

@@ -0,0 +1,52 @@
+/*! remarqueeble v0.3.0 | (c) 2026 Rémino Rem <https://remino.net/> | ISC Licence */
+(function(){var e=`direction`,t=`behavior`,n=`scrollamount`,r=`scrolldelay`,i=`truespeed`,a=`loop`,o=`bgcolor`,s=`width`,c=`height`,l=`hspace`,u=`vspace`,d=`--attr-width`,f=`--attr-height`,p=`--attr-hspace`,m=`--attr-vspace`,h=`--attr-bgcolor`,g=`--animation-duration`,_=`--animation-direction`,v=`--animation-iteration-count`,y=`--animation-play-state`,b=`--animation-timing-function`,x=`--translate-x-end`,S=`--translate-x-start`,C=`--translate-y-end`,w=`--translate-y-start`,T=globalThis.HTMLElement??class{},E=e=>{if(e===null)return null;let t=e.trim();return t===``?null:/^[+-]?(?:\d+|\d*\.\d+)$/.test(t)?`${t}px`:globalThis.CSS?.supports(`width`,t)?t:null},D=[{attribute:s,cssVar:d,parser:E},{attribute:c,cssVar:f,parser:E,fallback(e){return e.isVerticalDirection&&!e.hasAttribute(c)?`200px`:null}},{attribute:l,cssVar:p,parser:E},{attribute:u,cssVar:m,parser:E},{attribute:o,cssVar:h,parser:e=>{if(e===null)return null;let t=e.trim();return t===``?null:globalThis.CSS?.supports(`background-color`,t)?t:null}}],O=class extends T{static observedAttributes=[e,t,n,r,i,a,o,s,c,l,u];track;running=!1;constructor(){super();let e=this.attachShadow({mode:`open`});e.innerHTML=`
+			<style>
+				:host {
+					display: inline-block;
+					text-align: initial;
+					overflow: hidden !important;
+					white-space: nowrap;
+					width: var(${d}, calc(100% - (var(--attr-hspace, 0px) * 2)));
+					height: var(${f}, auto);
+					margin-inline: var(${p}, 0px);
+					margin-block: var(${m}, 0px);
+					background-color: var(${h}, transparent);
+					box-sizing: border-box;
+				}
+
+				:host([direction="up"]),
+				:host([direction="down"]) {
+					white-space: normal;
+				}
+
+				.track {
+					animation: remarqueeble-motion
+						var(${g}, 10s)
+						var(${b}, linear)
+						var(${v}, infinite)
+						var(${_}, normal)
+						both;
+					animation-play-state: var(${y}, running);
+					display: inline-block;
+					will-change: transform;
+				}
+
+				@keyframes remarqueeble-motion {
+					from {
+						transform: translate(
+							var(${S}, 100%),
+							var(${w}, 0px)
+						);
+					}
+
+					to {
+						transform: translate(
+							var(${x}, -100%),
+							var(${C}, 0px)
+						);
+					}
+				}
+			</style>
+
+			<span class="track"><slot></slot></span>
+		`;let t=e.querySelector(`.track`);if(!t)throw Error(`Remarqueeble track element was not created.`);this.track=t,this.track.addEventListener(`animationend`,()=>this.handleAnimationEnd())}connectedCallback(){this.running=!0,this.syncPresentationalHints(),requestAnimationFrame(()=>{!this.isConnected||!this.running||this.reset()})}disconnectedCallback(){this.running=!1}attributeChangedCallback(e,t,n){t!==n&&(this.syncPresentationalHints(),this.isConnected&&this.reset())}get direction(){return this.getAttribute(e)||`left`}get behavior(){return this.getAttribute(t)||`scroll`}get scrollAmount(){let e=this.getAttribute(n),t=e===null||e.trim()===``?NaN:Number(e);return Number.isFinite(t)&&t>=0?t:6}get scrollDelay(){let e=this.getAttribute(r),t=e===null||e.trim()===``?NaN:Number(e),n=Number.isFinite(t)&&t>=0?t:85;return this.hasAttribute(i)?n:Math.max(n,60)}get loop(){let e=this.getAttribute(a);return e===null?-1:Number(e)}get directionSign(){return this.direction===`right`||this.direction===`down`?1:-1}get isVerticalDirection(){return this.direction===`up`||this.direction===`down`}start(){this.running||(this.running=!0,this.reset(),this.syncAnimationPlayState())}stop(){this.running=!1,this.syncAnimationPlayState()}syncPresentationalHints(){for(let e of D)this.syncVar(e);this.syncAnimationPlayState()}syncVar(e){let t=this.getAttribute(e.attribute),n=e.parser(t),r=e.fallback?e.fallback(this):null;if(n==null){r==null?this.style.removeProperty(e.cssVar):this.style.setProperty(e.cssVar,r);return}this.style.setProperty(e.cssVar,n)}reset(){let e=this.getHostSize(),t=this.getTrackSize();this.syncAnimation(e,t)}getHostSize(){return this.isVerticalDirection?this.clientHeight:this.clientWidth}getTrackSize(){return this.isVerticalDirection?this.track.offsetHeight:this.track.offsetWidth}getStartPosition(e,t){return this.directionSign<0?e:-t}getFlushEndPosition(e,t){return this.directionSign<0?0:e-t}getOffEndPosition(e,t){return this.directionSign<0?-t:e}getSlideEndPosition(e,t){return this.directionSign<0?0:e-t}getAlternateStartPosition(e,t){return this.directionSign<0?e-t:0}syncAnimationPlayState(){this.style.setProperty(y,this.running?`running`:`paused`)}syncAnimation(e,t){let n=this.behavior===`alternate`?this.getAlternateStartPosition(e,t):this.getStartPosition(e,t),r=this.behavior===`slide`?this.getSlideEndPosition(e,t):this.behavior===`alternate`?this.getFlushEndPosition(e,t):this.getOffEndPosition(e,t),i=Math.abs(r-n),a=Math.max(1,Math.ceil(i/Math.max(1,this.scrollAmount))),o=Math.max(1,a*this.scrollDelay),s=this.getCssIterationCount();this.track.style.removeProperty(`transform`),this.style.setProperty(g,`${o}ms`),this.style.setProperty(_,this.behavior===`alternate`?`alternate`:`normal`),this.style.setProperty(v,s),this.style.setProperty(b,`steps(${a}, end)`),this.isVerticalDirection?(this.style.setProperty(S,`0px`),this.style.setProperty(x,`0px`),this.style.setProperty(w,`${n}px`),this.style.setProperty(C,`${r}px`)):(this.style.setProperty(S,`${n}px`),this.style.setProperty(x,`${r}px`),this.style.setProperty(w,`0px`),this.style.setProperty(C,`0px`)),this.restartAnimation()}getCssIterationCount(){return this.behavior===`slide`&&!this.hasAttribute(a)?`1`:this.hasAttribute(a)&&Number.isFinite(this.loop)&&this.loop>0?String(this.loop):`infinite`}handleAnimationEnd(){this.hasFiniteAnimation()&&(this.running=!1,this.syncAnimationPlayState())}restartAnimation(){this.track.style.animationName=`none`,this.track.offsetWidth,this.track.style.removeProperty(`animation-name`)}hasFiniteAnimation(){return this.behavior===`slide`&&!this.hasAttribute(a)?!0:this.hasAttribute(a)&&Number.isFinite(this.loop)&&this.loop>0}};typeof customElements>`u`||(customElements.get(`re-marquee`)||customElements.define(`re-marquee`,O),customElements.get(`re-marquee-ble`)||customElements.define(`re-marquee-ble`,O))})();

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.3.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,69 +246,53 @@ 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 defineRemarqueebleElements = () => {
@@ -303,4 +304,3 @@ var defineRemarqueebleElements = () => {
 //#region src/lib/auto.ts
 defineRemarqueebleElements();
 //#endregion
-export { defineRemarqueebleElements };