fizban

0.6.7
Need help reading this?

Scroll

new Scroll(config: scrollConfig)
Parameters
config (scrollConfig)
Example
import { Scroll } from 'fizban';

const scroll = new Scroll({
    scenes: [...]
});
scroll.start();
Instance Members
▸ start()
▸ pause()
▸ resetProgress(scrollPosition = {})
▸ tick(clearLerpFrame?)
▸ lerp()
▸ destroy()
▸ setupEvent()
▸ removeEvent()
▸ setupEffect()
▸ removeEffect()

scrollConfig

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 .
root ((Element | Window)?) : the scrollable element, defaults to window.

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

EffectCallback

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

Parameters
scene (ScrollScene)
progress (number)
velocity (number)

RangeOffset

RangeOffset

Type: Object

Properties
name (RangeName)
offset (number)
add (CSSUnitValue?)

RangeName

RangeName

Type: ("entry" | "contain" | "exit" | "cover" | "entry-crossing" | "exit-crossing")

CSSUnitValue

CSSUnitValue

Type: Object

Properties
value (number)
unit (("px" | "vh" | "vw"))

AbsoluteOffsetContext

AbsoluteOffsetContext

Type: Object

Properties
viewportWidth (number)
viewportHeight (number)

utilities

utilities
Static Members
▸ lerp(a, b, t, e)
▸ defaultTo(obj, defaults)
▸ frameThrottle(fn)

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:

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: