How can I animate the item placement in this LazyColumn?

I want to animate the task item placement to the bottom of the list when the task item checked (isDone == true).

This is the code for the Lazy Column:

LazyColumn(
    modifier = Modifier.padding(paddingValues),
    state = listState,
    contentPadding = PaddingValues(16.dp)
) {
    items(tasks) { task ->
        TaskItem(
            task = task,
            onEvent = viewModel::onEvent,
            onItemClick = {
                viewModel.onEvent(TaskEvents.OpenOrCreateTask(task.id))
                containerState = ContainerState.Fullscreen
            },
            modifier = Modifier
                .fillMaxWidth()
                .border(BorderStroke(2.dp, Color.Black))
                .padding(8.dp)
        )
    }
}

This is the data class for the task item (isDone represents if the task is completed or not). I want the completed tasks to appear at the end of the list but also want to animate it.

@Entity
data class Task(
    val title: String,
    val description: String?,
    val isDone: Boolean,
    @PrimaryKey val id: Int? = null,
)

I tried the animateContentPlacement modifier and can't figure anything else.

The animateItemPlacement modifier is not available anymore. From Compose 1.7.0 onwards you can use animateItem() instead which will also animate added and removed items.

As the documentation explains you must also use the key parameter:

You should also provide a key via LazyListScope.item/LazyListScope.items for this modifier to enable animations.

When your Task's id is unique and you can guarantee that null does not occur more than once in the list at any given time, you can do it like this:

items(
    items = tasks.sortedBy(Task::isDone),
    key = { it.id ?: 0 },
) { task ->
    TaskItem(
        // ...
        modifier = Modifier.animateItem(),
    )
}

tasks.sortedBy(Task::isDone) is used to order the tasks that are done at the bottom of the list.