Transitions#

Keywords: ui transitions, animations, live transitions, fade slide transitions

Asok provides a native transition system to add smooth animations to your UI. Transitions work with the Reactive Engine, WebSockets, and SPA navigation.

Overview#

Transitions in Asok are independent and opt-in. The JavaScript and CSS required for animations are only injected into the page if the asok-transition attribute is detected in your template.

✨ New in v0.1.6: Enhanced transitions with easing curves, 3 new transition types, and full SPA page transitions.

Usage#

Block Transitions#

To animate an element during a swap, add the asok-transition attribute to it.

<div id="content" asok-transition="fade">
    Initial Content
</div>

<button data-url="/update" data-block="content">
    Update
</button>

Supported Types#

Asok comes with 10 built-in transition types and directional variants using easing curves:

Transition Shorthand & Duration#

You can specify the transition configuration in the attribute using a flexible shorthand syntax:

1. Customizing Duration (Symmetric)#

Specify the duration in milliseconds as the second parameter (applies to both enter and leave):

<!-- Slow fade (600ms) -->
<div asok-transition="fade 600">...</div>

<!-- Fast slide (150ms) -->
<div asok-transition="slide 150">...</div>

<!-- Elastic bounce (400ms) -->
<div asok-transition="bounce 400">...</div>

2. Asymmetric Configurations (Enter vs Leave) ⭐ NEW#

You can declare different effects and durations for the entering and leaving phases directly in a single attribute:

<!-- Different effects and durations -->
<!-- Enters with slide (200ms), leaves with fade (150ms) -->
<div asok-transition="slide 200 fade 150">...</div>

<!-- Same effect, different durations -->
<!-- Enters at 300ms, leaves at 150ms -->
<div asok-transition="slide 300 150">...</div>

<!-- Different effects, default duration (300ms) -->
<!-- Enters with slide-right, leaves with fade -->
<div asok-transition="slide-right fade">...</div>

Page Transitions (SPA Router Navigation)#

Add fluid, jump-free page transitions during SPA navigation. Simply add asok-transition to your <main asok-router> or individual route templates <template asok-route="..." asok-transition="...">.

Deterministic Stacking Mechanism#

Asok enforces a deterministic 3D stacking model during route swaps: 1. Leaving View: Ancircled at position: absolute; top: 0px; left: 0px; width: 100%; z-index: 1; pointer-events: none relative to the container before inserting the new view. 2. Entering View: Placed in the DOM at position: relative; z-index: 2; width: 100%. 3. Container Height Lock: Container locks min-height during the crossfade/slide duration to prevent layout jumps or height collapse. 4. Exact Duration Sync: CSS animation rules use unbundled transition-property and transition-timing-function, ensuring your exact inline JS duration (e.g. 200ms, 150ms) is 100% honored by the browser without MID-animation truncations.

Basic Usage#

<!-- Single transition for all routes -->
<main asok-router asok-transition="slide-left 200">
    <template asok-route="/">
        <div class="p-6">Accueil</div>
    </template>

    <template asok-route="/contact" asok-transition="slide-right 250">
        <div class="p-6">Contact</div>
    </template>
</main>

Available Page Transitions#

<!-- Fade (Opacity 0 -> 1) -->
<template asok-route="/about" asok-transition="fade 200">

<!-- Slide Left (Right-to-left slide) -->
<template asok-route="/contact" asok-transition="slide-left 200">

<!-- Slide Right (Left-to-right slide) -->
<template asok-route="/services" asok-transition="slide-right 200">

<!-- Scale & Fade -->
<template asok-route="/dashboard" asok-transition="scale 250">

<!-- Fly from bottom -->
<template asok-route="/profile" asok-transition="fly 300">

✨ Result: Buttery-smooth SPA page transitions on every navigation, 0 layout jump, 0 flash, 0 z-index clash!

How it Works#

When a swap is triggered (via data-block, ws-*, or data-sse), the framework: 1. Detects if the target element has an asok-transition attribute. 2. Applies a leaving class to the old content. 3. Performs the actual DOM swap after the "out" animation finishes. 4. Applies an entering class to the new content to trigger the "in" animation.

WebSocket Support#

Transitions work automatically with Alive Components. If your component root or any internal block has the attribute, updates pushed via WebSocket will be animated.

# In a component or page
from asok import Request

def render(request: Request):
    return f"""
    <div id="live-clock" asok-transition="fade">
        {datetime.now()}
    </div>
    """

Professional Easing Curves#

Asok uses optimized cubic-bezier curves for ultra-smooth animations:

:root {
  --ease-out-quart: cubic-bezier(0.25, 1, 0.5, 1);
  --ease-out-expo: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-in-out-back: cubic-bezier(0.68, -0.6, 0.32, 1.6);
}

These are the same curves used by modern frameworks like SvelteKit and Framer Motion for buttery-smooth animations.

CSS Customization#

The framework injects standard CSS classes. You can override them in your own stylesheets for custom effects:

Block transitions: - .asok-fade-out, .asok-fade-in - .asok-slide-out, .asok-slide-in - .asok-slide-left-out, .asok-slide-left-in ⭐ NEW - .asok-slide-right-out, .asok-slide-right-in ⭐ NEW - .asok-slide-up-out, .asok-slide-up-in ⭐ NEW - .asok-slide-down-out, .asok-slide-down-in ⭐ NEW - .asok-scale-out, .asok-scale-in - .asok-fly-out, .asok-fly-in - .asok-blur-out, .asok-blur-in - .asok-bounce-out, .asok-bounce-in

Page transitions: - .asok-page-out, .asok-page-in

State classes: - .is-leaving, .is-entering

Custom Transition Example#

/* Override slide transition with your own effect */
.asok-slide-out.is-leaving {
  transform: translateX(-50px) rotate(-5deg);
  opacity: 0;
  transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.asok-slide-in.is-entering {
  transform: translateX(0) rotate(0);
  opacity: 1;
  transition: all 400ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

Performance Tips#

1. Use fade or page for best performance - they only animate opacity and scale (GPU-accelerated).
2. Avoid blur on low-end devices - filter effects can be CPU-intensive.
3. Keep durations under 400ms - users expect fast transitions in web apps.
4. Test on mobile - animations should feel just as smooth on phones.

Comparison with SvelteKit#