Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
A set of additional cross-platform arrangers for enyo.Panels. Supports hardware-accellerated 3D CSS transitions and falls back to 2D where required.
JavaScript
branch: master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
examples
source Use correct arrangement function for SladeArranger
README.md
package.js Add package.js

README.md

More Arrangers

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.

So what are they?

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.

Example

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"}
                ]},
            ]}

To-Do

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.

Known Issues

  • 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.
Something went wrong with that request. Please try again.