//Create components state val animatableCardState = rememberAnimatableCardState( initialSize = DpSize(80.dp, 80.dp), targetSize = DpSize(Dp.Infinity, 120.dp), toTargetSizeAnimationSpec = tween(500, 500), // specify delay(500) for target initialShape = RoundedCornerShape(32.dp), targetShape = RoundedCornerShape(0.dp), toTargetShapeAnimationSpec = tween(500, 500), initialOffset = DpOffset(0.dp, 0.dp), targetOffset = DpOffset(0.dp, - Dp.Infinity), toInitialOffsetAnimationSpec = tween(500, 500), ) val animatableIconState = rememberAnimatableIconState( initialSize = DpSize(40.dp, 40.dp), targetSize = DpSize(80.dp, 80.dp), toTargetSizeAnimationSpec = tween(500,500), initialOffset = DpOffset(0.dp, 0.dp), targetOffset = DpOffset((-50).dp, 0.dp), toTargetOffsetAnimationSpec = tween(500, 500) ) val animatableTextState = rememberAnimatableTextState( initialFontSize = 0.sp, targetFontSize = 26.sp, toTargetFontSizeAnimationSpec = tween(500, 500), initialOffset = DpOffset(0.dp, 0.dp), targetOffset = DpOffset((-25).dp, 0.dp), toTargetOffsetAnimationSpec = tween(500, 500) ) // Create shared state val sharedAnimatableState = rememberSharedAnimatableState( listOf( animatableCardState, animatableIconState, // default index = 0 animatableIconState.copy( // create state with copy func. for same params index = 1, // specify index for same components initialSize = DpSize(0.dp, 0.dp), targetSize = DpSize(36.dp, 36.dp), targetOffset = DpOffset(40.dp, 0.dp), ), animatableTextState, // default index = 0 animatableTextState.copy( index = 1, // specify index for same components targetFontSize = 12.sp ) ) )

AnimatableCard( onClick = { sharedAnimatableState.animate() }, state = sharedAnimatableState // pass shared state ) { Row( modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.Center ) { AnimatableIcon( imageVector = Icons.Default.Person, contentDescription = null, state = sharedAnimatableState // pass shared state ) Column { AnimatableText( text = "Emir Demirli", state = sharedAnimatableState // pass shared state ) AnimatableText( text = "+90 0535 508 55 52", state = sharedAnimatableState, // pass shared state stateIndex = 1 // specify index for same components ) } AnimatableIcon( imageVector = Icons.Default.Phone, contentDescription = null, state = sharedAnimatableState, // pass shared state stateIndex = 1 // specify index for same components ) } }

val cards by remember { mutableStateOf(listOf("A","K","Q","J","10","9","8","7","6","5","4","3","2")) } var deck by remember { mutableStateOf(cards + cards + cards + cards) } val animatableCardState = rememberAnimatableCardState( initialSize = DpSize(64.dp, 64.dp), targetSize = DpSize(64.dp, 64.dp), initialOffset = DpOffset(0.dp, 120.dp), targetOffset = DpOffset(-Dp.Infinity, -Dp.Infinity) ) val animatableTextState = rememberAnimatableTextState( initialFontSize = 0.sp, targetFontSize = 24.sp ) val cardStates = mutableListOf<AnimatableState>() val textStates = mutableListOf<AnimatableState>() deck.indices.forEach { cardStates.add( animatableCardState.copy( index = it, toTargetOffsetAnimationSpec = tween(400, (it * 400)), targetOffset = DpOffset(if(it % 2 == 0) (-100).dp else 100.dp, (-150).dp) ) ) textStates.add( animatableTextState.copy( index = it, toTargetFontSizeAnimationSpec = tween(400, (it * 400)) ) ) } val sharedAnimatableState = rememberSharedAnimatableState(cardStates + textStates)

Box( modifier = Modifier .fillMaxSize() .clickable { deck = deck.shuffled() sharedAnimatableState.animate() }, contentAlignment = Alignment.Center ) { deck.indices.forEach { AnimatableCard( onClick = {}, state = sharedAnimatableState, stateIndex = it, fixedShape = RoundedCornerShape(16.dp) ) { Box(Modifier.fillMaxSize(), Alignment.Center) { AnimatableText( text = deck[it], state = sharedAnimatableState, stateIndex = it ) } } } }

val lazyListState = rememberLazyListState() val scope = rememberCoroutineScope() var selectedIndex by remember { mutableStateOf(0) } val stories by remember { mutableStateOf(Story.stories) } val animatableCardState = rememberAnimatableCardState( initialSize = DpSize(width = 70.dp, height = 70.dp), targetSize = DpSize(width = Dp.Infinity, height = Dp.Infinity), initialShape = CircleShape, targetShape = RoundedCornerShape(0.dp), initialPadding = PaddingValues(4.dp, 8.dp), targetPadding = PaddingValues(0.dp), initialBorder = BorderStroke(2.dp, Brush.verticalGradient(listOf(Color.Red, Color.Yellow))), targetBorder = BorderStroke(0.dp, Color.Unspecified) ) val cardStates = mutableListOf<AnimatableState>() stories.indices.forEach { index -> cardStates.add( animatableCardState.copy( index = index, onAnimation = { when(it) { AnimationState.INITIAL -> {} AnimationState.INITIAL_TO_TARGET -> { scope.launch { delay(150) lazyListState.animateScrollToItem(selectedIndex) } } AnimationState.TARGET -> {} AnimationState.TARGET_TO_INITIAL -> {} } }, toTargetAnimationSpec = tween(250) ) ) } val sharedAnimatableState = rememberSharedAnimatableState(cardStates)

Box( modifier = Modifier.fillMaxSize(), ) { LazyRow( state = lazyListState ) { items(stories.size) { index -> AnimatableCard( modifier = Modifier .size(100.dp), onClick = { selectedIndex = index cardStates[index].animate() }, state = sharedAnimatableState, stateIndex = index ) { AsyncImage( model = stories[index].url, contentDescription = null, contentScale = ContentScale.Crop, modifier = Modifier.fillMaxSize() ) } } } }

data class Story( val url: String ) { companion object { val stories = listOf( // ) } }

val lazyListState = rememberLazyListState() val snapperFlingBehavior = rememberSnapperFlingBehavior( lazyListState = lazyListState, snapOffsetForItem = SnapOffsets.Start, ) val scope = rememberCoroutineScope() var selectedIndex by remember { mutableStateOf(0) } val animatableCardState = rememberAnimatableCardState( initialSize = DpSize(width = 340.dp, height = 180.dp), targetSize = DpSize(width = Dp.Infinity, height = 340.dp), initialShape = RoundedCornerShape(32.dp), targetShape = RoundedCornerShape(0.dp, 0.dp, 32.dp, 32.dp), toTargetShapeAnimationSpec = tween(750), initialPadding = PaddingValues(horizontal = 8.dp), targetPadding = PaddingValues(0.dp), onAnimation = { when(it) { AnimationState.INITIAL -> {} AnimationState.INITIAL_TO_TARGET -> { scope.launch { delay(500) lazyListState.animateScrollToItem(selectedIndex) } } AnimationState.TARGET -> {} AnimationState.TARGET_TO_INITIAL -> {} } } ) val animatableBoxState = rememberAnimatableBoxState( initialAlignment = Alignment.Center, targetAlignment = Alignment.TopCenter ) val animatableTextState = rememberAnimatableTextState( initialFontSize = 0.sp, targetFontSize = 12.sp, initialOffset = DpOffset(x = 0.dp, y = 300.dp), targetOffset = DpOffset(x = 0.dp, y = 0.dp), toTargetAnimationSpec = tween(250) ) val animatableSpacerState = rememberAnimatableSpacerState( initialSize = DpSize(width = 0.dp, height = 0.dp), targetSize = DpSize(width = 0.dp, height = 16.dp) ) val infoCards by remember { mutableStateOf(InfoCard.infoCards) } val cardStates = mutableListOf<AnimatableState>() val boxStates = mutableListOf<AnimatableState>() val textStates = mutableListOf<AnimatableState>() val spacerStates = mutableListOf<AnimatableState>() infoCards.indices.forEach { index -> cardStates.add( animatableCardState.copy( index = index ) ) boxStates.add( animatableBoxState.copy( index = index ) ) textStates.add( animatableTextState.copy( index = index ) ) if(index == 0) { spacerStates.add( animatableSpacerState.copy( index = index, initialSize = DpSize(width = 0.dp, height = 300.dp), targetSize = DpSize(width = 0.dp, height = 0.dp) ) ) } spacerStates.add( animatableSpacerState.copy( index = index + 1, ) ) } val sharedAnimatableState = rememberSharedAnimatableState( animatableStates = cardStates + boxStates + textStates + spacerStates )

Column( modifier = Modifier.fillMaxSize(), ) { AnimatableSpacer( state = sharedAnimatableState ) LazyRow( verticalAlignment = Alignment.CenterVertically, state = lazyListState, flingBehavior = snapperFlingBehavior ) { items(infoCards.size) { index -> AnimatableCard( onClick = { selectedIndex = index sharedAnimatableState.animate() }, state = sharedAnimatableState, stateIndex = index, colors = CardDefaults.cardColors( containerColor = Color(0xFFE9E7FE) ) ) { Row( modifier = Modifier.fillMaxSize(), verticalAlignment = Alignment.CenterVertically, horizontalArrangement = Arrangement.SpaceBetween ) { AnimatableBox( modifier = Modifier .weight(1f) .fillMaxHeight() .padding(16.dp), stateIndex = index, state = sharedAnimatableState ) { LazyColumn(horizontalAlignment = Alignment.CenterHorizontally) { item { Text( text = infoCards[index].title, fontSize = 22.sp, fontWeight = FontWeight.Bold ) Text( modifier = Modifier.align(Alignment.CenterStart), text = "MGS 1", fontSize = 12.sp, color = Color.Gray ) AnimatableSpacer( stateIndex = index + 1, state = sharedAnimatableState ) AnimatableText( text = infoCards[index].info, stateIndex = index, state = sharedAnimatableState, fontWeight = FontWeight.Bold ) } } } AsyncImage( modifier = Modifier .weight(1f) .padding(8.dp) .clip(RoundedCornerShape(32.dp)), model = infoCards[index].imageUrl, contentDescription = null, contentScale = ContentScale.Crop ) } } } } }

data class InfoCard( val imageUrl: String, val title: String, val info: String ){ companion object { val infoCards = listOf( // ) } }

// Simply create state and pass it to AnimatableText val state = rememberAnimatableTextState( initialFontSize = 12.sp, targetFontSize = 60.sp )

Column( modifier = Modifier .fillMaxSize() .clickable { state.animate() // animate }, verticalArrangement = Arrangement.Center, horizontalAlignment = Alignment.CenterHorizontally ) { AnimatableText( text = "Animatable", state = state // pass state ) AnimatableText( text = "Compose", state = state // pass state ) }

// Simply create box state and pass it to AnimatableBox val state = rememberAnimatableBoxState( initialSize = DpSize(60.dp, 60.dp), // set initial size targetSize = DpSize(Dp.Infinity, 120.dp), // set target size initialOffset = DpOffset(x = 0.dp, y = 0.dp), // set initial offset targetOffset = DpOffset(x = 0.dp, y = - Dp.Infinity) // set target offset // Dp.Infinity will take the maximum value according to the screen size,  // ps: Dp.Infinity for offset needs centered component and sizes, however you may not use it if you want initialAlignment = Alignment.Center, // set initial alignment targetAlignment = Alignment.TopStart // set target alignment )

AnimatableBox( modifier = Modifier .border(1.dp, Color.Red) .clickable { state.animate() }, state = state ) { Icon( modifier = Modifier.padding(8.dp), imageVector = Icons.Default.Add, contentDescription = null ) }

// Simply create card state and pass it to AnimatableCard val animatableCardState = rememberAnimatableCardState( initialSize = DpSize(width = 70.dp, height = 70.dp), targetSize = DpSize(width = 200.dp, height = 70.dp), initialShape = CircleShape, targetShape = RoundedCornerShape(0.dp, 0.dp, 24.dp, 0.dp), initialOffset = DpOffset(x = 0.dp, y = 0.dp), targetOffset = DpOffset(x = - Dp.Infinity, y = - Dp.Infinity) )

Box( modifier = Modifier .fillMaxSize() .clickable { animatableCardState.animateToInitial() // animate to initial }, contentAlignment = Alignment.Center ) { AnimatableCard( modifier = Modifier.size(100.dp), onClick = { animatableCardState.animateToTarget() // animate to target }, state = animatableCardState ) {} }

// Simply create card state and text state val animatableCardState = rememberAnimatableCardState( initialSize = DpSize(width = 50.dp, height = 25.dp), targetSize = DpSize(width = 300.dp, height = 150.dp), initialShape = CircleShape, targetShape = RoundedCornerShape(16.dp) ) val animatableTextState = rememberAnimatableTextState( initialFontSize = 4.sp, targetFontSize = 36.sp ) // Merge the states you created into sharedState and pass it to AnimatableCard and AnimatableText val sharedAnimatableState = rememberSharedAnimatableState( animatableStates = listOf( animatableCardState, animatableTextState ), toTargetAnimationSpec = infiniteRepeatable(tween(1000), RepeatMode.Reverse) //specify shared animation spec )

Box( modifier = Modifier .fillMaxSize() .clickable { sharedAnimatableState.animate() }, contentAlignment = Alignment.Center ) { AnimatableCard( modifier = Modifier.size(100.dp), state = sharedAnimatableState // pass shared state ) { Box(Modifier.fillMaxSize(), Alignment.Center) { AnimatableText( text = "Animatable", state = sharedAnimatableState // pass shared state ) } } }