Different transition for previous and next

[barbajs]

Different transition for previous and next

[lukaskleinschmidt]

@kekkorider A different approach using the history API. It's a little chunky but perhaps helps.

https://gist.github.com/lukaskleinschmidt/f1c6a6bebb7bb131604f1884d4b2a6e0

[luruke]

Hello @Cellcote!

Have two transitions is certainly a good approach, but depending on the final animation you want to achieve, you may consider to have just one single Transition object, and maybe change some parameters for the animation.

For example, for a left or right animation, could be just a matter of changing the destination of the tween.

In order to modify your Transition, or choose the right Transition object you may want to use Barba.Pjax.HistoryManager.

on Barba.Pjax.HistoryManager you have two useful functions:

• currentStatus
• prevStatus

which respectively returns information about the next/prev urls and namespaces.

(I just noticed that the generated documentation for that part, seems broken, i'll try to fix it asap.)

Try to have a look look at this demo and his source code:
http://barbajs.org/demo/nextprev/

Hope it answer to your question!

[theamnesic]

Hi !

I'm trying to have a different transition too, when the new page is the same as the previous page of the actual page.

For example :

• I'm on About page
• I click an item on my nav and go to Portfolio page
• Back to About (previous button in my browser or on the same item in the navigation)

I'll try to use your "nextprev" demo but the this.oldContainer.dataset.prev on line 48 is undefined and I can't find it.

In fact, I want to make like your demo, but with no next/prev buttons.
Any idea to make this clean ?

Thanks for your help, and thanks for Barba!

— G

[kekkorider]

+1

Same problem here, can't figure it out :(

[luruke]

@kekkorider Try to have a look here: #19 (comment)

[kekkorider]

@luruke unfortunately it didn't work, but @lukaskleinschmidt gist did! Thanks a lot mate :D