fizban 0.7.1 | Documentation

Scroll

new Scroll(config: scrollConfig)

Parameters

config (scrollConfig)

Example

import { Scroll } from 'fizban';

const scroll = new Scroll({
    scenes: [...]
});
scroll.start();

Instance Members

▸ start()

Setup event and effect, and reset progress and frame.

start()

▸ pause()

Removes event listener.

pause()

▸ resetProgress(scrollPosition = {})

Reset progress in the DOM and inner state to given x and y.

resetProgress(scrollPosition: Object?)

Parameters

scrollPosition

(Object?
            = {})

Name	Description
scrollPosition.x `number?`
scrollPosition.y `number?`

▸ tick(clearLerpFrame?)

Handle animation frame work.

tick(clearLerpFrame: boolean?)

Parameters

clearLerpFrame (boolean?) whether to cancel an existing lerp frame

▸ lerp()

Calculate current progress.

lerp()

▸ destroy()

Stop the event and effect, and remove all DOM side-effects.

destroy()

▸ setupEvent()

Register to scroll for triggering update.

setupEvent()

▸ removeEvent()

Remove scroll handler.

removeEvent()

▸ setupEffect()

Reset registered effect.

setupEffect()

▸ removeEffect()

Remove registered effect.

removeEffect()

scrollConfig

Type: object

Properties

scenes (Array<ScrollScene>) : list of effect scenes to perform during scroll.

horizontal (boolean?) : whether to use the horizontal axis. Defaults to false .

transitionActive (boolean?) : whether to animate effect progress.

transitionFriction (number?) : between 0 to 1, amount of friction effect in the transition. 1 being no movement and 0 as no friction. Defaults to 0.4.

velocityActive (boolean?) : whether to calculate velocity with progress.

velocityMax (number?) : max possible value for velocity. Velocity value will be normalized according to this number, so it is kept between 0 and 1. Defaults to 1.

observeViewportEntry (boolean?) : whether to observe entry/exit of scenes into viewport for disabling/enabling them. Defaults to true .

viewportRootMargin (boolean?) : rootMargin option to be used for viewport observation. Defaults to '7% 7%' .

observeViewportResize (boolean?) : whether to observe resize of the layout viewport. Defaults to false .

observeSourcesResize (boolean?) : whether to observe resize of view-timeline source elements. Defaults to false .

observeContentResize (boolean?) : whether to observe resize of content root of the scroll container. Defaults to false .

root ((Element | Window)?) : the scrollable element, defaults to window.

contentRoot (Element?) : the root element for the content, defaults to first child of root or body element.

ScrollScene

A configuration object for a scene. Must be provided an effect function, and either a start and end, a start and duration, or a duration as RangeName.

ScrollScene

Type: Object

Properties

effect (EffectCallback) : the effect to perform.

start ((number | RangeOffset)) : scroll position in pixels where effect starts.

duration ((number | RangeName)?) : duration of effect in pixels. Defaults to end - start.

end ((number | RangeOffset)?) : scroll position in pixels where effect ends. Defaults to start + duration.

disabled (boolean?) : whether to perform updates on the scene. Defaults to false.

viewSource (Element?) : an element to be used for observing intersection with viewport for disabling/enabling the scene, or the source of a ViewTimeline if scene start/end are provided as ranges.

destroy (function?) : a function clean up the scene when it's controller is destroyed.

groupId (string?) : a string id for a group of scenes sharing same viewSource and part of the same overall animation

Example

{ effects: (scene, p) => { animation.currentTime = p; }, duration: 'contain' }

EffectCallback

Type: function (scene: ScrollScene, progress: number, velocity: number): void

Parameters

scene (ScrollScene)

progress (number)

velocity (number)

RangeOffset

Type: Object

Properties

name (RangeName)

offset (number)

add (CSSUnitValue?)

RangeName

CSSUnitValue

Type: Object

Properties

value (number)

unit (("px" | "vh" | "vw"))

AbsoluteOffsetContext

Type: Object

Properties

viewportWidth (number)

viewportHeight (number)

utilities

Static Members

▸ lerp(a, b, t, e)

Interpolate from a to b by the factor t.

lerp(a: number, b: number, t: number, e: number): number

Parameters

a (number) start point

b (number) end point

t (number) interpolation factor

e (number) minimal possible delta between result and start, and between result and end

Returns

number:

▸ defaultTo(obj, defaults)

Returns a new Object with the properties of the first argument assigned to it, and the second argument as its prototype, so its properties are served as defaults.

defaultTo(obj: Object, defaults: (Object | null)): Object

Parameters

obj (Object) properties to assign

