Class Tweenable

Hierarchy

Tweenable

Index

Constructors

constructor

new Tweenable(initialState?: TweenState, config?: TweenableConfig): Tweenable
Parameters
- initialState: TweenState = {}
  
  The values that the initial tween should start at if a from value is not provided to tween or setConfig.
- Optional config: TweenableConfig
  
  Configuration object to be passed to setConfig.
Returns Tweenable
- Defined in src/tweenable.ts:496

Properties

`Static` easing

easing: {
    bounce: ((pos: number) => number);
    bouncePast: ((pos: number) => number);
    easeFrom: ((pos: number) => number);
    easeFromTo: ((pos: number) => number);
    easeInBack: ((pos: number) => number);
    easeInCirc: ((pos: number) => number);
    easeInCubic: ((pos: number) => number);
    easeInExpo: ((pos: number) => number);
    easeInOutBack: ((pos: number) => number);
    easeInOutCirc: ((pos: number) => number);
    easeInOutCubic: ((pos: number) => number);
    easeInOutExpo: ((pos: number) => number);
    easeInOutQuad: ((pos: number) => number);
    easeInOutQuart: ((pos: number) => number);
    easeInOutQuint: ((pos: number) => number);
    easeInOutSine: ((pos: number) => number);
    easeInQuad: ((pos: number) => number);
    easeInQuart: ((pos: number) => number);
    easeInQuint: ((pos: number) => number);
    easeInSine: ((pos: number) => number);
    easeOutBack: ((pos: number) => number);
    easeOutBounce: ((pos: number) => number);
    easeOutCirc: ((pos: number) => number);
    easeOutCubic: ((pos: number) => number);
    easeOutExpo: ((pos: number) => number);
    easeOutQuad: ((pos: number) => number);
    easeOutQuart: ((pos: number) => number);
    easeOutQuint: ((pos: number) => number);
    easeOutSine: ((pos: number) => number);
    easeTo: ((pos: number) => number);
    elastic: ((pos: number) => number);
    linear: ((pos: number) => number);
    swingFrom: ((pos: number) => number);
    swingFromTo: ((pos: number) => number);
    swingTo: ((pos: number) => number);
} = ...

You can define custom easing curves by attaching EasingFunctions to this static object.

Tweenable.easing['customEasing'] = (pos: number) => Math.pow(pos, 2)

Type declaration

bounce: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
bouncePast: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeFrom: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeFromTo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInBack: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInCirc: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInCubic: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInExpo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutBack: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutCirc: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutCubic: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutExpo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutQuad: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutQuart: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutQuint: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInOutSine: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInQuad: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInQuart: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInQuint: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeInSine: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutBack: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutBounce: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutCirc: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutCubic: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutExpo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutQuad: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutQuart: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutQuint: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeOutSine: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
easeTo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
elastic: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
linear: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
swingFrom: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
swingFromTo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number
swingTo: ((pos: number) => number)
- - (pos: number): number
  - Parameters
    - pos: number
    Returns number

`Static` filters

filters: Record<string, Filter> = ...

The Filters available for use. These filters are automatically applied. You can define your own Filters and attach them to this object.

Tweenable.filters['customFilter'] = {
  doesApply: () => true
  tweenCreated: () => console.log('tween created!')
}

Accessors

hasEnded

get hasEnded(): boolean
Whether or not a tween has completed.

Returns boolean
- Defined in src/tweenable.ts:870

isPlaying

get isPlaying(): boolean
Whether or not a tween is running (not paused or completed).

Returns boolean
- Defined in src/tweenable.ts:863

state

get state(): TweenState
Returns the current state of the tween.

Returns TweenState
- Defined in src/tweenable.ts:675

Methods

cancel

cancel(gotoEnd?: boolean): Tweenable
stops a tween and also rejects its Promise. If a tween is not running, this is a no-op. Prevents calling any provided finish function.

See
https://github.com/jeremyckahn/shifty/issues/122
Parameters
- gotoEnd: boolean = false
  
  This gets propagated to stop.
Returns Tweenable
- Defined in src/tweenable.ts:836

catch

catch(onRejected: RejectionHandler): Promise<PromisedData>
See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/catch
Parameters
- onRejected: RejectionHandler
Returns Promise<PromisedData>
- Defined in src/tweenable.ts:662

data

data(data?: Data): Data
Get and optionally set the data that gets passed as data to StartFunction, FinishFunction and RenderFunction.
Parameters
- data: Data = null
Returns Data
- Defined in src/tweenable.ts:878

