Flip Effect

The flip effect, which simulates a flip between a front and back view of an object by means of a 3D rotation, is an interaction between a PIXI scatter object and a DOM Flip effect. The PIXI scatter is used as the source for the front view of the DOM Flip which is created on demand if the user clicks the Info Button which is added to the PIXI scatter by the FlipEffect wrapper.

For the user it simply looks like a single flipping card, but in terms of UI elements, the following levels are mixed:

• A PIXI scatter object, typically a zoomable image, as the default front view.
• A special button (typically an info button), which triggers the animation.
• A DOM based animation which works on a DOM clone of the PIXI scatter and a DOM representation of the back card. The PIXI scatter is hidden in the meanwhile.
• If the back card is closed, the DOM nodes are removed and the PIXI scatter is shown again.

Example