Home Examples Docs
4. Basics of targets
Targets can be used in three different ways:
1. For their internal mechanisms, including looping, iteration, timing, and built-in methods and callbacks. We'll cover target methods and callbacks in the next section.
2. For their reactive behavior that targets can execute in response to the execution of preceding targets. They can be triggered either when the preceding target runs or after it completes.
3. As a hybrid approach that combines both ways.
Understanding TargetJS Syntax: Reactive Postfixes
TargetJS uses the postfixes $ and $$ appended to target names for defining reactive behaviors. While initially appearing a bit cryptic, this convention provides a compact syntax.
1. $ Postfix (Immediate Reactivity): A target name ending with a single $ (e.g., height$) indicates that this target will execute every time its immediately preceding target runs or emits a new value.
2. $$ Postfix (Full Completion Reactivity): A target name ending with a double $$ (e.g., fetch$$) will activate only after its immediately preceding targets have fully and comprehensively completed all of their operations.
It's best to illustrate how targets work with an example. The example below updates the x value through a list of values [0, 150, 0] over 30 steps. The y$ target is reactive and runs on each update of x during its 30-step updates. The wait$$ target executes only after x has completed all its updates. The name 'wait' is not a special keyword. We are simply using it to indicate a pause, The period of the pause is defined by the interval property. Similarly, repeat$$ executes only after the 2-second pause completes.
Or in HTML:
    <div 
        tg-background="#fff"
        tg-width="50"
        tg-height="50"
        tg-coreTargets=""
        tg-x="{
            easing: TargetJS.Easing.inOutQuad,
            value() {
                return [ { list: [0, 150, 0] }, 30 ];
            }
        }"
        tg-y$="function() { return this.prevTargetValue; }"
        tg-wait$$="{ interval: 2000 }"
        tg-repeats$$="function() { this.activateTarget('x'); }"
    >
    </div>