npm - lumina-slides - Versions diffs - 8.9.3 → 8.9.5 - Mend

lumina-slides 8.9.3 → 8.9.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/IMPLEMENTATION.md +126 -1
package/dist/lumina-slides.js +5216 -5200
package/dist/lumina-slides.umd.cjs +113 -113
package/dist/style.css +1 -1
package/package.json +1 -1

package/IMPLEMENTATION.md CHANGED Viewed

@@ -247,7 +247,7 @@ Use `engine.element(id)` or `engine.element(slideIndex, path)` to get an **Eleme
 4. **Order:** `new Lumina(...)` → `engine.on('ready', ...)` → `engine.on('slideChange', ...)` → `engine.load(deck)`.
-**Example (vanilla JS):**
+**Example (vanilla JS) — simple reveal with delay:**
 ```js
 const engine = new Lumina("#app", { theme: "midnight" });
@@ -278,6 +278,131 @@ engine.load({
 ---
+## Delay-controlled animations (vanilla JS, no Vue)
+Staggered reveals and per-element animations are driven from vanilla JS using `setTimeout`, `engine.element(id).show()`, and `engine.element(id).animate()`. Register `ready` and `slideChange` **before** `engine.load(deck)`.
+**Helper to reveal a slide’s elements with delay and optional animation:**
+```js
+/**
+ * Reveal all elements of a slide with staggered delay. Pure JavaScript, no Vue.
+ * @param {import('lumina-slides').Lumina} engine
+ * @param {number} slideIndex
+ * @param {Object} [opts]
+ * @param {number} [opts.delayMs=500] - Delay between each element (ms).
+ * @param {boolean} [opts.animate=true] - If true, animate from { opacity: 0, y: 20 } to { opacity: 1, y: 0 }.
+ * @param {number} [opts.animDuration=0.5] - Animation duration in seconds.
+ */
+function revealSlideWithDelay(engine, slideIndex, opts = {}) {
+  const { delayMs = 500, animate = true, animDuration = 0.5 } = opts;
+  const ids = engine.elements(slideIndex);
+  if (!ids || !ids.length) return;
+  ids.forEach((id, i) => {
+    const t = (i + 1) * delayMs;
+    setTimeout(() => {
+      const el = engine.element(id);
+      el.show();
+      if (animate) {
+        el.animate({
+          from: { opacity: 0, y: 20 },
+          to: { opacity: 1, y: 0 },
+          duration: animDuration,
+          ease: "power2.out",
+        });
+      }
+    }, t);
+  });
+}
+```
+**Full HTML + vanilla JS example (delay-controlled animations):**
+```html
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8" />
+  <title>Lumina – delay-controlled animations (vanilla JS)</title>
+  <link rel="stylesheet" href="node_modules/lumina-slides/dist/style.css" />
+</head>
+<body>
+  <div id="app" style="width:100vw;height:100vh;"></div>
+  <script type="module">
+    import { Lumina } from "lumina-slides";
+    const engine = new Lumina("#app", { theme: "midnight" });
+    function revealSlideWithDelay(engine, slideIndex, opts = {}) {
+      const { delayMs = 500, animate = true, animDuration = 0.5 } = opts;
+      const ids = engine.elements(slideIndex);
+      if (!ids || !ids.length) return;
+      ids.forEach((id, i) => {
+        setTimeout(() => {
+          engine.element(id).show();
+          if (animate) {
+            engine.element(id).animate({
+              from: { opacity: 0, y: 20 },
+              to: { opacity: 1, y: 0 },
+              duration: animDuration,
+              ease: "power2.out",
+            });
+          }
+        }, (i + 1) * delayMs);
+      });
+    }
+    // Must register before load so callbacks run when DOM is ready
+    engine.on("ready", () => revealSlideWithDelay(engine, 0, { delayMs: 600, animDuration: 0.5 }));
+    engine.on("slideChange", ({ index }) => revealSlideWithDelay(engine, index, { delayMs: 600, animDuration: 0.5 }));
+    engine.load({
+      meta: {
+        title: "Staggered reveal",
+        elementControl: { defaultVisible: false },
+        initialElementState: {
+          "s0-tag": { visible: false },
+          "s0-title": { visible: false },
+          "s0-subtitle": { visible: false },
+          "s1-header": { visible: false },
+          "s1-features-0": { visible: false },
+          "s1-features-1": { visible: false },
+        },
+      },
+      slides: [
+        { type: "statement", title: "Welcome", subtitle: "Each line appears with a delay", tag: "Intro" },
+        { type: "features", title: "Highlights", features: [
+          { title: "First", desc: "Revealed after 600ms", icon: "star" },
+          { title: "Second", desc: "Revealed after 1200ms", icon: "zap" },
+        ]},
+      ],
+    });
+  </script>
+</body>
+</html>
+```
+**Animation-only (no show/hide), with custom stagger:**
+```js
+engine.on("ready", () => {
+  const ids = engine.elements(0);
+  ids.forEach((id, i) => {
+    setTimeout(() => {
+      engine.element(id).animate({
+        from: { opacity: 0, scale: 0.95 },
+        to: { opacity: 1, scale: 1 },
+        duration: 0.6,
+        ease: "back.out(1.2)",
+      });
+    }, i * 400);
+  });
+});
+```
+---
 ## Animation options (engine and deck)
 - **Engine options:** `options.animation: { enabled?: boolean, type?: 'fade'|'cascade'|'zoom', durationIn?, durationOut? }` when creating `new Lumina(selector, options)`.