Animations
JavaScript animation components for content reveal, countdowns, preloaders, and progress bars.
Content Revealer
Reveals content with fade-in effects. Supports scroll-triggered reveal via IntersectionObserver.
This content fades in when the page loads.
This content fades in after 300ms.
Scroll to Reveal
This content appears when scrolled into view.
HTML
<!-- Basic reveal on page load -->
<div
data-ss="reveal"
data-ss-reveal-delay="0"
data-ss-reveal-duration="500"
>
<p>This content fades in when the page loads.</p>
</div>
<!-- Reveal with delay -->
<div
data-ss="reveal"
data-ss-reveal-delay="300"
data-ss-reveal-duration="500"
>
<p>This content fades in after 300ms.</p>
</div>
<!-- Scroll-triggered reveal -->
<div
data-ss="reveal"
data-ss-reveal-on-scroll="true"
data-ss-reveal-duration="600"
>
<div
style="
padding: 40px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-lg);
text-align: center;
"
>
<h3>Scroll to Reveal</h3>
<p>This content appears when scrolled into view.</p>
</div>
</div>Countdown Timer
Displays countdown to a target date/time with customizable format.
00
00
00
00
00
Days
00
Hours
00
Minutes
00
Seconds
HTML
<!-- Countdown to a specific date -->
<div
data-ss="countdown"
data-ss-countdown-end-time="2026-12-31T00:00:00"
data-ss-countdown-format="DD:HH:MM:SS"
data-ss-countdown-complete-text="Happy New Year!"
style="
display: flex;
gap: 16px;
justify-content: center;
font-size: 24px;
font-weight: 600;
"
>
<span
class="ss-c-countdown-days"
style="
padding: 16px 24px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
"
>
00
</span>
<span
class="ss-c-countdown-hours"
style="
padding: 16px 24px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
"
>
00
</span>
<span
class="ss-c-countdown-minutes"
style="
padding: 16px 24px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
"
>
00
</span>
<span
class="ss-c-countdown-seconds"
style="
padding: 16px 24px;
background: var(--ss-color-accent);
color: var(--ss-color-on-accent);
border-radius: var(--ss-radius-lg);
"
>
00
</span>
</div>
<!-- Countdown with labels -->
<div
data-ss="countdown"
data-ss-countdown-end-time="2026-06-15T09:00:00"
style="
display: flex;
gap: 24px;
justify-content: center;
text-align: center;
"
>
<div>
<div
class="ss-c-countdown-days"
style="
font-size: 48px;
font-weight: 700;
color: var(--ss-color-accent);
"
>
00
</div>
<div
style="
font-size: 12px;
text-transform: uppercase;
opacity: 0.7;
"
>
Days
</div>
</div>
<div>
<div
class="ss-c-countdown-hours"
style="
font-size: 48px;
font-weight: 700;
color: var(--ss-color-accent);
"
>
00
</div>
<div
style="
font-size: 12px;
text-transform: uppercase;
opacity: 0.7;
"
>
Hours
</div>
</div>
<div>
<div
class="ss-c-countdown-minutes"
style="
font-size: 48px;
font-weight: 700;
color: var(--ss-color-accent);
"
>
00
</div>
<div
style="
font-size: 12px;
text-transform: uppercase;
opacity: 0.7;
"
>
Minutes
</div>
</div>
<div>
<div
class="ss-c-countdown-seconds"
style="
font-size: 48px;
font-weight: 700;
color: var(--ss-color-accent);
"
>
00
</div>
<div
style="
font-size: 12px;
text-transform: uppercase;
opacity: 0.7;
"
>
Seconds
</div>
</div>
</div>Preloader
Manages a preloader element during page load with automatic hiding.
HTML
<!-- Preloader overlay -->
<!-- Demo frame: the transform contains the fixed overlay to this box -->
<div
style="
position: relative;
height: 220px;
margin-bottom: 16px;
overflow: hidden;
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
transform: translateZ(0);
"
>
<div
class="ss-c-preloader"
data-ss="preloader"
aria-label="Loading page"
data-ss-preloader-timeout="500"
data-ss-preloader-min-display="300"
style="
position: fixed;
inset: 0;
background: var(--ss-color-background);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
"
>
<div class="ss-c-preloader__content" style="text-align: center">
<div
class="ss-c-preloader__spinner"
style="
width: 48px;
height: 48px;
border: 4px solid var(--ss-color-surface-alt);
border-top-color: var(--ss-color-accent);
border-radius: 50%;
animation: spin 1s linear infinite;
"
></div>
<p style="margin-top: 16px; opacity: 0.7">Loading...</p>
</div>
</div>
</div>
<!-- Preloader with logo -->
<div
style="
position: relative;
height: 220px;
margin-bottom: 16px;
overflow: hidden;
border: 1px solid var(--ss-color-border);
border-radius: var(--ss-radius-lg);
transform: translateZ(0);
"
>
<div
class="ss-c-preloader"
data-ss="preloader"
role="status"
aria-label="Loading application"
data-ss-preloader-timeout="1000"
style="
position: fixed;
inset: 0;
background: var(--ss-color-accent);
display: flex;
align-items: center;
justify-content: center;
z-index: 9999;
"
>
<div style="text-align: center; color: var(--ss-color-on-accent)">
<svg
width="64"
height="64"
viewBox="0 0 24 24"
fill="currentColor"
>
<path
d="M12 2L2 7l10 5 10-5-10-5zM2 17l10 5 10-5M2 12l10 5 10-5"
/>
</svg>
<div
style="
margin-top: 24px;
width: 120px;
height: 4px;
background: color-mix(in srgb, var(--ss-color-on-accent) 30%, transparent);
border-radius: var(--ss-radius-sm);
overflow: hidden;
"
>
<div
style="
width: 60%;
height: 100%;
background: var(--ss-color-on-accent);
animation: loading 1.5s ease-in-out infinite;
"
></div>
</div>
</div>
</div>
</div>Progress Bar Manager
Controls progress bar UI with animation support.
Upload Progress
45%
HTML
<!-- Basic animated progress -->
<div
data-ss="progress"
role="progressbar"
aria-label="Animated progress"
aria-valuemin="0"
aria-valuemax="100"
aria-valuenow="75"
data-ss-progress-value="75"
data-ss-progress-animate="true"
data-ss-progress-duration="1000"
style="
height: 8px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress__bar"
style="
height: 100%;
width: 0%;
background: var(--ss-color-accent);
transition: width 1s ease;
"
></div>
</div>
<!-- Progress with label -->
<div style="margin-top: 24px">
<div
style="
display: flex;
justify-content: space-between;
margin-bottom: 8px;
"
>
<span id="upload-progress-label">Upload Progress</span>
<span class="ss-c-progress__value">45%</span>
</div>
<div
data-ss="progress"
aria-labelledby="upload-progress-label"
data-ss-progress-value="45"
data-ss-progress-animate="true"
style="
height: 12px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress__bar"
style="
height: 100%;
width: 0%;
background: linear-gradient(
90deg,
var(--ss-color-accent),
#764ba2
);
"
></div>
</div>
</div>
<!-- Segmented progress -->
<div style="margin-top: 24px; display: flex; gap: 4px">
<div
data-ss="progress"
role="progressbar"
aria-label="Step 1 of 4"
aria-valuemin="0"
aria-valuemax="100"
data-ss-progress-value="100"
style="
flex: 1;
height: 8px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress__bar"
style="
height: 100%;
width: 0%;
background: var(--ss-color-success);
"
></div>
</div>
<div
data-ss="progress"
role="progressbar"
aria-label="Step 2 of 4"
aria-valuemin="0"
aria-valuemax="100"
data-ss-progress-value="100"
style="
flex: 1;
height: 8px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress__bar"
style="
height: 100%;
width: 0%;
background: var(--ss-color-success);
"
></div>
</div>
<div
data-ss="progress"
role="progressbar"
aria-label="Step 3 of 4"
aria-valuemin="0"
aria-valuemax="100"
data-ss-progress-value="60"
style="
flex: 1;
height: 8px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress__bar"
style="
height: 100%;
width: 0%;
background: var(--ss-color-warning);
"
></div>
</div>
<div
data-ss="progress"
role="progressbar"
aria-label="Step 4 of 4"
aria-valuemin="0"
aria-valuemax="100"
data-ss-progress-value="0"
style="
flex: 1;
height: 8px;
background: var(--ss-color-surface-alt);
border-radius: var(--ss-radius-md);
overflow: hidden;
"
>
<div
class="ss-c-progress__bar"
style="
height: 100%;
width: 0%;
background: var(--ss-color-accent);
"
></div>
</div>
</div>JavaScript API
Programmatic control of animation components.
JavaScript
<script>
// ContentRevealer - Programmatic reveal
import { ContentRevealer } from "stylescape";
const revealer = new ContentRevealer(element, {
delay: 300,
duration: 500,
onScroll: true,
});
revealer.reveal(); // Trigger reveal manually
// CountdownTimer - Dynamic countdown
import { CountdownTimer } from "stylescape";
const countdown = new CountdownTimer(element, {
endTime: new Date("2026-12-31"),
format: "DD:HH:MM:SS",
onComplete: () => console.log("Countdown finished!"),
});
countdown.start();
countdown.pause();
countdown.reset();
// ProgressBarManager - Update progress
import { ProgressBarManager } from "stylescape";
const progress = new ProgressBarManager(element, {
value: 0,
animate: true,
duration: 500,
});
progress.setValue(75); // Animate to 75%
progress.increment(10); // Add 10%
</script>