What's the recommended way of doing animations in Compose Web?

# compose-web

[CLOVIS]

What's the recommended way of doing animations in Compose Web?

[Big Chungus]

Good old css keyframes for dom api

[CLOVIS]

That just means I have to write my own API for JS animations, right? 😇

[Big Chungus]

No, that just means regular css keyframes

[Big Chungus]

And then applying the class to components you want to animate

[Big Chungus]

https://www.w3schools.com/css/css3_animations.asp

[jw]

I use transitions https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions

[CLOVIS]

Well, it turns out writing an approximation of animateFloatAsState works incredibly well

Code:
https://gitlab.com/opensavvy/formulaide/-/merge_requests/47/diffs?commit_id=63f72c239677f8631f44c12c3397a800cb812128

Demo: https://47.formulaide.girardet.dev/beta/index.html?home

[CLOVIS]

I don't have a need for anything more complicated than simple fades, and honestly I'm amazed how easy it is to improvise things like this with Coroutines + Compose

[jw]

The transition API makes fades a one liner

[jw]

And it won't run if the content is currently visible

[CLOVIS]

I see, I'll take a look, thanks 🙂