dispose

dispose(): void
delete all own properties. Call this when the Tweenable instance is no longer needed to free memory.

Returns void
- Defined in src/tweenable.ts:892

finally

finally(onFinally?: ((onfinally?: null | (() => void)) => Promise<any>)): Promise<PromisedData>
See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/finally
Parameters
- Optional onFinally: ((onfinally?: null | (() => void)) => Promise<any>)
  - - (onfinally?: null | (() => void)): Promise<any>
    - Attaches a callback that is invoked when the Promise is settled (fulfilled or rejected). The resolved value cannot be modified from the callback.
      
      Returns
      A Promise for the completion of the callback.
      
      Parameters
      
      Optional onfinally: null | (() => void)
      
      The callback to execute when the Promise is settled (fulfilled or rejected).
      
      Returns Promise<any>
Returns Promise<PromisedData>
- Defined in src/tweenable.ts:668

pause

pause(): Tweenable
Pauses a tween. Paused tweens can be resumed from the point at which they were paused. If a tween is not running, this is a no-op.

Returns Tweenable
- Defined in src/tweenable.ts:695

resume

resume(): Tweenable
Resumes a paused tween.

Returns Tweenable
- Defined in src/tweenable.ts:710

seek

seek(millisecond: number): Tweenable
Move the state of the animation to a specific point in the tween's timeline. If the animation is not running, this will cause the tween's render handler to be called.
Parameters
- millisecond: number
  
  The millisecond of the animation to seek to. This must not be less than 0.
Returns Tweenable
- Defined in src/tweenable.ts:757

setConfig

setConfig(config?: TweenableConfig): Tweenable
Configures a tween without starting it. Aside from delay, from, and to, each configuration option will automatically default to the same option used in the preceding tween of the Tweenable instance.
Parameters
- config: TweenableConfig = {}
Returns Tweenable
- Defined in src/tweenable.ts:562

setState

setState(state: TweenState): void
Set the current tween state.
Parameters
- state: TweenState
  
  The state to set.
Returns void
- Defined in src/tweenable.ts:682

stop

stop(gotoEnd?: boolean): Tweenable
Stops a tween. If a tween is not running, this is a no-op. This method does not reject the tween Promise. For that, use cancel.
Parameters
- gotoEnd: boolean = false
  
  If false or not provided, the tween just stops at its current state. If true, the tweened object's values are instantly set to the target values.
Returns Tweenable
- Defined in src/tweenable.ts:784

then

then(onFulfilled?: FulfillmentHandler, onRejected?: RejectionHandler): Promise<PromisedData>
Overrides any finish function passed via a TweenableConfig.

See
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise/then
Parameters
- Optional onFulfilled: FulfillmentHandler
- Optional onRejected: RejectionHandler
Returns Promise<PromisedData>
- Defined in src/tweenable.ts:643

tween

tween(config?: TweenableConfig): Tweenable
Configure and start a tween. If this Tweenable's instance is already running, then it will stop playing the old tween and immediately play the new one.
Parameters
- Optional config: TweenableConfig
Returns Tweenable
- Defined in src/tweenable.ts:535

`Static` now

now(): number
Returns the current timestamp.

Returns number
- Defined in src/tweenable.ts:351

`Static` setScheduleFunction

setScheduleFunction(fn: ScheduleFunction): ScheduleFunction
Sets a custom schedule function.

By default, Shifty uses requestAnimationFrame is used if available, otherwise setTimeout is used.
Parameters
- fn: ScheduleFunction
  
  The function to be used to schedule the next frame to be rendered.
Returns ScheduleFunction
- Defined in src/tweenable.ts:360

Class Tweenable

Hierarchy

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Parameters

initialState: TweenState = {}

Optional config: TweenableConfig

Returns Tweenable

Properties

Static easing

Type declaration

bounce: ((pos: number) => number)

Parameters

pos: number

Returns number

bouncePast: ((pos: number) => number)

Parameters

pos: number

Returns number

easeFrom: ((pos: number) => number)

Parameters

pos: number

Returns number

easeFromTo: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInBack: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInCirc: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInCubic: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInExpo: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutBack: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutCirc: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutCubic: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutExpo: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutQuad: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutQuart: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutQuint: ((pos: number) => number)

Parameters

pos: number

Returns number

easeInOutSine: ((pos: number) => number)

Parameters

pos: number

Returns number

`Optional` config: TweenableConfig

`Static` easing