Scroll Reveals
Fade, slide, and stagger entrances (Lightweight) and clip-path reveals (Premium), triggered by IntersectionObserver. Parallax requires GSAP.
Scroll reveals span tiers. Fade / slide entrances and stagger are Lightweight (css/animations.css). Clip-path reveals are Premium (css/premium-effects.css). Parallax has no shipped BDS driver — drive it with GSAP (see below). Reveals are triggered by toggling .is-visible when the element enters the viewport — a plain IntersectionObserver, no library required for the trigger itself.
See Lightweight tier for the observer snippet and import order.
Clip-path reveals Premium
Cinematic unveils for images and section containers, defined in css/premium-effects.css. Each class sets a clip-path starting state and transitions to the revealed state when .is-visible is applied. They need no JS library — load premium-effects.css and the same observer snippet.
| Class | Effect |
|---|---|
.clip-circle-reveal | Circle expand from center |
.clip-curtain-reveal | Curtain drops from top |
.clip-wipe-reveal | Horizontal wipe left to right |
.clip-rise-reveal | Rise from bottom |
.clip-diagonal-reveal | Diagonal sweep |
.clip-diamond-reveal | Diamond expand from center |
<!-- Circle expand from center -->
<div class="clip-circle-reveal" data-reveal>
<img src="photo.jpg" alt="...">
</div>
<!-- Curtain drops from top -->
<div class="clip-curtain-reveal" data-reveal>
<img src="hero.jpg" alt="...">
</div>
<!-- Horizontal wipe left to right -->
<div class="clip-wipe-reveal" data-reveal>
<img src="interior.jpg" alt="...">
</div>
<!-- Rise from bottom -->
<div class="clip-rise-reveal" data-reveal>
<img src="portrait.jpg" alt="...">
</div>
<!-- Diagonal sweep -->
<div class="clip-diagonal-reveal" data-reveal>
<img src="building.jpg" alt="...">
</div>
<!-- Diamond expand from center -->
<div class="clip-diamond-reveal" data-reveal>
<img src="award.jpg" alt="...">
</div>Fade and slide reveals Lightweight
Standard scroll entrance classes for text, cards, and content blocks — in css/animations.css.
| Class | Effect |
|---|---|
.animate-fade-up | opacity + translateY(20px → 0) |
.animate-fade-down | opacity + translateY(-20px → 0) |
.animate-fade-left | opacity + translateX(-20px → 0) |
.animate-fade-right | opacity + translateX(20px → 0) |
<h2 class="animate-fade-up" data-reveal>Section heading</h2>
<p class="animate-fade-up" data-reveal>Body text underneath</p>
<img class="animate-fade-left" data-reveal src="photo.jpg" alt="...">Stagger pattern Lightweight
Pair each child with a .bds-stagger-1 through .bds-stagger-6 class (from tokens/motion-classes.css) to offset its reveal. Combine with an entrance class and data-reveal.
<div class="bds-enter-fade bds-stagger-1" data-reveal>Card 1</div>
<div class="bds-enter-fade bds-stagger-2" data-reveal>Card 2</div>
<div class="bds-enter-fade bds-stagger-3" data-reveal>Card 3</div>For dynamic stagger (item count unknown at build time), use GSAP ScrollTrigger.batch(). See GSAP tier.
Parallax GSAP
No standalone BDS parallax driver ships today. The .parallax-container / .parallax-element CSS scaffolding exists in css/animations.css, but no BDS JavaScript reads data-parallax-speed — the classes alone do not move anything. Drive parallax with GSAP ScrollTrigger (the GSAP tier) until a helper ships.
// Parallax via GSAP ScrollTrigger — bring the scaffolding classes, drive with GSAP
gsap.to('.parallax-element', {
yPercent: -20,
ease: 'none',
scrollTrigger: { trigger: '.parallax-container', scrub: true },
});Related
- Lightweight Tier — the observer snippet + import order
- Hover Effects
- GSAP Tier — for scroll-scrubbed reveals