🎭 stew/anim

Predefined Animations

Stew provides ready-to-use functions for the most common effects.

<goscript client>
    import "stew/anim"
    import "time"

    showNotify := func() {
        anim.FadeIn("#toast", 300*time.Millisecond)
        anim.SlideIn("#toast", anim.Top, 500*time.Millisecond)
    }

    warnUser := func() {
        anim.Shake("#login-form", 200*time.Millisecond)
        anim.Pulse("#login-form", 500*time.Millisecond)
    }

    hideNotify := func() {
        anim.FadeOut("#toast", 300*time.Millisecond)
    }
</goscript>

Slide Directions

The SlideIn function uses the anim.Direction type to ensure direction validity.

Custom Transitions

The Transition method allows you to imperatively transition from one CSS state to another.

<goscript client>
    import "stew/anim"
    import "time"

    expandCard := func() {
        anim.Transition("#card", 
            "height: 100px; opacity: 0.5", 
            "height: 300px; opacity: 1", 
            400*time.Millisecond)
    }
</goscript>

Low-Level API (Keyframes)

For total control, use Animate, which interfaces directly with the native API.

<goscript client>
    import "stew/anim"

    customAnim := func() {
        keyframes := []map[string]any{
            {"transform": "rotate(0deg)", "backgroundColor": "red"},
            {"transform": "rotate(180deg)", "backgroundColor": "blue"},
            {"transform": "rotate(360deg)", "backgroundColor": "green"},
        }
        options := map[string]any{
            "duration": 2000,
            "iterations": 3,
        }
        anim.Animate("#box", keyframes, options)
    }
</goscript>