Templating

With templates, you can pinpoint exactly which part of the text you want to replace by inserting tags. Template tags are wrapped in {} and can be styled just like any other text.

theTextLayer.template =
    pet: "?"
    hobby: "?"
    number: 10
    gift: "?"

There’s a shortcut for when your Text Layer has just one tag, or when you only want to set the first tag:

theTextLayer.template = "?"

You can also animate to a new value. It will not make a difference for text, but numbers will be animated. When you first animate to a number, it will count up from zero. Afterwards, it will count up or down to the new value.

theTextLayer.animate
    template:
        number: Utils.randomNumber 1, 20

(From the example prototype above: {number} gets animated to a ? Random Number between1and20.)

Swapping between styles

Templating can (sometimes) be used as a way to switch between different styles. You can prepare different stylings for a text block and then swap them in and out.

For example, most of these example prototypes have a Text Layer named title that contains {v} and {d} tags. I always hide one of them by giving it an empty string:

title.template =
    v: ""
    d: "«default»"

Template formatter

With the templateFormatter, you can set how numbers should appear (or animate). You’ll often use it to limit the number of decimals.

In the formatter, you give your existing template tag a function that does something to the value.

The first counter above doesn’t have a template formatter; the {s} tag is simply animated to the number 5 (over a duration of five seconds). That’s why we also see the decimal values roll by.

textLayer1.animate
    template:
        s: 5

The second counter has two tags: and.

• For the ‘seconds’ tag {s} the value is formatted to a number without decimals, using ? Round.
• And the ‘milliseconds’ tag {ms} will show 1/1000th of every second (using the % remainder operator).

textLayer2.templateFormatter =
    s: (value) ->
        Utils.round value
    ms: (value) ->
        Utils.round ( value * 1000 ) % 1000

The third counter’s template formatter takes the value in seconds and converts it into minutes and numbers, with a colon (:) between them.

textLayer3.templateFormatter =
    m: (value) ->
        minutes = Math.floor(value / 60)
        seconds = Math.round(value % 60)
    if seconds < 10
        seconds = "0#"
    return "#:#"

It uses a return statement to define what exactly should be returned by the function. (By default, CoffeeScript will return the last value.)

The Template formatter also has a shortcut for when your Text Layer has just one tag (or you only want to format the first tag):

textLayer1.templateFormatter = (value) ->
    Utils.round value