defaults ((Object | null))

Returns

Object:

▸ frameThrottle(fn)

Throttle a function to trigger once per animation frame. Keeps the arguments from last call, even if that call gets ignored.

frameThrottle(fn: function): (function (): void)

Parameters

fn (function) function to throttle

Returns

(function (): void):

getViewportSize

getViewportSize(root: (Window | HTMLElement), isHorizontal: boolean): number

Parameters

root ((Window | HTMLElement))

isHorizontal (boolean)

Returns

number:

tick

Scroll controller.

tick

destroy

Removes all side effects and deletes all objects.

destroy()

parseOffsetCalc

parses offsetString of the format calc( + )

parseOffsetCalc(offsetString: (string | undefined), absoluteOffsetContext: AbsoluteOffsetContext)

Parameters

offsetString ((string | undefined))

absoluteOffsetContext (AbsoluteOffsetContext)

transformAbsoluteOffsetToNumber

Convert an absolute offset as string to number of pixels

transformAbsoluteOffsetToNumber(offsetString: (string | undefined), absoluteOffsetContext: AbsoluteOffsetContext): number

Parameters

offsetString ((string | undefined))

absoluteOffsetContext (AbsoluteOffsetContext)

Returns

number:

transformRangeToPosition

Convert a range into offset in pixels.

transformRangeToPosition(range: {name: RangeName, offset: number}, viewportSize: number, rect: {start: number, end: number}): number

Parameters

range ({name: RangeName, offset: number})

viewportSize (number)

rect ({start: number, end: number})

Returns

number:

transformSceneRangesToOffsets

Convert scene data in ranges into offsets in pixels.

transformSceneRangesToOffsets(scene: ScrollScene, rect: {start: number, end: number}, viewportSize: number, isHorizontal: boolean, absoluteOffsetContext: AbsoluteOffsetContext, offsetTree: any): ScrollScene

Parameters

scene (ScrollScene)

rect ({start: number, end: number})

viewportSize (number)

isHorizontal (boolean)

absoluteOffsetContext (AbsoluteOffsetContext)

offsetTree (any)

Returns

ScrollScene:

getIsSticky

Check whether the position of an element is sticky.

getIsSticky(style: CSSStyleDeclaration): boolean

Parameters

style (CSSStyleDeclaration)

Returns

boolean:

getIsFixed

Check whether the position of an element is sticky.

getIsFixed(style: CSSStyleDeclaration, offsetParent: HTMLElement, root: HTMLElement): boolean

Parameters

style (CSSStyleDeclaration)

offsetParent (HTMLElement)

root (HTMLElement)

Returns

boolean:

getStickyStartOffset

Get start offset of an element in scroll direction.

getStickyStartOffset(style: CSSStyleDeclaration, isHorizontal: boolean): number

Parameters

style (CSSStyleDeclaration)

isHorizontal (boolean)

Returns

number:

getStickyEndOffset

Get end offset of an element in scroll direction.

getStickyEndOffset(style: CSSStyleDeclaration, isHorizontal: boolean): number

Parameters

style (CSSStyleDeclaration)

isHorizontal (boolean)

Returns

number:

getRectStart

getRectStart(element: HTMLElement, isHorizontal: boolean, isSticky: boolean): number

Parameters

element (HTMLElement)

isHorizontal (boolean)

isSticky (boolean)

Returns

number:

getTransformedSceneGroup

Returns an array of converted scenes' data for grouped scenes (assumes same viewSource) from ranges into offsets in pixels.

getTransformedSceneGroup(scenes: Array<ScrollScene>, root: (Window | HTMLElement), viewportSize: number, isHorizontal: boolean, absoluteOffsetContext: AbsoluteOffsetContext): Array<ScrollScene>

Parameters

scenes (Array<ScrollScene>)

root ((Window | HTMLElement))

viewportSize (number)

isHorizontal (boolean)

absoluteOffsetContext (AbsoluteOffsetContext)

Returns

Array<ScrollScene>:

getTransformedScene

Returns a converted scene data from ranges into offsets in pixels.

getTransformedScene(scene: ScrollScene, root: (Window | HTMLElement), viewportSize: number, isHorizontal: boolean, absoluteOffsetContext: AbsoluteOffsetContext): ScrollScene

Parameters

scene (ScrollScene)

root ((Window | HTMLElement))

viewportSize (number)

isHorizontal (boolean)

absoluteOffsetContext (AbsoluteOffsetContext)

Returns

ScrollScene:

debounce

Debounce a function by interval in milliseconds.

debounce(fn: function, interval: number): function

Parameters

fn (function)

interval (number)

Returns

function: