Animate items placement

[MrBzik]

Hi. Is there a way to animate items placement in kobweb in structures like SimpleGrid? I wanted to implement a filtering logic for a limited list of items.

[bitspittle]

Sorry for not seeing this discussion earlier.

Can you describe more clearly what you mean about "animating item placement"?

Note that SimpleGrid is designed to solve a very common case, basically a super simple flowing layout that is furthermore responsive to the size of the page. If you need to do anything more complicated, we usually recommend using a CSS grid (which you'd do in Kobweb with Modifier.grid { ... } using a Grid builder DSL)

[MrBzik]

Hi. I was referring to .animateItemPlacement() modifier of Compose. Also the behaviour you would get from Diffutil with RecyclerView.
So when I add or remove new item to the grid (not sure there is a way of "adding" anything in html/css), the remaining items will adjust and animate their transition to a new placement.
I was thinking maybe there is a working solution for that in Silk or somewhere

[bitspittle]

Ah yeah we definitely don't have anything like that in Compose HTML.

The web way to do it is described here: https://css-tricks.com/animating-css-grid-how-to-examples/

[MrBzik]

Okay, thank you for the response.
But I can achive the effects described on the link? Since Compose html is a wrapper

[bitspittle]

Yes, you can do anything in Compose HTML that you can in HTML / CSS / JavaScript. However, sometimes it's a pain due to API gaps. Kobweb is trying to help with that.

I'm not sure how far you got through the README but I tried to capture a realistic example of what this experience is like: https://github.com/varabyte/kobweb#learning-css-through-kobweb

[MrBzik]

The readme is great, every time I addressed it, it contained the answer I was looking for.
I m already starting learning css and html, but at this point probably won't do more than adjust someone's code from codepen)
Would be cool to write my components on kobweb, then translate and integrate them into my web project

[bitspittle]

Thank you! We have a discord so when I noticed the same question get asked multiple times in there, I take a note to add a README entry for it. Let's take a moment to respect the users who ran into the walls first 🙏

Good luck with the web development learning! And let us know if you have any more questions anytime.