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

feat: Add ambient animations for feature icons and update scroll-delay logic for card entrance

Browse Source
This commit is contained in:
Matt Batchelder
2026-03-22 01:45:38 -04:00
parent b14e137933
commit d120bec8ce
2 changed files with 46 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

9
theme/assets/js/demo-animator.js
View File

@@ -17,15 +17,16 @@
if (window.matchMedia('(prefers-reduced-motion: reduce)').matches) return;
// 1. Assign incrementing --scroll-delay to every card within a feature-section.
// The block renders .grid-2/.grid-3/.grid-4 wrappers (no .feature-section class).
// main.js's .scroll-visible rule reads this via var(--scroll-delay, 0s).
document.querySelectorAll('.feature-section').forEach(function (section) {
section.querySelectorAll('.oribi-card').forEach(function (card, i) {
document.querySelectorAll('.grid-2, .grid-3, .grid-4').forEach(function (grid) {
grid.querySelectorAll('.oribi-card').forEach(function (card, i) {
card.style.setProperty('--scroll-delay', (i * STAGGER).toFixed(2) + 's');
});
});
// 2. Watch for scroll-visible being added to each card.
var cards = document.querySelectorAll('.feature-section .oribi-card');
var cards = document.querySelectorAll('.grid-2 .oribi-card, .grid-3 .oribi-card, .grid-4 .oribi-card');
if (!cards.length) return;
var mo = new MutationObserver(function (mutations) {
@@ -44,6 +45,8 @@
icon.addEventListener('animationend', function () {
icon.classList.remove('icon-pop');
icon.style.animationDelay = '';
// Start ambient float+ring animation once the pop-in finishes.
card.classList.add('is-animated');
}, { once: true });
}