OTSSigns/OTSSigns-Website
1
0
Fork 0
Code Issues Pull Requests 6 Actions Packages Projects Releases Wiki Activity

Fix scroll-reveal animation flicker by adding !important and disabling transitions

Browse Source
This commit is contained in:
Matt Batchelder
2026-02-21 18:44:58 -05:00
parent 668c92aff6
commit 97bbe90ed1
1 changed files with 11 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
theme/assets/css/main.css
View File

@@ -99,13 +99,21 @@ a:hover { color: var(--color-primary); }
/* ── Scroll-reveal animation classes ───────────────────────── */ /* ── Scroll-reveal animation classes ───────────────────────── */
.scroll-hidden { .scroll-hidden {
opacity: 0; opacity: 0 !important;
transform: translateY(24px); transform: translateY(24px) !important;
/* Prevent transition: all on card elements from animating the hide,
which would cause a visible fade-out flicker and race conditions
with IntersectionObserver — especially after Gutenberg re-saves
inject inline styles onto the block element. */
transition: none !important;
} }
.scroll-visible { .scroll-visible {
opacity: 1; opacity: 1;
transform: translateY(0); transform: translateY(0);
transition: opacity .5s ease, transform .5s ease; /* !important ensures this wins over transition: all on .oribi-card
(same selector specificity, but .oribi-card appears later in the
stylesheet and would otherwise override this). */
transition: opacity .5s ease, transform .5s ease !important;
} }
/* Smooth theme transition */ /* Smooth theme transition */