Class: FLIP

FLIP

new FLIP(config)

Creates a new FLIP helper.
Parameters:
Name Type Description
config Object The configuration for the helper.
Properties
Name Type Attributes Default Description
element HTMLElement The element on which to operate.
duration Number <optional>
 1000 The duration of the animation in milliseconds.
ease function <optional>
 The easing function of the animation.
transform Boolean <optional>
 true Whether or not to animate transforms for the element.
opacity Boolean <optional>
 true Whether or not to animate opacity for the element.
Source:

Members

(static) version

Returns the library version.
Source:

Methods

(static) extend(name, player)

Extends FLIP to be able to play. Allows for the use of libraries when it comes to playback. The functions in the player object are all copied and bound to the instance of the FLIP Helper on instantiation.
Parameters:
Name Type Description
name String The name of the player, e.g. 'rAF'.
player Object The object with the playback functions.
Properties
Name Type Description
play_ function The playback function to use.
Source:

(static) group() → {FlipGroup}

Creates a group of FLIP helpers, usually used when you want to have some form of composite animation, with related but visually independent elements.
Source:
Returns:
An object which has the same API as an individual FLIP helper, but controls the group as a whole.
Type
FlipGroup

addClass(className)

Convenience method to add a class to the element.
Parameters:
Name Type Description
className string The class name to add to the element.
Source:

cleanUpAndFireEvent_()

Function to call to get rid of all the transforms, opacity, internal values and fire an event for the FLIP completion.
Source:

first()

Snapshots the layout and opacity information for the element.
Source:

invert()

Moves the element back to its start position, size, and opacity by applying changes to its transform and opacity values.
Source:

last(lastClassNameopt)

Applies the class that moves the element to its last position. It then takes a snapshot of the element's final location and opacity.
Parameters:
Name Type Attributes Description
lastClassName string <optional>
 The class name applied to the element that moves it to its final position.
Source:

play(startTimeopt)

Plays the animation.
Parameters:
Name Type Attributes Description
startTime Number <optional>
 The time the animation should start (using window.performance.now as the source of truth).
Source:

removeClass(className)

Convenience method to remove a class to the element.
Parameters:
Name Type Description
className string The class name to remove from the element.
Source:

snapshot(lastClassNameopt)

Convenience method that calls first(), last(), and invert() immediately after each other.
Parameters:
Name Type Attributes Description
lastClassName string <optional>
 The class name applied to the element that moves it to its final position.
Source: