Jetpack Compose Animations

Animations in Jetpack Compose

In this episode, learn the fundamental philosophy and principles behind animations in Jetpack Compose. Learn how they differ from animations in the old XML UI paradigm and how you can orient your thinking to make the transition from old animations to new Jetpack Compose animations smooth.

Animate Content Size Changes

Learn how to animate content size changes in Jetpack Compose with using a convenient new Modifier.

Animate the Rotation of a Composable

In this episode, get introduced to the set of animate*AsState methods included in the Jetpack Compose framework to animate the rotation property of an icon in a Floating Action Button.

Animate Visibility Using AnimatedVisibility

In this episode, learn how to use the AnimatedVisibility composable to animate in a post creation composable. You’ll also learn about the fun and easy ways you can customize the enter and exit animations of AnimatedVisibility.

Fading Between Two Composables with CrossFade

Most applications have to show a loading state before they show some type of content. In this episode, learn how to use the CrossFade composable to easily fade between a loading state and the full applications social media feed.

Introduction to updateTransition

In the world of animations, it’s often necessary to control your animation at a high level of granularity. In this episode, get introduced to the updateTransition composable and learn how it differs from the animation tools you’ve used so far.

Running Multiple Animations with updateTransition

In this episode, learn how to coordinate multiple animations via the updateTransition composable. You’ll then use your new knowledge to animate like counts as a user likes or unlikes a post in the application.

Making Animations in Jetpack Compose Reusable

In the previous episode you used updateTransition to create a fancy new animation animating changes in a like count for a post. In this episode, learn how to pull that animation code out of the composable it’s currently in and into its own reusable composable for future use.

Controlling Animation Properties

In this episode, learn how to customize the transitionSpec property of transitions to control length, interpolation, and the look and feel of the animation. Learn the difference between tween, spring, and keyframe animations, when to use each, and how to customize their properties.

Using the AnimationPreview Window in Android Studio

One of the wonderful things about animations in Jetpack Compose is that they come with lots of tooling support. In this episode, learn how to use the Animation Preview window in Android Studio to easily test your animations.

Animating Page Transitions in a Pager

In this application, you’re using the HorizontalPager composable from the Accompaniast library to show a pager of images for a post. In this episode, learn how to animate the transition between different pages, and how Jetpack Compose makes these types of animations easy.

Introduction to the Heart Animation

Lots of social media applications have put a lot of effort into making like a post a visually pleasing action. In this episode, learn what the animation we’re trying to achieve looks like and how to show the heart when a user likes a post.

Animating Heart Size

In this episode, learn how to animate the size of the heart so that it grows from zero size up to the full heart, and how to make sure that the timing of the heart growing and collapsing is visually pleasing.

Animating a Heart Beat

One of the most important things that hearts do is beat! In this episode, use the keyFrame transitionSpec to animate a heart beat into your like animation. You’ll also double down on using the Animation Preview utility to make testing the heart beat as easy as can be.

Animating a Burst of Light

In this episode, learn how to add some extra pizazz to your heart animation by drawing a burst of yellow light behind the heart. You’ll learn how to combine the drawBehind modifier with your animating values to finish off this animation.