Is `animate*AsState` somehow usable from Compose HTML? Thanks.

# compose-web

[Norbi]

Is animate*AsState somehow usable from Compose HTML? Thanks.

[David Herman]

It is not. Animations in Compose HTML are done through CSS transitions (simpler) and/or keyframed animations (complex but powerful).

https://developer.mozilla.org/en-US/docs/Web/CSS/transition
https://developer.mozilla.org/en-US/docs/Web/CSS/animation

You may be interested in my project Kobweb, which has built some support on top of these fundamental web concepts.

https://github.com/varabyte/kobweb#animations
Transition example from my blog site

[Robert Jaros]

I wouldn't say it is correct. You can use compose animations in compose html. I suppose you can use it in any compose based applicaton. I've tested a simple example in compose html and in my kilua framework (with js target). The only issue is probably the bundle size, but it doesn't seem to be very large addon (about 50KB).

[Norbi]

@Robert Jaros which dependency have you used? simply androidx.compose.animation:animation ? it does not seem to work in multiplatform projects 😐

[Robert Jaros]

It works for me.

sourceSets {
        val jsMain by getting {
            dependencies {
                implementation(compose.html.core)
                implementation(compose.runtime)
                implementation(compose.animation)
            }
        }
    }

[Robert Jaros]

kotlin.version=1.9.21
compose.version=1.5.11

[Robert Jaros]

Had to add org.jetbrains.compose.experimental.jscanvas.enabled=true

[Robert Jaros]

And something like this:

var enabled by mutableStateOf(true)
    val alpha: Float by animateFloatAsState(if (enabled) 1f else 0.1f, tween(1000))

            Div(attrs = {
                style {
                    width(400.px)
                    color(rgba(255, 0, 0, alpha))
                }
            }) {
                Text(info.value)
            }

[David Herman]

Wow, that's Compose HTML? Interesting, thanks

[David Herman]

I wonder what it needs jscanvas for?

[Robert Jaros]

There are some issues with dependencies. Compose animations depend on ui and skiko and probably some more advanced animations will not work with plain compose html.

[Robert Jaros]

Still even this one function (animateFloatAsState) is enough to make some nice effects, especially with the ability to use many different compose animation specs.

[David Herman]

Yeah the compose animation APIs are really nice.