Practical magic with animations in Jetpack Compose

Are you constantly in awe of the animations your designer creates but have no idea how to implement them? Or maybe you want to keep your users engaged by adding delightful little treats in your app... There are a few key principles that unlock a wide range of different animations, from basic to advanced.
We will go through some practical examples of how to implement animations in Jetpack Compose, such as working with gestures to control animations and how to do state based animations. Join us to learn how to think about implementing any animation in a step-by-step way.
Chapters:
0:00 - Introduction
0:56 - Principles of Animation
1:42 - What?
3:36 - Modifier.graphicsLayer
4:47 - When?
5:05 - State changes
5:23 - animateAsState
6:20 - Transition
7:01 - On Launch
7:38 - Infinitely
8:04 - With Gesture
12:08 - Flinging gesture handling
16:08 - AnchoredDraggable
17:17 - How
17:46 - Animation Specs
18:16 - tween specs
19:11 - Easing
21:27 - spring specs
23:56 - Built-in animation APIs
24:17 - Animated Visibility
24:28 - animateContentSize
24:47 - AnimatedContent
26:37 - Choosing an API
28:34 - Summary
29:03 - Bonus: Image Vectors
Resources:
Animation Quick Guide → goo.gle/animation-quick-guide
Animation Tree → goo.gle/animation-tree
Catch more videos → goo.gle/Jetpack-Compose
Subscribe to Android Developers → goo.gle/AndroidDevs
#Featured #Android #JetpackCompose

[@AndroidDevelopers]

Subscribe to Android Developers → goo.gle/AndroidDevs

[@SerhiiSolodilov]

This is what developers expect from "Android Developers" channel. Thank you for the video. Waiting for more videos like this.

[@tejasbhong]

right said

[@marvinbernal]

This video was incredibly clear and helpful. Awesome work Rebecca!!

[@AndroidDevelopers]

Thanks for sharing, @marvinbernal! We're happy to hear that the video was helpful and engaging 😁

[@odayprogrammer]

a video with actual value from this channel, refreshing!

[@afifhafizuddinahmedkhan.1373]

Thank You Mam! For Describing Everything Easily! 🎉

[@mohammadabdalaal3111]

I LOVE IT! How to organize our thoughts to build up an animation is really helpful. And the last bonus part is brilliant! Thanks for your efforts.

[@greatguy2003]

Excellent job on the "What to animate" section. You did a great job of visually explaining what each property is for.

[@riggaroo]

Thanks for the kind words!

[@367labs]

Probably the best video so far from Android Developers :) Very helpful. Thank you

[@GakisStylianos]

Wow this is a very information dense video, you've done a great job here, thank you!

[@AndroidDevelopers]

It's our pleasure, @GakisStylianos! Glad you enjoyed the video 😎

[@iurysza]

Amazing content. Answers so many questions and give us many ideas too.

[@tch.777]

A delicious video😊. Thanks, keep it up, sharpening and teaching. Thanks to videos like yours, the apps I build rise several levels above everyone else! Thank you!!🔥

[@yasserakbbach7342]

Just keep doing it this way, and we'd be less confused as Android devs 😂 Good content series 👏

[@VIDEOSANDREEL]

Thank You so much for the update 🙏🙏🙏

[@pantelischas9460]

thanks for the sharing!! It is very helpful video to better understands animations!!

[@AndroidDevelopers]

We’re glad you found the video helpful.

[@NataliaRementov]

Thanks, just in time - I'm about to design and implement animations in my first app🥰

[@user-mx4xn2mi1u]

This video was incredibly clear and helpful!

[@elizavetasigova5030]

Loved the video! Great!

[@andreoriani]

Thanks for sharing your Droidcon London talk

[@wilsonahanmisi1187]

This is a proper course. Top notch content

[@anhtuannd]

Greate video! I like the quote "Hopefully at the end, you are coming to a stop"

[@hj2931]

Thank you for sharing. This video is very useful.👍👍

[@parthtakkar9069]

Really informative thanks!

[@AndroidDevelopers]

Thank you for watching!

[@vasyapankov26]

very cool video, thank you❤

[@VDlasov]

Interesting topic. Nice explanation!

[@KissErikaNagyne]

Nice video tutorial, and useful cause there is not much information for beginners about working with animation

[@DavidMermelstein]

I would love to see how to tackle these in non jetpack compose too.

[@user-ru8gs1fi8z]

nice!

[@user-yc8pj4kl1w]

amazing content, great job!

[@user-me1ry6lg6d]

What an explanation !!!

[@JohnPaulPhillips-qh9zq]

Nice to hear and watch, thanks to Rebecca

[@michaelappiah-kubi2829]

So helpful!!!

[@user-um4tv2yk9i]

WOW!

[@user-mx4xn2mi1u]

nice job!

[@pabiforbes]

Yay Rebecca 🇿🇦🌷

[@eganathan.r]

🎉❤

[@JayLee-dj4tv]

Great explanation! Do you have any sample code for these examples?

[@user-jeremylee]

Nice video. But I still have some questions about the content of the app itself and the design😏

[@mr-turkish]

I like your accent

[@BaBaKRaufi]

How to reset anchoreddraggablestate to initial value? for example by a click.

[@blu8762]

i think this can be easily done using other languages/libraries no ?

[@riggaroo]

Yes, most frameworks offer animations, however this video is targeted for Android Developers using Jetpack Compose. Compose does make a lot of these concepts easier to apply over the View system, for instance.

[@suryapratap3043]

so is it easier to animate in jetpack compose then in flutter? just want to know

[@LouisCognault]

Was the intro animated with Compose?

[@Tarek360]

I like how Android Jetpack Compose following the widget library from Flutter.

[@JanLund]

Great video! Just a minor comment if you don't mind: it seems like "i.e." is being used instead of the more correct "e.g." in the decision diagram.

[@henrik908]

Developers at Google are working very hard improving Jetpack compose

[@Tarek360]

30:32 This jellyfish vector animation is 5 years late, I created the RichPath library five years ago to manipulate the vector drawable but after a year I deprecated it in favor of Lottie and Rive afterwards.

[@riggaroo]

Thanks for the feedback, I did mention that you could use Lottie or an AVD to do this too (30:10), however I did want to showcase that you can use the same Compose animation APIs a bit more easily with vectors now too. This is a bonus fun animation after all 🪼