#

API Docs for: 3.10.3
Show: Inherited Protected Private Deprecated

# Plugin.Flick Class

Defined in: `node-flick/js/NodeFlick.js:31`
Module: node-flick

A plugin class which can be used to animate the motion of a node, in response to a flick gesture.

- Index
- Methods
- Properties
- Attributes

## Item Index

### Methods

- _anim
- _bounce
- _flickFrame
- _killTimer
- _move
- _onFlick
- _renderClasses
- _setX
- _setY
- initializer
- setBounds

### Properties

- CLASS_NAMES static
- EASING static
- NAME static
- NS static
- SNAP_DURATION static
- SNAP_EASING static
- VELOCITY_THRESHOLD static

### Attributes

- bounce
- bounceDistance
- boundingBox
- deceleration
- duration
- easing
- minVelocity
- minVelocity
- step

## Methods

### `_anim`

(

- `x`
- `y`
- `duration`
- `easing`

)
private

Defined in `node-flick/js/NodeFlick.js:392`

Internal utility method to perform the transition step

#### Parameters:

- `x` Number

  The X offset position

- `y` Number

  The Y offset position

- `duration` Number

  The duration to use for the transition animation

- `easing` String

  The easing to use for the transition animation.

### `_bounce`

(

- `x`
- `max`

)
private

Defined in `node-flick/js/NodeFlick.js:424`

Internal utility method to constrain the offset value based on the bounce criteria.

#### Parameters:

- `x` Number

  The offset value to constrain.

- `max` Number

  The max offset value.

### `_flickFrame`

() protected

Defined in `node-flick/js/NodeFlick.js:252`

Executes a single frame in the flick animation

### `_killTimer`

() private

Defined in `node-flick/js/NodeFlick.js:451`

Stop the animation timer

### `_move`

(

- `x`
- `y`
- `duration`
- `easing`

)
private

Defined in `node-flick/js/NodeFlick.js:357`

Internal utility method to move the node to a given XY position, using transitions, if specified.

#### Parameters:

- `x` Number

  The X offset position

- `y` Number

  The Y offset position

- `duration` Number

  The duration to use for the transition animation

- `easing` String

  The easing to use for the transition animation.

### `_onFlick`

(

- `e`

)
protected

Defined in `node-flick/js/NodeFlick.js:239`

The flick event listener. Kicks off the flick animation.

#### Parameters:

- `e` EventFacade

  The flick event facade, containing e.flick.distance, e.flick.velocity etc.

### `_renderClasses`

() protected

Defined in `node-flick/js/NodeFlick.js:227`

Adds the CSS classes, necessary to set up overflow/position properties on the node and boundingBox.

### `_setX`

(

- `val`

)
private

Defined in `node-flick/js/NodeFlick.js:335`

Internal utility method to set the X offset position

#### Parameters:

- `val` Number

### `_setY`

(

- `val`

)
private

Defined in `node-flick/js/NodeFlick.js:346`

Internal utility method to set the Y offset position

#### Parameters:

- `val` Number

### `initializer`

(

- `config`

)

Defined in `node-flick/js/NodeFlick.js:175`

The initializer lifecycle implementation.

#### Parameters:

- `config` Object

  The user configuration for the plugin

### `setBounds`

()

Defined in `node-flick/js/NodeFlick.js:193`

Sets the min/max boundaries for the flick animation, based on the boundingBox dimensions.

## Properties

### `CLASS_NAMES`

Object static

Defined in `node-flick/js/NodeFlick.js:506`

The default CSS class names used by the plugin

### `EASING`

String static

Defined in `node-flick/js/NodeFlick.js:486`

The default easing to use for the main flick movement transition

Default: 'cubic-bezier(0, 0.1, 0, 1.0)'

### `NAME`

String static

Defined in `node-flick/js/NodeFlick.js:151`

The NAME of the Flick class. Used to prefix events generated by the plugin.

Default: "pluginFlick"

### `NS`

String static

Defined in `node-flick/js/NodeFlick.js:162`

The namespace for the plugin. This will be the property on the node, which will reference the plugin instance, when it's plugged in.

Default: "flick"

### `SNAP_DURATION`

Number static

Defined in `node-flick/js/NodeFlick.js:476`

The duration to use for the bounce snap-back transition

Default: 400

### `SNAP_EASING`

String static

Defined in `node-flick/js/NodeFlick.js:496`

The default easing to use for the bounce snap-back transition

Default: 'ease-out'

### `VELOCITY_THRESHOLD`

Number static

Defined in `node-flick/js/NodeFlick.js:465`

The threshold used to determine when the decelerated velocity of the node is practically 0.

Default: 0.015

## Attributes

### `bounce`

Number

Defined in `node-flick/js/NodeFlick.js:55`

Drag coefficient for intertial scrolling at the upper and lower boundaries of the scrollview. Set to 0 to disable "rubber-banding".

Default: 0.7

#### Fires event `bounceChange`

Fires when the value for the configuration attribute `bounce` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `bounceDistance`

Number

Defined in `node-flick/js/NodeFlick.js:68`

The bounce distance in pixels

Default: 150

#### Fires event `bounceDistanceChange`

Fires when the value for the configuration attribute `bounceDistance` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `boundingBox`

Node

Defined in `node-flick/js/NodeFlick.js:101`

The constraining box relative to which the flick animation and bounds should be calculated.

Default: parentNode

#### Fires event `boundingBoxChange`

Fires when the value for the configuration attribute `boundingBox` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `deceleration`

Defined in `node-flick/js/NodeFlick.js:44`

Drag coefficent for inertial scrolling. The closer to 1 this value is, the less friction during scrolling.

Default: 0.98

#### Fires event `decelerationChange`

Fires when the value for the configuration attribute `deceleration` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `duration`

Number

Defined in `node-flick/js/NodeFlick.js:125`

The custom duration to apply to the flick animation. By default, the animation duration is controlled by the deceleration factor.

Default: null

#### Fires event `durationChange`

Fires when the value for the configuration attribute `duration` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `easing`

String

Defined in `node-flick/js/NodeFlick.js:137`

The custom transition easing to use for the flick animation. If not provided defaults to internally to Flick.EASING, or Flick.SNAP_EASING based on whether or not we're animating the flick or bounce step.

Default: null

#### Fires event `easingChange`

Fires when the value for the configuration attribute `easing` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `minVelocity`

Number

Defined in `node-flick/js/NodeFlick.js:79`

The minimum flick gesture velocity (px/ms) at which to trigger the flick response

Default: 0

#### Fires event `minVelocityChange`

Fires when the value for the configuration attribute `minVelocity` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `minVelocity`

Number

Defined in `node-flick/js/NodeFlick.js:90`

The minimum flick gesture distance (px) for which to trigger the flick response

Default: 10

#### Fires event `minVelocityChange`

Fires when the value for the configuration attribute `minVelocity` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.

### `step`

Number

Defined in `node-flick/js/NodeFlick.js:114`

Time between flick animation frames.

Default: 10

#### Fires event `stepChange`

Fires when the value for the configuration attribute `step` is changed. You can listen for the event using the `on` method if you wish to be notified before the attribute's value has changed, or using the `after` method if you wish to be notified after the attribute's value has changed.

#### Parameters:

- `e` EventFacade
  An Event Facade object with the following attribute-specific properties added:
  - `prevVal` Any
    The value of the attribute, prior to it being set.
  - `newVal` Any
    The value the attribute is to be set to.
  - `attrName` String
    The name of the attribute being set.
  - `subAttrName` String
    If setting a property within the attribute's value, the name of the sub-attribute property being set.