Question

[1N50MN14]

Just a silly question @Rich-Harris is it possible to use/expand this plugin to achieve push right/left transition similar to this http://tympanus.net/Blueprints/SlidePushMenus/ (last two demos) it's been a bit tricky for me as both sections need to stay in the dom so I've been adding/removing classes which is a bit hacky I guess..

I'm using the same "hacky" approach to achieve stuff like this http://tympanus.net/Development/PageTransitions/ (borrowed the css from them) and two active "Ractives" which I dynamically build/teardown when animations are complete.

I see you got plenty of stuff on your plate so no rush to answer, I'm just thinking out loud here.

PS: thanks for making this node-compatible :)

[michaelsogos]

Hi guys,

Any news about that?
I need to simulate the page slide right/left like iphone application.

[Rich-Harris]

@michaelsogos eek! no, still on the todo list... In any case you might be better off using ractive-transitions-fly for that, since (presumably) you want the page to come in fully-formed - does that meet your needs?

[rstacruz]

Not exactly ractive-specific, but I've built a library specifically for iphone page sliding: http://github.com/rstacruz/navstack you might wanna give it a go.

[martypdx]

Here's an example with some of the basic mechanics of a page transition (from my experience): http://jsfiddle.net/eovfjhdt/

First key thing is the use of ractive.merge() to transition the existing page out, and the new page in.

Second key thing is to be able to change the direction. In this example, I created a wrapper transition in order to set the direction before delegating to the fly transition (I grabbed this one, but you could make your own or use slide. fly may not be ideal as it fades the opacity as well)

[michaelsogos]

Thanks for your answers!

I will try your suggestions, in the mean time i found this https://github.com/codrops/PageTransitions.

[zenflow]

If I'm understanding this issue correctly and all you need is an an element to transition in by expanding horizontally, try ractive-transitions-slidehorizontal. I think with this transition and a bit of custom css you should acheive your end goal.