overflow-marquee-avg.json

{
  "type": "APL",
  "version": "1.4",
  "settings": {},
  "theme": "dark",
  "import": [],
  "resources": [],
  "styles": {},
  "onMount": [],
  "graphics": {
    "TextOverflow": {
      "parameters": [
        "x"
      ],
      "type": "AVG",
      "version": "1.1",
      "height": 100,
      "width": "${viewport.width}",
      "items": [
        {
          "type": "text",
          "fill": "red",
          "fontFamily": "amazon-ember, sans-serif",
          "fontSize": 60,
          "text": "Lorem ipsum dolor sit amet, consetetur sadipscing elitr.",
          "x": "${x}",
          "y": 50,
          "textAnchor": "left"
        }
      ]
    }
  },
  "commands": {},
  "layouts": {},
  "mainTemplate": {
    "parameters": [
      "payload"
    ],
    "items": [
      {
        "type": "Container",
        "width": "100vw",
        "height": "100vh",
        "items": [
          {
            "bind": [
              {
                "name": "x",
                "type": "number",
                "value": 0
              },
              {
                "name": "y",
                "type": "number",
                "value": -1
              }
            ],
            "type": "VectorGraphic",
            "source": "TextOverflow",
            "width": "100%",
            "height": "100%",
            "scale": "none",
            "x": "${x}",
            "handleTick": [
              {
                "minimumDelay": "${1000 / 60}",
                "commands": [
                  {
                    "type": "SetValue",
                    "property": "x",
                    "value": "${x + y}"
                  },
                  {
                    "description": "210 is the distance the text should move before changing direction",
                    "when": "${x % 210 == 0}",
                    "type": "SetValue",
                    "property": "y",
                    "value": "${y * -1}"
                  }
                ]
              }
            ]
          }
        ]
      }
    ]
  }
}