How to use liquid-fire - 10 common examples

export default function rotateBelow(opts={}) {
  var direction = 1;
  if (opts.direction === 'cw') {
    direction = -1;
  }
  stop(this.oldElement);
  if (this.oldElement) {
    this.oldElement.css('transform-origin', '50% 150%');
  }
  if (this.newElement) {
    this.newElement.css('transform-origin', '50% 150%');
  }
  return Promise.all([
    animate(this.oldElement, { rotateZ: -90*direction + 'deg' }, opts),
    animate(this.newElement, { rotateZ: ['0deg', 90*direction+'deg'] }, opts),
  ]);
}
// END-SNIPPET

firstStep;

  if (dimension.toLowerCase() === 'x') {
    oldParams.translateX = `${(direction * offset)}px`;
    newParams.translateX = ['0px', `${(direction * offset)}px`];
  } else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}

export default function rotateBelow(opts={}) {
  var direction = 1;
  if (opts.direction === 'cw') {
    direction = -1;
  }
  stop(this.oldElement);
  if (this.oldElement) {
    this.oldElement.css('transform-origin', '50% 150%');
  }
  if (this.newElement) {
    this.newElement.css('transform-origin', '50% 150%');
  }
  return Promise.all([
    animate(this.oldElement, { rotateZ: -90*direction + 'deg' }, opts),
    animate(this.newElement, { rotateZ: ['0deg', 90*direction+'deg'] }, opts),
  ]);
}
// END-SNIPPET

} else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}

export default function rotateBelow(opts={}) {
  var direction = 1;
  if (opts.direction === 'cw') {
    direction = -1;
  }
  stop(this.oldElement);
  if (this.oldElement) {
    this.oldElement.css('transform-origin', '50% 150%');
  }
  if (this.newElement) {
    this.newElement.css('transform-origin', '50% 150%');
  }
  return Promise.all([
    animate(this.oldElement, { rotateZ: -90*direction + 'deg' }, opts),
    animate(this.newElement, { rotateZ: ['0deg', 90*direction+'deg'] }, opts),
  ]);
}
// END-SNIPPET

let outOpts = opts,
      firstStep;

  if (dimension.toLowerCase() === 'x') {
    oldParams.translateX = `${(direction * offset)}px`;
    newParams.translateX = ['0px', `${(direction * offset)}px`];
  } else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}

oldParams.translateX = `${(direction * offset)}px`;
    newParams.translateX = ['0px', `${(direction * offset)}px`];
  } else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}

/* app/transitions/blue-animation.js */
import { curryTransition } from "liquid-fire";
export default curryTransition('myAnimation', 'blue', { duration: 300 });

/* within app/transitions.js */
this.transition(
  this.withinRoute('home'),
  this.use('blueAnimation')
);

export default function (/* arg1, arg2 */) {
  // Stop any currently running animation on oldElement
  stop(this.oldElement);

  // Fade out the old element
  return animate(this.oldElement, { opacity: 0 })
    // And then fade in the new element, from opacity 0 to 1
    .then( () =>
      animate(this.newElement, { opacity: [1, 0] })
    );
}

} else {
    oldParams.translateY = `${(direction * offset)}px`;
    newParams.translateY = ['0px', `${(direction * offset)}px`];
  }

  if (fadingElement) {
    // We still have some older version that is in the process of
    // fading out, so out first step is waiting for it to finish.
    firstStep = finish(fadingElement, 'fade-out');
  } else {
    if (isAnimating(this.oldElement, 'fade-in')) {
      // if the previous view is partially faded in, scale its
      // fade-out duration appropriately.
      outOpts = { duration: timeSpent(this.oldElement, 'fade-in') };
    }
    stop(this.oldElement);
    firstStep = animate(this.oldElement, oldParams, outOpts, 'fade-out');
  }
  return firstStep.then(() => {
    return animate(this.newElement, newParams, opts, 'fade-in');
  });
}