{
  "templates":
  {
    "selectionType":
    {
      "type": "Control",
      "background": {"color": [ 1, 0.5, 0, 0.6 ]},
      "colorAlpha": 0.05,
      "parentOrigin": "CENTER",
      "anchorPoint": "CENTER",
      "size": [ 450, 90, 1 ]
    },
    "imageType":
    {
      "type": "ImageActor",
      "position": [ 450, 0, 1 ],
      "parentOrigin": "CENTER",
      "anchorPoint": "CENTER",
      "size": [ 450, 795, 1 ],
      "actors": [
        {
          "type": "Control",
          "positionInheritance": "USE_PARENT_POSITION",
          "size": [ 450, 795, 1 ],
          "signals": [
            {
              "name": "tapped",
              "action": "play",
              "animation": "BackAnimation"
            }
          ]
        }
      ]
    }
  },
  "stage": [
    {
      "type": "Control",
      "name": "stencil",
      "background": {"color": [ 1, 1, 1, 1 ]},
      "parentOrigin": "CENTER",
      "anchorPoint": "CENTER",
      "drawMode": "STENCIL",
      "size": [ 450, 795, 0 ],
      "positionZ": 0.1
    },
    {
      "type": "ImageActor",
      "actors": [],
      "name": "list",
      "parentOrigin": "CENTER",
      "anchorPoint": "CENTER",
      "position": [ 0, 0, -1 ],
      "size": [ 450, 795, 1 ],
      "image": {
        "filename": "{DEMO_IMAGE_DIR}animation-list.png"
      }
    },
    {
      "type": "selectionType",
      "name": "selection1",
      "positionY": -105,
      "signals": [
        {
          "name": "tapped",
          "action": "play",
          "animation": "Animation_1"
        }
      ]
    },
    {
      "type": "selectionType",
      "name": "selection2",
      "positionY": -15,
      "signals": [
        {
          "name": "tapped",
          "action": "play",
          "animation": "Animation_2"
        }
      ]
    },
    {
      "type": "selectionType",
      "name": "selection3",
      "positionY": 75,
      "signals": [
        {
          "name": "tapped",
          "action": "play",
          "animation": "Animation_3"
        }
      ]
    },
    {
      "type": "selectionType",
      "name": "selection4",
      "positionY": 165,
      "signals": [
        {
          "name": "tapped",
          "action": "play",
          "animation": "Animation_4"
        }
      ]
    },
    {
      "type": "selectionType",
      "name": "selection5",
      "positionY": 255,
      "signals": [
        {
          "name": "tapped",
          "action": "play",
          "animation": "Animation_5"
        }
      ]
    },
    {
      "type": "imageType",
      "name": "picture1",
      "image": {
        "filename": "{DEMO_IMAGE_DIR}animation-picture-1.png"
      }
    },
    {
      "type": "imageType",
      "name": "picture2",
      "image": {
        "filename": "{DEMO_IMAGE_DIR}animation-picture-2.png"
      }
    },
    {
      "type": "imageType",
      "name": "picture3",
      "image": {
        "filename": "{DEMO_IMAGE_DIR}animation-picture-3.png"
      }
    },
    {
      "type": "imageType",
      "name": "picture4",
      "image": {
        "filename": "{DEMO_IMAGE_DIR}animation-picture-4.png"
      }
    },
    {
      "type": "imageType",
      "name": "picture5",
      "image": {
        "filename": "{DEMO_IMAGE_DIR}animation-picture-5.png"
      }
    }
  ],
  "animations": {
    "Animation_1": {
      "properties": [
        {
          "actor": "selection1",
          "property": "colorAlpha",
          "value": 0.5,
          "alphaFunction": "SIN",
          "timePeriod": {
            "delay": 0,
            "duration": 0.5
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture1",
          "property": "positionX",
          "value": 0,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0.25,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        }
      ]
    },
    "Animation_2": {
      "properties": [
        {
          "actor": "selection2",
          "property": "colorAlpha",
          "value": 0.5,
          "alphaFunction": "SIN",
          "timePeriod": {
            "delay": 0,
            "duration": 0.5
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture2",
          "property": "positionX",
          "value": 0,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0.25,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        }
      ]
    },
    "Animation_3": {
      "properties": [
        {
          "actor": "selection3",
          "property": "colorAlpha",
          "value": 0.5,
          "alphaFunction": "SIN",
          "timePeriod": {
            "delay": 0,
            "duration": 0.5
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture3",
          "property": "positionX",
          "value": 0,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0.25,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        }
      ]
    },
    "Animation_4": {
      "properties": [
        {
          "actor": "selection4",
          "property": "colorAlpha",
          "value": 0.5,
          "alphaFunction": "SIN",
          "timePeriod": {
            "delay": 0,
            "duration": 0.5
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture4",
          "property": "positionX",
          "value": 0,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0.25,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        }
      ]
    },
    "Animation_5": {
      "properties": [
        {
          "actor": "selection5",
          "property": "colorAlpha",
          "value": 0.5,
          "alphaFunction": "SIN",
          "timePeriod": {
            "delay": 0,
            "duration": 0.5
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture5",
          "property": "positionX",
          "value": 0,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0.25,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        }
      ]
    },
    "BackAnimation": {
      "properties": [
        {
          "actor": "picture1",
          "property": "positionX",
          "value": 450,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture2",
          "property": "positionX",
          "value": 450,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture3",
          "property": "positionX",
          "value": 450,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture4",
          "property": "positionX",
          "value": 450,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        },
        {
          "actor": "picture5",
          "property": "positionX",
          "value": 450,
          "alphaFunction": "LINEAR",
          "timePeriod": {
            "delay": 0,
            "duration": 0.25
          },
          "timelineColor": "#83bcc5"
        }
      ]
    }
  }
}