5 min read

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:

Type	Description	Easing
`fade`	Smooth opacity transition (default).	`ease-out`
`slide`	Horizontal slide and fade effect (right to left).	`cubic-bezier(0.16, 1, 0.3, 1)` (expo)
`slide-left` ⭐	Slide in/out from/to the left edge.	`cubic-bezier(0.16, 1, 0.3, 1)` (expo)
`slide-right` ⭐	Slide in/out from/to the right edge.	`cubic-bezier(0.16, 1, 0.3, 1)` (expo)
`slide-up` ⭐	Slide in/out from/to the top edge.	`cubic-bezier(0.16, 1, 0.3, 1)` (expo)
`slide-down` ⭐	Slide in/out from/to the bottom edge.	`cubic-bezier(0.16, 1, 0.3, 1)` (expo)
`scale`	Subtle scale up/down with fade.	`cubic-bezier(0.25, 1, 0.5, 1)` (quart)
`fly`	Vertical fly in/out effect (bottom to top).	`cubic-bezier(0.16, 1, 0.3, 1)` (expo)
`blur`	Blur and fade (modern, subtle).	`ease-out`
`bounce`	Elastic bounce effect.	`cubic-bezier(0.68, -0.6, 0.32, 1.6)` (back)

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>

Add fluid page transitions during SPA navigation, just like SvelteKit! Simply add data-asok-page-transition to your main content container.

Basic Usage#

<!-- In your base template (e.g., base.html) -->
<main data-asok-page-transition="page">
    {% block content %}{% endblock %}
</main>

Now every SPA navigation will have a smooth fade + scale transition!

Available Page Transitions#

<!-- Default: Subtle scale + fade (recommended) -->
<main data-asok-page-transition="page">

<!-- Pure fade -->
<main data-asok-page-transition="fade">

<!-- Fly from bottom -->
<main data-asok-page-transition="fly">

<!-- Bounce effect -->
<main data-asok-page-transition="bounce">

<!-- Custom duration (250ms default) -->
<main data-asok-page-transition="page 400">

Complete Example#

<!DOCTYPE html>
<html>
<head>
    <title>My App</title>
</head>
<body>
    <nav>
        <a href="/" data-block="content" data-push-url>Home</a>
        <a href="/about" data-block="content" data-push-url>About</a>
    </nav>

    <!-- Page transitions enabled -->
    <main id="content" data-asok-page-transition="page 300">
        {% block content %}{% endblock %}
    </main>
</body>
</html>

✨ Result: Smooth page transitions on every navigation, with automatic scroll-to-top!

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#

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

Comparison with SvelteKit#

Feature	SvelteKit	Asok v0.1.6
Built-in transitions	7 types	10 types/variants
Custom easing	✅	✅
Duration control	✅	✅
Page transitions	✅	✅
GPU acceleration	✅	✅
Bundle size	~15KB	~3.5KB minified

Was this page helpful?

Previous Reactive Components Next Html Streaming