Liquid Fire Reverse Animation when using Bind

Learning Team
1

Thanks for taking the time to read and maybe chime in on my question.

Goal

Custom animation for a survey taking application using Liquid Fire. When a user clicks the “continue” button, the oldElement fades to the left, while fading in the newElement after the oldElement is gone. Inversely, if the user clicks the “goBack” button, the reverse happens with the newElement fading out to the right, and previous question comes back into place.

What’s working

I have the fading out to the left working, but I can’t trigger an animation when the user clicks “go back”. Before I paste my working example, let me point out some gotchas.

  1. The questions are values, not routes. So I’m having to use liquid-bind to listen for when the question changes.
  2. I’m having to write my own custom animation because for whatever reason, transitioning between questions wouldn’t always reset my browser to the top of the page. So before I fade in my newElement I scroll to the top of the page.

What I’d Like to Know

  • If you’re using {{#liquid-bind}} to listen for changes in values, is it possible to use this.reverse()? If so, how the heck do you do that?
  • Is this even the best way to solve this problem?

Thanks again!

// transition-to-next-page.js
export default function transitionToNextPage(opts={}) {
    let duration = 300;
    let firstStep;
    let oldParams = {},
        newParams = {};

    if (isAnimating(this.oldElement, 'moving-in')) {
        firstStep = finish(this.oldElement, 'moving-in');
    } else {
        stop(this.oldElement);
        firstStep = Promise.resolve();
    }

    if (this.newElement) {
        this.newElement.velocity('scroll', { offset: -50 });
        this.newElement.css('overflow', 'visible');
    }

    return firstStep.then(() => {
        let $elSize = this.oldElement.outerWidth();

        oldParams = {
            translateX: `-${$elSize}px`,
            opacity: 0
        }
        newParams = {
            opacity: [(opts.maxOpacity || 1), 0],
        }
        return Promise.all([
            animate(this.oldElement, oldParams, { duration }),
            animate(this.newElement, newParams, { duration }, 'moving-in')
        ]);
    });
}
// transition.js
    this.transition(
        this.hasClass('question-template'),
        this.use('transitionToNextPage'),
        // just trying to get this to work
        this.reverse('goLeft')
    )
2

Just a quick thought — you might be able to do this in the template by choosing the transition based on the status of the boolean (I might have this reversed):

{{#liquid-bind bool use=(if bool "moving-out" "moving-in")}}
  Stuff
{{/liquid-bind}}
1 Like
3

Actually this works. I tried a quick implementation of it and it worked as expected. Just have to set something that toggles the bool. Thanks!

4

Glad to hear that worked!