Used in article "Jetpack Compose Anchored Draggable Item in MotionLayout"

motion_scene5.json5

{
  ConstraintSets: {
    start: {
      ...
      actionsTopBg: {
        width: 'spread',
        height: 0,
        start: ['parent', 'start', 16],
        end: ['parent', 'end', 16],
        top: ['date','bottom'],
      },
      actions: {
        width: 'spread',
        height: 'wrap',
        start: ['parent', 'start', 16],
        end: ['parent', 'end', 16],
        top: ['actionsTopBg','bottom'],
        custom: {
          background: '#444444'
        }
      },
      actionsBottomBg: {
        width: 'spread',
        height: 0,
        start: ['parent', 'start', 16],
        end: ['parent', 'end', 16],
        top: ['actions','bottom'],
      },
      text: {
        width: 'spread',
        height: 'spread',
        start: ['parent', 'start', 16],
        end: ['parent', 'end', 16],
        top: ['actionsBottomBg', 'bottom', 16],
        bottom: ['parent', 'bottom']
      }
    },
    end: {
      ...
      actionsTopBg: {
        width: 'spread',
        height: 10,
        start: ['parent', 'start'],
        end: ['parent', 'end'],
        top: ['subTitle','bottom'],
      },
      actions: {
        width: 'spread',
        height: 'wrap',
        start: ['parent', 'start'],
        end: ['parent', 'end'],
        top: ['actionsTopBg','bottom'],
        custom: {
          background: '#9b0024'
        }
      },
      actionsBottomBg: {
        width: 'spread',
        height: 10,
        start: ['parent', 'start'],
        end: ['parent', 'end'],
        top: ['actions','bottom'],
      },
      text: {
        width: 'spread',
        height: 'spread',
        start: ['parent', 'start'],
        end: ['parent', 'end'],
        top: ['actionsBottomBg','bottom', 16],
        bottom: ['parent','bottom'],
      }
    }
  }
}