## 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(--color_fill_secondary);
                        border-radius: 12px;
                        text-align: center;
                    "
                >
                    <h4>Scroll to Reveal</h4>
                    <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="countdown-days"
                    style="
                        padding: 16px 24px;
                        background: var(--color_fill_primary);
                        color: white;
                        border-radius: 8px;
                    "
                >
                    00
                </span>
                <span
                    class="countdown-hours"
                    style="
                        padding: 16px 24px;
                        background: var(--color_fill_primary);
                        color: white;
                        border-radius: 8px;
                    "
                >
                    00
                </span>
                <span
                    class="countdown-minutes"
                    style="
                        padding: 16px 24px;
                        background: var(--color_fill_primary);
                        color: white;
                        border-radius: 8px;
                    "
                >
                    00
                </span>
                <span
                    class="countdown-seconds"
                    style="
                        padding: 16px 24px;
                        background: var(--color_fill_primary);
                        color: white;
                        border-radius: 8px;
                    "
                >
                    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="countdown-days"
                        style="
                            font-size: 48px;
                            font-weight: 700;
                            color: var(--color_fill_primary);
                        "
                    >
                        00
                    </div>
                    <div
                        style="
                            font-size: 12px;
                            text-transform: uppercase;
                            opacity: 0.7;
                        "
                    >
                        Days
                    </div>
                </div>
                <div>
                    <div
                        class="countdown-hours"
                        style="
                            font-size: 48px;
                            font-weight: 700;
                            color: var(--color_fill_primary);
                        "
                    >
                        00
                    </div>
                    <div
                        style="
                            font-size: 12px;
                            text-transform: uppercase;
                            opacity: 0.7;
                        "
                    >
                        Hours
                    </div>
                </div>
                <div>
                    <div
                        class="countdown-minutes"
                        style="
                            font-size: 48px;
                            font-weight: 700;
                            color: var(--color_fill_primary);
                        "
                    >
                        00
                    </div>
                    <div
                        style="
                            font-size: 12px;
                            text-transform: uppercase;
                            opacity: 0.7;
                        "
                    >
                        Minutes
                    </div>
                </div>
                <div>
                    <div
                        class="countdown-seconds"
                        style="
                            font-size: 48px;
                            font-weight: 700;
                            color: var(--color_fill_primary);
                        "
                    >
                        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.

Loading...

HTML

    <!-- Preloader overlay -->
            <div
                class="preloader"
                data-ss="preloader"
                data-ss-preloader-timeout="500"
                data-ss-preloader-min-display="300"
                style="
                    position: fixed;
                    inset: 0;
                    background: rgba(255, 255, 255, 0.95);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9999;
                "
            >
                <div class="preloader__content" style="text-align: center">
                    <div
                        class="preloader__spinner"
                        style="
                            width: 48px;
                            height: 48px;
                            border: 4px solid var(--color_fill_secondary);
                            border-top-color: var(--color_fill_primary);
                            border-radius: 50%;
                            animation: spin 1s linear infinite;
                        "
                    ></div>
                    <p style="margin-top: 16px; opacity: 0.7">Loading...</p>
                </div>
            </div>

            <!-- Preloader with logo -->
            <div
                class="preloader"
                data-ss="preloader"
                data-ss-preloader-timeout="1000"
                style="
                    position: fixed;
                    inset: 0;
                    background: var(--color_fill_primary);
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    z-index: 9999;
                "
            >
                <div style="text-align: center; color: white">
                    <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: rgba(255, 255, 255, 0.3);
                            border-radius: 2px;
                            overflow: hidden;
                        "
                    >
                        <div
                            style="
                                width: 60%;
                                height: 100%;
                                background: white;
                                animation: loading 1.5s ease-in-out infinite;
                            "
                        ></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"
                data-ss-progress-value="75"
                data-ss-progress-animate="true"
                data-ss-progress-duration="1000"
                style="
                    height: 8px;
                    background: var(--color_fill_secondary);
                    border-radius: 4px;
                    overflow: hidden;
                "
            >
                <div
                    class="progress__bar"
                    style="
                        height: 100%;
                        width: 0%;
                        background: var(--color_fill_primary);
                        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>Upload Progress</span>
                    <span class="progress__value">45%</span>
                </div>
                <div
                    data-ss="progress"
                    data-ss-progress-value="45"
                    data-ss-progress-animate="true"
                    style="
                        height: 12px;
                        background: var(--color_fill_secondary);
                        border-radius: 6px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress__bar"
                        style="
                            height: 100%;
                            width: 0%;
                            background: linear-gradient(
                                90deg,
                                var(--color_fill_primary),
                                #764ba2
                            );
                        "
                    ></div>
                </div>
            </div>

            <!-- Segmented progress -->
            <div style="margin-top: 24px; display: flex; gap: 4px">
                <div
                    data-ss="progress"
                    data-ss-progress-value="100"
                    style="
                        flex: 1;
                        height: 8px;
                        background: var(--color_fill_secondary);
                        border-radius: 4px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress__bar"
                        style="
                            height: 100%;
                            width: 0%;
                            background: var(--color_state_success);
                        "
                    ></div>
                </div>
                <div
                    data-ss="progress"
                    data-ss-progress-value="100"
                    style="
                        flex: 1;
                        height: 8px;
                        background: var(--color_fill_secondary);
                        border-radius: 4px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress__bar"
                        style="
                            height: 100%;
                            width: 0%;
                            background: var(--color_state_success);
                        "
                    ></div>
                </div>
                <div
                    data-ss="progress"
                    data-ss-progress-value="60"
                    style="
                        flex: 1;
                        height: 8px;
                        background: var(--color_fill_secondary);
                        border-radius: 4px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress__bar"
                        style="
                            height: 100%;
                            width: 0%;
                            background: var(--color_state_warning);
                        "
                    ></div>
                </div>
                <div
                    data-ss="progress"
                    data-ss-progress-value="0"
                    style="
                        flex: 1;
                        height: 8px;
                        background: var(--color_fill_secondary);
                        border-radius: 4px;
                        overflow: hidden;
                    "
                >
                    <div
                        class="progress__bar"
                        style="
                            height: 100%;
                            width: 0%;
                            background: var(--color_fill_primary);
                        "
                    ></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>

- Latest update: Stylescape v0.1 now live!
- New components released today.
- 💡 Tip: Use mixins for modular SCSS!