This video builds a grid of cards that swap their visible content for a second, hidden layer when you hover or click them.
Reveal, not scroll animation
It is worth being precise about what this format does, because the name invites a wrong guess. VVJR is not a scroll-into-view animation. It is a two-layer card: a displayed side and a revealed side, swapped by user interaction. You mark the boundary by placing a field that outputs <div class="vvjr-separator"></div> between the two groups of fields in your View.
The settings you will use
- Responsive Settings → Available Breakpoints for Reveal: all, or 576, 768, 992, 1200 or 1400 px.
- Dimensions → Box Min Width (px), Box Height (in pixels) and Grid Gap (px), which together decide how many cards land per row.
- Reveal Settings → Reveal Style for the animation, Reveal Method for Hover or Click, Reveal Speed (seconds) from 0.1 to 2, and Animation Easing with Linear, Ease, Ease-in, Ease-out and Ease-in-out.
- Color Settings → separate Displayed Side Background Color and Revealed Side Background Color.
Below the breakpoint, and why that matters
Hover does not exist on a touch screen, so under the chosen breakpoint the reveal is disabled outright: both sides render, and every nested element goes back into the tab order. Above it, aria-hidden and tabindex follow the revealed state, and a throttled resize handler re-syncs when the window changes.
Cost on the page
Hydration is deferred by an IntersectionObserver, so a grid far down a long page does nothing until it approaches the viewport. Listeners are registered against an AbortController and torn down on unload, which is what keeps repeated AJAX navigation from leaking handlers.
Requirements
Read from vvjr.info.yml: core ^11.3 || ^12, php: 8.3, with Views, Filter and VVJ Core as declared dependencies. There is no deep-linking section here.
Next
See the Views Reveal module page, and on keeping deferred content off the critical path, read Improving Largest Contentful Paint.
Need this built into your own site? See Drupal development services, or request a quote.
