Make animation setting an attribute instead of a property

README.md

@@ -172,9 +172,8 @@ The filter only applies to the book itself, leaving overlaid elements such as hi
 
 ### The Paginator
 
-There is a basic page transition effect that can be disabled by setting `.pageAnimation` to false.
-
 The layout can be configured by setting the following attributes:
+- `animated`: a [boolean attribute](https://developer.mozilla.org/en-US/docs/Glossary/Boolean/HTML). If present, adds a sliding transition effect.
 - `flow`: either `paginated` or `scrolled`.
 - `margin`: a CSS `<length>`. The unit must be `px`. The height of the header and footer.
 - `gap`: a CSS `<percentage>`. The size of the space between columns, relative to page size.

paginator.js

@@ -390,7 +390,6 @@ export class Paginator extends HTMLElement {
     #scrollBounds
     #touchState
     #touchScrolled
-    pageAnimation = true
     constructor() {
         super()
         this.#root.innerHTML = `<style>
@@ -762,7 +761,7 @@ export class Paginator extends HTMLElement {
         }
         // FIXME: vertical-rl only, not -lr
         if (this.scrolled && this.#vertical) offset = -offset
-        if (reason === 'snap' || smooth && this.pageAnimation) return animate(
+        if ((reason === 'snap' || smooth) && this.hasAttribute('animated')) return animate(
             element[scrollProp], offset, 300, easeOutQuad,
             x => element[scrollProp] = x,
         ).then(() => {
@@ -932,7 +931,7 @@ export class Paginator extends HTMLElement {
             index: this.#adjacentIndex(dir),
             anchor: prev ? () => 1 : () => 0,
         })
-        if (shouldGo || !this.pageAnimation) await wait(100)
+        if (shouldGo || !this.hasAttribute('animated')) await wait(100)
         this.#locked = false
     }
     prev(distance) {