{{liquid-bind}}

Renders a bound value into your template, and uses the transition map to decide how to animate when the bound value changes.

Saying {{liquid-bind someValue}} is a drop-in replacement for {{someValue}}, except this wraps the content in markup so that it can be targeted for animation. See the Common Behavior and Options that apply to all liquid-fire helpers.

There is also a block form of {{#liquid-bind}} that is demonstrated on the next page.

<div id="liquid-bind-demo">
  {{liquid-bind hours}}:{{liquid-bind minutes}}:{{liquid-bind seconds}}
</div>

this.transition(
  this.childOf('#liquid-bind-demo'),
  this.use('toUp')
);

#liquid-bind-demo {
    font-size: 48px;
    line-height: 66px;
    text-align: center;
    .liquid-outlet {
	display: inline-block;
	vertical-align: top;
    }
    .liquid-child {
        /* This prevents a slight horizontal wobble in firefox. */
        width: 1.5em;
    }
}

« liquid-outlet
liquid-bind (block form) »