controllerPopRot


popRot(duration, rotation, far_z,
       affect, register_actions)

popRot.messages = [show, show_immediately, hide, hide_immediately]
popRot.events   = [show_start, show_end, hide_start, hide_end]

Description

DOM Element

Performs a transition of the element from its current position (the shown state) to a position far away (in positive or negative direction) on the Z axis (the hidden state), and backwards to the shown state. Apart from moving on the Z axis, the element is also rotated around its Y axis and its opacity is decreased to zero on the way to the hidden state. The amount of rotation is controlled via the rotation param, the Z position of the hidden state - via the far_z param.

This controller instantiates a move(), a rotate() and a opacity() controllers which perform the transitions on the respective properties.

The instantiated sub-controllers apply one translate and one rotate transform.

Parameters

Visit page Controller # Common Parameters for documentation on the parameters, common to all controllers: id, paused and disabled.

Parameters of popRot():

duration

Duration of the animation (forward or backward) in milliseconds. Default value: 700

rotation

Amount of rotation around axis Y, in degrees, of the forward transition (from the shown to the hidden state). Negative values result in rotation in the opisite direction. Supply a value of 0 for no rotation (only translate and opacity transitions). Default value: -720

far_z

Z coordinate, in pixels, of the hidden state. Can have a positive value (for disappearing towards the camera), or a negative value (for disappearing in the far distance). Default value: -500%

affect

Whether the opacity animation should change the element's style.display or style.visibility properties when the element reaches its 'hidden' state.
Possible values:

"" - style.display and style.visibility are not affected,
"display" - style.display is set to "none" when the element's opacity reaches 0, and then back to its original value when the element's opacity becomes different than 0,
"visibility" - style.visibility is set to "hidden" when the element's opacity reaches 0, and then back to "visible" when the element's opacity becomes different than 0.

Default value: ""

register_actions

Tells whether to handle the element's show, hide, show_immediately and hide_immediately actions.
Values: false / true / "500" (i.e. react with 500 milliseconds delay) / "500 elm" (i.e. set event handlers with delay 500ms for HTML element #elm's actions). Default value: false

Accepted Messages

Visit page Controller # Common Messages for documentation on the messages, accepted by all controllers: pause, unpause, enable, disable, params and remove.

Messages specific to popRot():

show: Start transitioning towards the shown state of the controller. This message has no effect if the controller is already performing such a transition or is in the shown state. Message params: none
show_immediately: Immediately position the controller into its shown state and transform the element respectively. This message has no effect if the controller is already in the shown state. Message params: none
hide: Start transitioning towards the hidden state of the controller. This message has no effect if the controller is already performing such a transition or is in the hidden state. Message params: none
hide_immediately: Immediately position the controller into its hidden state and transform the element respectively. This message has no effect if the controller is already in the hidden state. Message params: none

Generated Events

Visit page Controller # Common Events for documentation on the events, generated by all controllers: frame, remove, paused, unpaused enabled and disabled.

Events fired by popRot():

show_start: Fired upon the start of a transition towards the shown state. Event params: none
show_end: Fired upon the end of a transition towards the shown state. Event params: none
hide_start: Fired upon the start of a transition towards the hidden state. Event params: none
hide_end: Fired upon the end of a transition towards the hidden state. Event params: none

Interaction with DOM

Transforms: Applies one translate and one rotate transform.
CSS: Works with any styling. Modifies the element's style.opacity property.
Events: Does not set event listeners.

Changes Log

Controller introduced in v.0.80