Animating/tweening assets in templates?

Shotstack API
1

I’m in the process of proofing out Shotstack for a product I’m working on and trying to create a template to serve as a proof of concept. One thing I’m not clear on is whether there are options in the template studio to animate/tween the position of assets like images or text in a track - for instance, can an image fade in, then move to the upper left of a video over the course of a few seconds?

2

Hello @ben ,

You can certainly fade in objects within your templates, but please note that keyframing isn’t currently available—though it’s on our development roadmap.

In the meantime, one workaround for animating or tweening the position of assets such as images or text is to use fading transitions.

For instance, you can fade in an object at one position and then fade in another piece of text at a different position. Here’s how you can structure it in JSON:

{
  "timeline": {
    "tracks": [
      {
        "clips": [
          {
            "asset": {
              "type": "html",
              "width": 300,
              "height": 46,
              "html": "<p data-html-type=\"text\">HELLO WORLD</p>",
              "css": "p { color: #ffffff; font-size: 32px; font-family: 'Montserrat ExtraBold'; text-align: center; }"
            },
            "start": 0,
            "length": 5,
            "fit": "none",
            "scale": 1,
            "offset": {
              "x": -0.309,
              "y": -0.353
            },
            "position": "center",
            "transition": {
              "in": "fade"
            }
          }
        ]
      },
      {
        "clips": [
          {
            "asset": {
              "type": "html",
              "width": 300,
              "height": 44,
              "html": "<p data-html-type=\"text\">HELLO WORLD</p>",
              "css": "p { color: #ffffff; font-size: 32px; font-family: 'Montserrat ExtraBold'; text-align: center; }"
            },
            "start": 5.06,
            "length": 5,
            "transition": {
              "out": "fade",
              "in": "fade"
            },
            "transform": {
              "rotate": {
                "angle": 0
              }
            },
            "fit": "none",
            "scale": 1,
            "offset": {
              "x": 0.33,
              "y": 0.385
            },
            "position": "center"
          }
        ]
      }
    ]
  },
  "output": {
    "format": "mp4",
    "fps": 25,
    "size": {
      "width": 1024,
      "height": 576
    },
    "destinations": []
  }
}

Here is the video