Next and Previous Button

Custom code
1

Hi all,

I’m trying to build a simple “book-style” pagination in Readymag using only the native Animation → Click interface (no paid plan, no Pro widgets). Each page (“D1”, “D2”, “D3”, etc.) is actually a collection of sibling widgets—all of which share IDs that start with pack_…—so there isn’t a single wrapper element.

What I want:

  • When I click Next on D1:
    1. Fade out D1 (opacity 100→0)
    2. Fade in D2 (opacity 0→100)
  • When I click Previous on D2:
    1. Fade out D2
    2. Fade in D1

…and similarly for D2→D3 and D3→D2.

What I’ve tried

  1. Native multi-step Click animations
  • I selected the D1 container, added a Click trigger on my Next button, then tried to add two Steps:
    • Step 1: Self → Opacity 100→0 (Hide D1)
    • Step 2: Self → Opacity 0→100 (Show D2)
  • But Readymag insists “Self” stays bound to D1, and I cannot retarget Step 2 to D2—there’s no UI to select another group as the Step target.
  1. Custom JavaScript in a Code widget

js

CopyEdit

<script>
(function(){
  const d1 = document.querySelector('[id^="pack_"]');         // not actually nested  
  const d2 = document.querySelector('[data-id="pack_6d74…"]');
  const btnNext = document.querySelector('[data-id="6861c76b…"]');
  const btnPrev = document.querySelector('[data-id="6861c76c…"]');

  function fade(el, show) {
    el.style.transition = 'opacity .5s ease';
    el.style.opacity = show ? '1' : '0';
    setTimeout(() => el.style.display = show ? 'block' : 'none', 500);
  }
  btnNext.addEventListener('click', () => {
    fade(d1, false);
    fade(d2, true);
  });
  btnPrev.addEventListener('click', () => {
    fade(d2, false);
    fade(d1, true);
  });
})();
</script>

– In the live preview, the Next button works (D1 → D2), but the Previous button does nothing—and sometimes the groups just stack on top of each other instead of hiding properly.

Questions

  1. Is there a way in Readymag’s built-in Animation panel to have a single Click trigger hide one element and show another, by retargeting Steps?
  2. If not, what’s the best workaround without paid features? (e.g. grouping siblings in a Frame, adding CSS classes, transparent overlays, etc.)
  3. For those of you who have built “Next/Previous” pagination in Readymag, how did you wire up both directions so that the Previous arrow reliably fades the current group out and brings back the prior one?

Any guidance or step-by-step tips would be hugely appreciated—thanks in advance!up, to next and previous button ?

2
  1. I don’t think so
  2. Likely through code, but that will still require you to have a paid plan.