More Arrangers is a set of additional cross-platform arrangers for enyo.Panels.
Features:
- Autodetects the host browser's CSS prefix.
- Supports hardware-accellerated 3D CSS transitions and falls back to 2D where required.
The available arrangers are as follows:
- SladeArranger - A combination slide/fade transition.
- PushPopArranger - A scale/fade transition, akin to moving between scenes in the Mojo framework.
- HFlipArranger - Rotates the current panel 180 degrees, revealing the target panel in it's backface.
- BoxTurnArranger - Rotate between panels as if they were the sides of a cube.
- PageTurnArranger - Turn between panels like the pages of a book.
- PageSpinArranger - Like PageTurn, but the back page turns as well as the front one.
Using More Arrangers is easy, just create a Panels kind and choose an arranger from the above list:
{kind: "Panels",
classes: "panels enyo-unselectable",
style: "margin:5%; overflow:visible;",
arrangerKind: "HFlipArranger",
components: [
{name: "left", style: "background: beige;", components: [
{content: "Left"}
]},
{name: "middle", style: "background: tomato;", components: [
{content: "Middle"}
]},
{name: "body", style: "background: lightblue;", components: [
{content: "Body"}
]},
]}High-Resolution Variants with multiple panels viewable at once. Toggleable.
- Slade: Don't fade between visible, moving panels.
- PushPop: No, just no.
- HFlip: Erm..?
- BoxTurn: Conveyor belt.
- PageTurn: Book display, two panels instead of one. Variable widths.
- PageSpin: Rolodex? Might be difficult to make it look good.
Modify PageTurn to flip 180 degrees, doesn't look quite right atm.
- PageTurn has Z-Sorting issues, causing it to flicker near the start/end of transitions.
- PushPop will sometimes flicker near the end of transitions. Only seems to effect going left/back from the last item.