:sparkles: <Lottie Animation on Web Canvas> :spark...

# compose-web

[darkmoon_uk]

✨ Lottie Animation on Web Canvas ✨

Scrappy code here

[ephemient]

doesn't Lottie have a web renderer of its own?

[darkmoon_uk]

Yes, this is by no means the most efficient way of rendering a Lottie animation in a web-page.

[darkmoon_uk]

But it's a point of interest for anyone who is keen on making full-canvas rich web applications with Compose.

[ephemient]

I'm trying to find a work excuse to play around with https://rive.app/ in the near future :) they ship a wasm renderer that should be modifiable to fit in with other canvas rendering

[darkmoon_uk]

Hadn't heard of Rive; thanks, will take a look.

[darkmoon_uk]

Just fixed an issue with recomposition on my page, animation is now smooth 🙂

[spierce7]

There is a little sadness... but it's not the end of the world:

[Suser]

nicely done :)

[Daniele B]

Really nice you were able to occupy the whole screen and support resizing!
All official Compose Jetbrains samples I had a look to, just occupy a limited area of the browser.
Did you write BrowserViewportWindow yourself or did you find it somewhere?
https://git.chrishatton.org/chris/homepage/-/blob/master/src/jsMain/kotlin/org.chrishatton.homepage/presentation/view/BrowserViewportWindow.kt
Such component should definitely be provided as part of the Compose/JScanvas library!

[darkmoon_uk]

@Daniele B BrowserViewportWindow is indeed a very useful device, which must be credited to @Oliver.O, see this thread. I will mark up the source file also.

[darkmoon_uk]

Also note my copy is not his latest iteration, which I understand has some improvements.

[Daniele B]

@darkmoon_uk great stuff, many thanks!
where is the latest version available?

[Oliver.O]

Here: https://github.com/OliverO2/compose-counting-grid

[Oliver.O]

More precisely, here: https://github.com/OliverO2/compose-counting-grid/tree/master/src/frontendJsMain/kotlin

[Daniele B]

@Oliver.O I quite liked the previous version, where all code was contained in BrowserViewportWindow. Is there any specific reason why you changed it?
Does also this latest version support resizing?

[Oliver.O]

The latest version supports resizing. Its evolution (not just by me, but rather a joint effort) is discussed in the above thread.

[Oliver.O]

Ah, and I guess the new version more clearly separates HTML/DOM and Compose zones. But of course you can stick with the other version and just try to understand and cherry-pick corrections.

[Daniele B]

@Oliver.O I tried to run your JS project, but it gives me this error:

Module "androidx.compose.foundation:foundation" has a reference to symbol [ File '/mnt/agent/work/ba60555d9dde92ae/compose/frameworks/support/compose/foundation/foundation/src/commonMain/kotlin/androidx/compose/foundation/lazy/grid/LazyGridLayoutInfo.kt' <- androidx.compose.foundation.lazy.grid/EmptyLazyGridLayoutInfo|null[0] ]. Neither the module itself nor its dependencies contain such declaration.

This could happen if the required dependency is missing in the project. Or if there is a dependency of "androidx.compose.foundation:foundation" that has a different version in the project than the version that "androidx.compose.foundation:foundation" was initially compiled with. Please check that the project configuration is correct and has consistent versions of all required dependencies.

The list of "androidx.compose.foundation:foundation" dependencies that may lead to conflicts:
 1. "kotlin" (a library with unknown version)
 2. "androidx.compose.animation:animation" (a library with unknown version)
 3. "androidx.compose.animation:animation-core" (a library with unknown version)
 4. "androidx.compose.foundation:foundation-layout" (a library with unknown version)
 5. "androidx.compose.runtime:runtime" (a library with unknown version)
 6. "androidx.compose.runtime:runtime-saveable" (a library with unknown version)
 7. "androidx.compose.ui:ui" (a library with unknown version)
 8. "androidx.compose.ui:ui-geometry" (a library with unknown version)
 9. "androidx.compose.ui:ui-graphics" (a library with unknown version)
10. "androidx.compose.ui:ui-text" (a library with unknown version)
11. "androidx.compose.ui:ui-unit" (a library with unknown version)
12. "androidx.compose.ui:ui-util" (a library with unknown version)
13. "org.jetbrains.skiko:skiko" (a library with unknown version)
14. "org.jetbrains.kotlinx:atomicfu" (a library with unknown version)
15. "org.jetbrains.kotlinx:kotlinx-coroutines-core" (a library with unknown version)

[Oliver.O]

Did you try with IntelliJ IDEA (I have never tried AS on that one), and via the Gradle invocations mentioned in the README? The above problem is probably not project-specific at all, IIRC I have seen that one somewhere else...

[Oliver.O]

See that section in the README. It's a known bug.

[Daniele B]

yes, I tried with IntelliJ IDEA, but I was running frontendJsBrowserDevelopmentRun
I have just verified that frontendJsBrowserProductionRun works! 👍