Template Helpers

{{#liquid-outlet}}
Transitions between routes.
{{#liquid-bind}}
Transitions between models or other values within a single route.
{{#liquid-if}}
Switching between true and false branches in an #if statement.
{{#liquid-spacer}}
Provides a smoothly growing/shrinking container that animates whenever its contained DOM mutates.

Common Behavior and Options

All of the above helpers share some core behaviors and options:

  • Each helper is a semantic drop-in replacement for the corresponding normal Ember helper.
  • Except they generate DOM elements:
    • a <div class="liquid-container"> to serve as a container for animations. It is position:relative by default.
    • a <div class="liquid-child"> to wrap the content and serve as a target for animations.
  • Whenever bound data updates, the helper consults the transition map and decides whether to animate the transition.
  • While animating, the liquid-container will contain liquid-children for both the outgoing and incoming states (or possibly even more, if transitions interrupt each other), and the transition has full control over animating them.
  • The liquid-container can animate it's own height and width to smoothly match the size difference between its old and new content.
  • liquid-fire makes your content absolutely positioned only while needed for running animations, and deals with holding your place in the normal document flow. This greatly simplifies the problem of designing animation-friendly layouts.

Options

class
You can pass both static and bound class names in the normal Ember way. They will apply to the liquid-container element.
use
Lets you provide a transition name directly (example: use="crossFade"), skipping the transition map. This is useful for the simplest cases in which you don't care about context at all and always want to use the same animation. The use will match all transitions except the initial render. For more control, use the transition map.
growDuration
The maximum amount of time to spend growing. For small changes, we may spend less than this time depending on growPixelsPerSecond. Defaults to 250 milliseconds.
growPixelsPerSecond
The minimum speed in at which we will grow. Defaults to 200 pixels per second. This lets us make small size adjustments in times shorter than a full growDuration.
growEasing
A Velocity easing function to use when growing the container height and width. Defaults to 'slide'.
shrinkDelay
A delay applied before the container shrinks in width or height. Defaults to 0.
growDelay
A delay applied before the container grows in width or height. Defaults to 0.
enableGrowth
Whether the container should animate its own height and width changes. Defaults to true.