Barba: Different animation for different page

[RhysyG]

Hi there,

I have a really nice animation I use for most pages, however it doesn't work for all instances (ie: no toolbar on login page).

How can I use a different animation sequence for a select few pages?
I know you have the next and prev example, but it's not a next and prev type app.

Thanks.

[Wouter125]

You serve the animations through

Barba.Pjax.getTransition

Build multiple transitions, and within the getTransition write some logic for which links you would like to have the other animation.

[RhysyG]

Ah that makes sense. Thank you! I'll post my solution soon for anyone else wanting to know this.

[wiseoldman]

Leaving this here in case you haven't seen it: https://github.com/luruke/barba.js/issues/19#issuecomment-223874845

[faiz90din]

@RhysyG Hi Rhys, is that your problem resolved? If yes, appreciate if you can share your solution here.

[Wouter125]

I did something like this. Within the return statements I call my different transitions. It can probably be done easier but this works;

    Barba.Pjax.getTransition = function () {
        var newPage = Barba.HistoryManager.currentStatus().url.split('/').pop();
        var prevPage = Barba.HistoryManager.prevStatus().url.split('/').pop();

        if (prevPage === 'index' && isCasestudy(newPage) || prevPage === "" && isCasestudy(newPage)) {
            return cardToCasestudy;
        }

        if (isCasestudy(prevPage) && newPage === 'index') {
            return casestudyToCard;
        }

        if (!isCasestudy(newPage)) {
             return pageToPage;
        }

        if (isCasestudy(prevPage) && isCasestudy(newPage)) {
             return casestudyToCasestudy;
        }
    }

[faiz90din]

Hi @Wouter125 Awesome. As now I need to do motion blur between pages using Barba, any idea?