title: Using MotionLayout to animate different elements at different times
body: <p>I am trying to animate the dealing of cards in my blackjack game. </p>
  
  <p>It seems like I can only run one 'scene' at a time, and trying to change the motion to a <strong>separate start/end transition</strong> will reset the first transition. I have uploaded a video of this problem here: <a href="https://streamable.com/7o7lvg" rel="nofollow noreferrer">https://streamable.com/7o7lvg</a></p>
  
  <p>I wanted to create another motion_scene.xml file, but this file is linked to the root of the fragment (app:layoutDescription="@xml/motion_scene"). So then I tried to change the transition with motion.SetTransition(constraint1, constraint2) but this results in the re-setting that you see in the video. Can anyone help me make sure the animations are left in their final state?</p>
  
  <p>Here is my fragment_motion layout file. Note that I refer to motion_scene.xml.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;androidx.constraintlayout.motion.widget.MotionLayout xmlns:android="http://schemas.android.com/apk/res/android"
      xmlns:app="http://schemas.android.com/apk/res-auto"
      xmlns:tools="http://schemas.android.com/tools"
      android:id="@+id/MotionFragment"
      android:layout_width="match_parent"
      android:layout_height="match_parent"
      android:orientation="horizontal"
      android:paddingStart="10dp"
      android:paddingEnd="10dp"
      app:layoutDescription="@xml/motion_scene"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintEnd_toStartOf="parent"
      tools:context=".MotionFragment"
      tools:showPaths="true"&gt;
  
      &lt;ImageView
          android:id="@+id/cardView"
          android:layout_width="@dimen/card_width_start"
          android:layout_height="@dimen/card_height_start"
          android:contentDescription="@string/CardMove"
          android:src="@drawable/card_ah"
          app:layout_constraintTop_toTopOf="parent"
          tools:layout_editor_absoluteX="287dp" /&gt;
  
      &lt;ImageView
          android:id="@+id/cardView2"
          android:layout_width="@dimen/card_width_start"
          android:layout_height="@dimen/card_height_start"
          android:src="@drawable/card_2c"
           /&gt;
  
      &lt;Button
          android:id="@+id/button2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toStartOf="parent" /&gt;
  
      &lt;androidx.constraintlayout.widget.Guideline
          android:id="@+id/guideline2"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:orientation="vertical"
          app:layout_constraintGuide_begin="498dp" /&gt;
  
      &lt;Button
          android:id="@+id/button3"
          android:layout_width="wrap_content"
          android:layout_height="wrap_content"
          android:text="Button"
          app:layout_constraintBottom_toBottomOf="parent"
          app:layout_constraintStart_toEndOf="@+id/button2" /&gt;
  
  &lt;/androidx.constraintlayout.motion.widget.MotionLayout&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here is my motion_scene.xml file. Note that I have two separate transitions, each which animates a different imageview. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><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
          android:id="@+id/transition_one"
          motion:constraintSetEnd="@id/end"
          motion:constraintSetStart="@id/start"
          motion:duration="500"&gt;
  
          &lt;KeyFrameSet&gt;
              &lt;KeyAttribute
                  android:alpha="0"
                  motion:framePosition="0"
                  motion:motionTarget="@+id/cardView" /&gt;
  
              &lt;KeyAttribute
                  android:rotation="-80"
                  motion:framePosition="0"
                  motion:motionTarget="@+id/cardView" /&gt;
  
          &lt;/KeyFrameSet&gt;
      &lt;/Transition&gt;
  
      &lt;Transition
          android:id="@+id/transition_two"
          motion:constraintSetEnd="@id/end2"
          motion:constraintSetStart="@id/start2"
          motion:duration="500"&gt;
  
          &lt;KeyFrameSet&gt;
              &lt;KeyAttribute
                  android:alpha="0"
                  motion:framePosition="0"
                  motion:motionTarget="@+id/cardView2" /&gt;
  
              &lt;KeyAttribute
                  android:rotation="-80"
                  motion:framePosition="0"
                  motion:motionTarget="@+id/cardView2" /&gt;
  
          &lt;/KeyFrameSet&gt;
      &lt;/Transition&gt;
  
  
      &lt;ConstraintSet android:id="@+id/start"&gt;
          &lt;Constraint
              android:id="@+id/cardView"
              android:layout_width="100dp"
              android:layout_height="140dp"
              motion:layout_constraintBottom_toTopOf="parent"
              motion:layout_constraintRight_toLeftOf="@+id/guideline2" /&gt;
  
      &lt;/ConstraintSet&gt;
  
      &lt;ConstraintSet android:id="@+id/end"&gt;
          &lt;Constraint
              android:id="@+id/cardView"
              android:layout_width="@dimen/card_width_finish"
              android:layout_height="@dimen/card_height_finish"
              motion:layout_constraintBottom_toBottomOf="parent"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintHorizontal_bias="0.24"
              motion:layout_constraintStart_toStartOf="parent"
              motion:layout_constraintTop_toTopOf="parent" /&gt;
      &lt;/ConstraintSet&gt;
  
      &lt;ConstraintSet android:id="@+id/start2"&gt;
          &lt;Constraint
              android:id="@+id/cardView2"
              android:layout_width="100dp"
              android:layout_height="140dp"
              motion:layout_constraintBottom_toTopOf="parent"
              motion:layout_constraintRight_toLeftOf="@+id/guideline2" /&gt;
  
      &lt;/ConstraintSet&gt;
  
      &lt;ConstraintSet android:id="@+id/end2"&gt;
          &lt;Constraint
              android:id="@+id/cardView2"
              android:layout_width="@dimen/card_width_finish"
              android:layout_height="@dimen/card_height_finish"
              motion:layout_constraintBottom_toBottomOf="parent"
              motion:layout_constraintEnd_toEndOf="parent"
              motion:layout_constraintHorizontal_bias="0.8"
              motion:layout_constraintStart_toStartOf="parent"
              motion:layout_constraintTop_toTopOf="parent"
              motion:layout_constraintVertical_bias="0.38" /&gt;
      &lt;/ConstraintSet&gt;
  
  
  &lt;/MotionScene&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And finally, here is my MotionFragment.kt code, which sets up the buttons to run each animation. </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>class MotionFragment : Fragment() {
  override fun onCreateView(
          inflater: LayoutInflater, container: ViewGroup?,
          savedInstanceState: Bundle?
      ): View? {
          // Inflate the layout for this fragment
          return inflater.inflate(R.layout.fragment_motion, container, false)
      }
      
  
      override fun onViewCreated(view: View, savedInstanceState: Bundle?) {
          super.onViewCreated(view, savedInstanceState)
  
          val button = view.findViewById&lt;Button&gt;(R.id.button2)
          val button2 = view.findViewById&lt;Button&gt;(R.id.button3)
          val motion = view.findViewById&lt;MotionLayout&gt;(R.id.MotionFragment)
  
          button.setOnClickListener { _ -&gt;
              ///First transition with image 1
              motion.setTransition(R.id.start2, R.id.end2)
              motion.transitionToEnd()
          }
  
          button2.setOnClickListener { _ -&gt;
              ///Second transition with image 2
              motion.setTransition(R.id.start, R.id.end)
              motion.transitionToEnd()
          }</code></pre>
  </div>
  </div>
  </p>