Load more: one entrance animation per card, not two

OP OpenVibers committed 16 Sept 2026 · 2a269e91be · 2 files, +12 −2

home-fx's scroll-reveal claims every new .stream-card on the home page and holds it at opacity 0
until it scrolls into view. Cards appended by Load more were getting that *and* the new .ov-enter
stagger, and when .ov-enter was cleaned up 1.4s later a card that had not yet been revealed fell
back to opacity 0 and vanished. Appended cards are now marked as already revealed, which is also
what they are — the reader asked for them — so attachReveal() skips them and .ov-enter is the
only animation running.

Co-Authored-By: Claude Opus 5 <[email protected]>
Claude-Session: https://claude.ai/code/session_01CMxJm1dB8rdsaMSgNjVa82

Changes

ddiff --git a/public/index.html b/public/index.html
iindex 332a46a6..bd746da2 100644
---- a/public/index.html
++++ b/public/index.html
@@@ -5095,7 +5095,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig
  <script src="/js/ov-skeleton.js?v=1" defer></script>
  <script src="/js/ov-odometer.js?v=3" defer></script>
  <script src="/js/ov-density.js?v=3" defer></script>
--<script src="/js/app.js?v=172" defer></script>
++<script src="/js/app.js?v=173" defer></script>
  <script src="/js/stream-player.js?v=22" defer></script>
  <script src="/js/stream-pip.js?v=1" defer></script>
  <script src="/js/chat-shared.js?v=3" defer></script>
ddiff --git a/public/js/app.js b/public/js/app.js
iindex 83020380..9dbee81a 100644
---- a/public/js/app.js
++++ b/public/js/app.js
@@@ -965,10 +965,20 @@ function ovPutCards(container, html, append) {
      if (!append) { container.innerHTML = html; return; }
      const first = container.children.length;
      container.insertAdjacentHTML('beforeend', html);
++    const added = Array.prototype.slice.call(container.children, first);
++
++    // home-fx runs its own scroll-reveal over every .stream-card on the home page and parks each
++    // one at opacity 0 until it is scrolled to. That is right for cards the reader is scrolling
++    // toward and wrong for cards they just asked for by name. Worse, the two animations fight:
++    // when .ov-enter is cleaned up below, a card that had not been revealed yet would drop back
++    // to opacity 0 and disappear. Marking these as already revealed makes attachReveal() skip
++    // them — it early-returns on .hfx-reveal — and leaves them opaque underneath, so .ov-enter is
++    // the only thing animating.
++    added.forEach(el => el.classList.add('hfx-reveal', 'is-in'));
++
      let reduce = false;
      try { reduce = matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { /* */ }
      if (reduce) return;
--    const added = Array.prototype.slice.call(container.children, first);
      added.forEach((el, i) => {
          el.classList.add('ov-enter');
          el.style.setProperty('--ov-enter-i', String(Math.min(i, 11)));

diff --git a/public/index.html b/public/index.html

index 332a46a6..bd746da2 100644

--- a/public/index.html

+++ b/public/index.html

@@ -5095,7 +5095,7 @@ curl -s https://openvibe.media/live/@Goosely/chat-insight.json | jq ".chat_insig

-<script src="/js/app.js?v=172" defer></script>

+<script src="/js/app.js?v=173" defer></script>

diff --git a/public/js/app.js b/public/js/app.js

index 83020380..9dbee81a 100644

--- a/public/js/app.js

+++ b/public/js/app.js

@@ -965,10 +965,20 @@ function ovPutCards(container, html, append) {

if (!append) { container.innerHTML = html; return; }

const first = container.children.length;

container.insertAdjacentHTML('beforeend', html);

+ const added = Array.prototype.slice.call(container.children, first);

+ // home-fx runs its own scroll-reveal over every .stream-card on the home page and parks each

+ // one at opacity 0 until it is scrolled to. That is right for cards the reader is scrolling

+ // toward and wrong for cards they just asked for by name. Worse, the two animations fight:

+ // when .ov-enter is cleaned up below, a card that had not been revealed yet would drop back

+ // to opacity 0 and disappear. Marking these as already revealed makes attachReveal() skip

+ // them — it early-returns on .hfx-reveal — and leaves them opaque underneath, so .ov-enter is

+ // the only thing animating.

+ added.forEach(el => el.classList.add('hfx-reveal', 'is-in'));

let reduce = false;

try { reduce = matchMedia('(prefers-reduced-motion: reduce)').matches; } catch { /* */ }

if (reduce) return;

- const added = Array.prototype.slice.call(container.children, first);

added.forEach((el, i) => {

el.classList.add('ov-enter');

el.style.setProperty('--ov-enter-i', String(Math.min(i, 11)));