1

I'm trying to implement something like this animation in jetpack compose and from what I've laid my eyes up until this point makes me think I should use MotionLayout, ConstraintSet, MotionScene but the documentation is poor and I don't get much of it.

enter image description here

Can anyone point me to some examples or to a better documentation?

Tiberiu Paduraru
  • 313
  • 3
  • 17

1 Answers1

3

We have not had a documentation push on ConstraintLayoutCompose (the library that contains MotionLayout) because 1.0 of ConstrainLayoutCompose has not been released.

ConstrainLayoutCompose will contain a limited subset of MotionLayouts features for Compose.

  • The syntax can be found here.
  • Some working examples can be found here

If your animation needs are simple you might consider the Compose "native" Animations as well. (Google "Compose Animation")

We will continue to fill out all of the MotionLayout features next year.

MotionLayout is based on ConstraintLayout and as such you should also be familiar with ConstraintLayout.

The general principals of MotionLayout work the same so all the Overview information from classic views applies. Concepts such as:

ConstraintSet Transitions keyPosition KeyCycle

It is using a new json5 syntax

hoford
  • 4,918
  • 2
  • 19
  • 19
  • When will you publish MotionLayout for Compose on official documentation? – Jim Ovejera Feb 09 '22 at 15:37
  • We set MotionLayout as Experimental as we continue to fill out the API and Implementation. After we stabilize the API we will ramp up and effort to document the it. We have no official timeline. – hoford Feb 09 '22 at 17:48