title: Play animation sequentially - Motion Layout
body: <p>So far, I've read all the documentation available about <code>MotionLayout</code> <a href="https://developer.android.com/training/constraint-layout/motionlayout" rel="nofollow noreferrer">here</a> (the official docs), examples available on it, a very complex example <a href="https://proandroiddev.com/complex-ui-animations-on-android-featuring-motionlayout-aa82d83b8660" rel="nofollow noreferrer">here</a> and other examples from many websites. 
  What I failed to get so far is how to play/start the animations one by one. </p>
  
  <p>The <code>KeyPosition</code> and <code>KeyAttribute</code> are possibly the answer but I didn't find any example/documentation explaining how can I utilise them.</p>
  
  <p>This is the <code>MotionScene</code> layout:</p>
  
  <pre><code>&lt;?xml version="1.0" encoding="utf-8"?&gt;
  &lt;MotionScene
      xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:motion="http://schemas.android.com/apk/res-auto"
      &gt;
      &lt;Transition
          motion:constraintSetStart="@+id/start"
          motion:constraintSetEnd="@+id/end"
          motion:duration="500"&gt;
      &lt;/Transition&gt;
      &lt;ConstraintSet android:id="@+id/start"&gt;
          &lt;Constraint
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              motion:layout_constraintTop_toBottomOf="parent"
              motion:layout_constraintLeft_toLeftOf="parent"
              motion:layout_constraintRight_toRightOf="parent"
              android:id="@+id/bottomText"
              /&gt;
      &lt;/ConstraintSet&gt;
      &lt;ConstraintSet android:id="@+id/end"&gt;
          &lt;Constraint
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              motion:layout_constraintBottom_toBottomOf="parent"
              motion:layout_constraintLeft_toLeftOf="parent"
              motion:layout_constraintRight_toRightOf="parent"
              android:id="@+id/bottomText"
              /&gt;
      &lt;/ConstraintSet&gt;
      &lt;ConstraintSet android:id="@+id/start1"&gt;
          &lt;Constraint
              android:layout_width="wrap_content"
              android:layout_height="wrap_content"
              motion:layout_constraintBottom_toTopOf="parent"
              android:id="@+id/arcView"
              /&gt;
      &lt;/ConstraintSet&gt;
      &lt;ConstraintSet android:id="@+id/end1"&gt;
          &lt;Constraint
              android:layout_width="match_parent"
              android:layout_height="0dp"
              motion:layout_constraintHeight_percent=".8"
              motion:layout_constraintTop_toTopOf="parent"
              android:id="@+id/arcView"
              /&gt;
      &lt;/ConstraintSet&gt;
  &lt;/MotionScene&gt;
  </code></pre>
  
  <p>This is how I start it: (it doesn't start automatically even with the <code>autoTransition</code>)</p>
  
  <pre><code>val motionContainer : MotionLayout = findViewById(R.id.motionContainer)
  motionContainer.setTransition(R.id.start, R.id.end)
  motionContainer.transitionToEnd()
  </code></pre>
  
  <p>The complex example above uses <code>motionLayout.doOnEnd()</code> to start the next transition but that is not an available function, nor I found it anywhere in his code. As I checked more, <code>doOnEnd()</code> is a function of <code>Animator()</code> but no relation of it with <code>MotionScene</code>/<code>MotionLayout</code> could be found.</p>
  
  <p>I thought by passing next transition it would work as shown below but that didn't help too.</p>
  
  <pre><code>val motionContainer : MotionLayout = findViewById(R.id.motionContainer)
  motionContainer.setTransition(R.id.start, R.id.end)
  motionContainer.transitionToEnd()
  motionContainer.setTransition(R.id.start1, R.id.end1)
  motionContainer.transitionToEnd()
  </code></pre>
  
  <p>So, <strong>how to play these transitions one by one?</strong></p>