iwmlib

Class: Flippable

Flippable

Class that represents a PixiJS Flippable.

new Flippable (front, back, renderer, opts)

flippable.js:46

Creates an instance of a Flippable.

Name Type Description
front PIXI.DisplayObject

The object to show initially. Should have been added to the scene.
back PIXI.DisplayObject

The object to show on the backside. Should have not been added to the scene.
renderer PIXI.Renderer | PIXI.CanvasRenderer

The renderer of the application.
opts object optional

An options object which can contain the following properties.

Name Type Default Description
duration number 1 optional

The duration of the flip animation in seconds.
ease GSAP.Ease Power2.easeOut optional

The ease of the flip animation.
shadow boolean false optional

Should be a shadow been display during the animation?
eulerX numer 0 optional

The shift of the x-axis during the animation.
eulerY numer 0 optional

The shift of the y-axis during the animation.
eulerEase GSAP.Ease Power1.easeOut optional

The ease of the shift.
useBackTransforms boolean false optional

When set to true, the flip animation also animates to the transform parameters of the back-object.
transformEase GSAP.Ease Power2.easeOut optional

The ease of the transform.
focus numer 800 optional

The value of the focus of the 3D camera (see pixi-projection).
near numer 10 optional

The near value of the 3D camera (see pixi-projection).
far numer 10000 optional

The far value of the 3D camera (see pixi-projection).
orthographic boolean false optional

Should the flip animation be an orthographic animation?
onStart function null optional

A callback executed on start of the flip animation.
onUpdate function null optional

A callback executed on each step of the flip animation.
onComplete function null optional

A callback executed when the flip animation is finished.
See:
Example
const front = PIXI.Sprite.from('./assets/front.jpg')
const back = PIXI.Sprite.from('./assets/back.jpg')
app.scene.addChild(front)

// Create the flippable
const flippable = new Flippable(front, back, app.renderer)

front.interactive = true
front.on('click', event => flippable.toggle())

Extends

  • PIXI.projection.Camera3d

Members

flipped boolean

Gets or sets the flipped state.

frontSideInFront boolean

Gets the alignment state. true if the front side is in front, false otherwise.

Methods

layout ()Flippable

flippable.js:331

Should be called to refresh the layout of the camera.

Returns:
Type Description
Flippable A reference to the flippable for chaining.