Is it possible to combine `animateContentSize` with say an a kotlinlang #compose

Channels

100daysofkotlin

100daysofkotlin-2021

algolialibraries

android-architecture

android-databinding

androidgithubprojects

androidx-xprocessing

arrow-contributors

beepiz-libraries

cincinnati-user-group

codemash-precompiler

codingconventions

competitive-programming

competitivecoding

compose-android

compose-desktop

compose-ui-showcase

connect-audit-events

cscenter-course-2016

domain-driven-design

effective-kotlin

effectivekotlin

embedded-kotlin

event21-community-content

fb-internal-demo

fluid-libraries

framework-elide

getting-started

github-workflows-kt

graviton-browser

image-processing

intellij-plugins

intellij-tricks

introduce-yourself

java-to-kotlin-refactoring

jhipster-kotlin

jvm-ir-backend-feedback

k2-early-adopters

kotest-contributors

kotlin-by-example

kotlin-data-storage

kotlin-foundation

kotlin-in-action

kotlin-multiplatform-contest

kotlin-pakistan

kotlinforbeginners

kotlingforbeginners

kotlinprogrammers

kotlintest-devs

kotlinultimatechallenge

kotlinx-datetime

lambdaworld_cadiz

language-evolution

language-proposals

leedskotlinusergroup

library-development

machinelearningbawas

myndocs-oauth2-server

navigation-architecture-component

ohio-kotlin-users

pattern-matching

pocketgitclient

practical-functional-programming

prozis-android-backup

python-contributors

realworldkotlin

refactoring-to-kotlin

refreshversions

russian-kotlinasfirst

skia-wasm-interop-temp

sofl-user-group

spring-security

squarelibraries

stayhungrystayfoolish

strife-discord-lib

swagger-gradle-codegen

swiss-user-group

tricity-kotlin-user-group

Title

c

Chris Johnson

03/21/2022, 8:30 PM

Is it possible to combine

animateContentSize

with say an alpha animation? If not, what's the way we should go about this? Say I want to update the alpha alongside the size change for a

Text

. Currently it animates the size first and doesn't appear to get any alpha updates. Code in 🧵

val alpha by animateFloatAsState(animationSpec = spring(stiffness = Spring.StiffnessMediumLow), targetValue = if (uiState.someState) 1f else .5f)

Text(text = if (uiState.someState) "Send Message" else "", modifier = Modifier.animateContentSize(animationSpec = spring(stiffness = Spring.StiffnessMediumLow))
                        .alpha(alpha))

c

Chris Sinco [G]

03/21/2022, 9:10 PM

I think

AnimatedContent

would be useful for combining fade + size transform, but @Doris Liu might have other suggestions

:thank-you: 1

d

Doris Liu

03/21/2022, 10:00 PM

Yes,

AnimatedContent

would be the API to use for this.

animateContentSize

reactively animates the size change after the text has already changed, say from "Send Message" to "". At that point, the animated alpha is applied on an empty text.

AnimatedContent

can help you swap between the old and new text while applying fade and size transform.

:thank-you: 1

c

Chris Johnson

03/21/2022, 10:01 PM

I knew I could count on a Chris. Holy crap

AnimatedContent

is powerful. I was trying to do simultaneous animations via coroutines from this link.

https://www.youtube.com/watch?v=Z_T1bVjhMLk&list=PLWz5rJ2EKKc9-BJh8Os6W6iQIp1gtOh2T&index=7▾

but this is much simpler. Ah, Thanks for the reply guys! And for making such a delightful and fun to use api = )

👍🏼 1

👍 1

🥳 2

#compose Join Slack