Hi everyone, I'm trying to display an animation JSON file from Lotte on the web using Skia. I got it...

# multiplatform

[Ismail]

Hi everyone, I'm trying to display an animation JSON file from Lotte on the web using Skia. I got it working for desktop using the code below,
, but it won't show on the web? Thanks

@OptIn(ExperimentalResourceApi::class)
@Composable
actual fun LottieAnimation(
modifier: Modifier,
name: String,
speed: Float,
iterations: Int,
completed: () -> Unit
) {

var animationState by remember { _mutableStateOf_<Animation?>(null) }

_LaunchedEffect_(Unit) {
animationState = Animation.makeFromData(
Data.makeFromBytes(
_resource_("raw/$name.json").readBytes()
)
)
}

val time = remember { _Animatable_(0f) }

when (val animation = animationState) {
null -> {}
else -> {
_LaunchedEffect_(Unit) {
time.animateTo(
targetValue = animation.duration,
animationSpec = _repeatable_(
iterations = iterations,
animation = _tween_(
durationMillis = (animation.duration * 1000 / speed)._roundToInt_(),
easing = LinearEasing
),
repeatMode = RepeatMode.Restart
)
)
}

val invalidationController = remember { InvalidationController() }

animation.seekFrameTime(time.value, invalidationController)

// println("progress: ${time.value}")

_Box_(
modifier = modifier._fillMaxSize_().drawWithContent {
drawIntoCanvas {
animation.render(
canvas = it.nativeCanvas,
dst = Rect.makeWH(size.width, size.height)
)
}
}
)

_LaunchedEffect_(
key1 = time.isRunning,
)*{*
if (time.isRunning){
_println_("animation running!!")
}else{
if (iterations == 1){
_println_("animation completed!!")
completed.invoke()
}
}
}

}
}

}