Class ScrollProgress<CallbacksMap, StaticProps, MutableProps>

ScrollProgress is a component that tracks the scroll progress of a specified section element.

This component can be used for creating scroll-based animations such as parallax effects.

Documentation

Type Parameters

CallbacksMap extends IScrollProgressCallbacksMap = IScrollProgressCallbacksMap
StaticProps extends IScrollProgressStaticProps = IScrollProgressStaticProps
MutableProps extends IScrollProgressMutableProps = IScrollProgressMutableProps

Hierarchy (View Summary)

Module<CallbacksMap, StaticProps, MutableProps>
- ScrollProgress

Constructors

constructor

new ScrollProgress<
    CallbacksMap extends
        IScrollProgressCallbacksMap = IScrollProgressCallbacksMap,
    StaticProps extends IScrollProgressStaticProps = IScrollProgressStaticProps,
    MutableProps extends
        IScrollProgressMutableProps = IScrollProgressMutableProps,
>(
    props?: StaticProps & MutableProps,
): ScrollProgress<CallbacksMap, StaticProps, MutableProps>
Type Parameters
- CallbacksMap extends IScrollProgressCallbacksMap = IScrollProgressCallbacksMap
- StaticProps extends IScrollProgressStaticProps = IScrollProgressStaticProps
- MutableProps extends IScrollProgressMutableProps = IScrollProgressMutableProps
Parameters
- Optionalprops: StaticProps & MutableProps
Returns ScrollProgress<CallbacksMap, StaticProps, MutableProps>
Overrides Module.constructor
- Defined in src/components/ScrollProgress/index.ts:86

Properties

`Protected`_callbacks

_callbacks: Callbacks<CallbacksMap>

Callbacks instance

`Protected`_destroyable

_destroyable: () => void[] = []

Stores actions that need to be executed when the module is destroyed

`Protected`_isDestroyed

_isDestroyed: boolean = false

Tracks whether the module has been destroyed

`Protected`_isVisible

_isVisible: boolean = false

Indicates whether the section is currently visible within the viewport or root element.

`Protected`_props

_props: TTRequiredProps<MutableProps & StaticProps>

Current properties

`Protected`_rootBounds

_rootBounds: IScrollProgressBounds = ...

The bounds of the root element used for scroll calculations.

`Protected`_sectionBounds

_sectionBounds: IScrollProgressBounds = ...

The bounds of the section element relative to the root element.

Accessors

callbacks

get callbacks(): Callbacks<CallbacksMap>
Retrieves the module's callbacks instance.

Returns Callbacks<CallbacksMap>
Inherited from Module.callbacks
- Defined in src/base/Module/index.ts:69

inProgress

get inProgress(): { x: number; y: number }
Calculates the progress of the section entering the root element.

Returns { x: number; y: number }
- Defined in src/components/ScrollProgress/index.ts:214

isDestroyed

get isDestroyed(): boolean
Checks if the module has been destroyed.

Returns boolean
Inherited from Module.isDestroyed
- Defined in src/base/Module/index.ts:59

isVisible

get isVisible(): boolean
Indicates whether the section is currently visible within the viewport or root element.

Returns boolean
- Defined in src/components/ScrollProgress/index.ts:56

moveProgress

get moveProgress(): { x: number; y: number }
Calculates the progress of the section's movement within the root element.

Returns { x: number; y: number }
- Defined in src/components/ScrollProgress/index.ts:247

name

get name(): string
The name of the module, derived from the class name

Returns string
Inherited from Module.name
- Defined in src/base/Module/index.ts:49

outProgress

get outProgress(): { x: number; y: number }
Calculates the progress of the section leaving the root element.

Returns { x: number; y: number }
- Defined in src/components/ScrollProgress/index.ts:235

prefix

get prefix(): string
Optional prefix for classnames used by the module

Returns string
Inherited from Module.prefix
- Defined in src/base/Module/index.ts:44

progress

get progress(): { x: number; y: number }
Calculates the global scroll progress of the section relative to the root element.

Returns { x: number; y: number }
- Defined in src/components/ScrollProgress/index.ts:274

props

get props(): TRequiredProps<MutableProps & StaticProps>
Current properties. Do not mutate these directly, use updateProps instead.

Returns TRequiredProps<MutableProps & StaticProps>
Inherited from Module.props
- Defined in src/base/Module/index.ts:39

rootBounds

get rootBounds(): IScrollProgressBounds
The bounds of the root element used for scroll calculations.

Returns IScrollProgressBounds
- Defined in src/components/ScrollProgress/index.ts:69

section

get section(): Element
Returns the section element being tracked for scroll progress.

Returns Element
- Defined in src/components/ScrollProgress/index.ts:48

sectionBounds

get sectionBounds(): IScrollProgressBounds
The bounds of the section element relative to the root element.

Returns IScrollProgressBounds
- Defined in src/components/ScrollProgress/index.ts:82

Methods

`Protected`_addTempClassName

_addTempClassName(element: Element, className: string): void
Adds a class name on an element, and keeps track of it for removal when the module is destroyed.
Parameters
- element: Element
  The target DOM element.
- className: string
  The class name to toggle.
Returns void
Inherited from Module._addTempClassName
- Defined in src/base/Module/index.ts:146

`Protected`_cn

_cn(...classNames: string[]): string
Helper function to generate classnames with the module's prefix.
Parameters
- ...classNames: string[]
  The class names to generate.
Returns string
A string of class names with the module's prefix applied.
Inherited from Module._cn
- Defined in src/base/Module/index.ts:136

`Protected`_destroy

_destroy(): void
Internal method to handle the destruction of the module. It removes all callbacks, destroys properties, and cleans up event listeners and class names.

Returns void
Inherited from Module._destroy
- Defined in src/base/Module/index.ts:171

_getMutable

_getMutable(): TRequiredProps<MutableProps>
Retrieves the default mutable properties.

Returns TRequiredProps<MutableProps>
Overrides Module._getMutable
- Defined in src/components/ScrollProgress/index.ts:41

_getStatic

_getStatic(): TRequiredProps<StaticProps>
Retrieves the default static properties.

Returns TRequiredProps<StaticProps>
Overrides Module._getStatic
- Defined in src/components/ScrollProgress/index.ts:31

`Protected`_handleProps

_handleProps(): void
Method that is called when the module's properties mutate. In most cases, used to handle callbacks.

Returns void
Inherited from Module._handleProps
- Defined in src/base/Module/index.ts:92

`Protected`_setup

_setup(): void
Sets up events

Returns void
- Defined in src/components/ScrollProgress/index.ts:95

`Protected`_setupObserver

_setupObserver(): void
Sets up an IntersectionObserver to track the visibility of the section.

Returns void
- Defined in src/components/ScrollProgress/index.ts:103

`Protected`_setupScroll

_setupScroll(): void
Sets up a scroll event listener to track and update progress.

Returns void
- Defined in src/components/ScrollProgress/index.ts:127

destroy

destroy(): void
Destroys the module, cleaning up resources, callbacks, and event listeners.

Returns void
Inherited from Module.destroy
- Defined in src/base/Module/index.ts:159

getProgress

getProgress(
    topThreshold: number,
    rightThreshold: number,
    bottomThreshold: number,
    leftThreshold: number,
): { x: number; y: number }
Calculates the section scroll progress relative to the root element.

The function takes top or left corner of the section as the reference point.
Parameters
- topThreshold: number
  Top threshold of the section position.
- rightThreshold: number
  Right threshold of the section position.
- bottomThreshold: number
  Bottom threshold of the section position.
- leftThreshold: number
  Left threshold of the section position.
Returns { x: number; y: number }
The scroll progress along the x and y axes.
Example
```
const progress = getProgress(0, vevet.width, vevet.height / 2, 0)

// `progress.y` is `0` when the top corner of the section is at the beginning of the viewport or root element
// `progress.y` is `1` when the top corner of the section is at the center of the viewport or root element
```
- Defined in src/components/ScrollProgress/index.ts:191

on

on<T extends string | number | symbol>(
    target: T,
    listener: TCallbacksAction<CallbacksMap[T]>,
    settings?: ICallbacksSettings,
): () => void
Adds a custom callback to the module.
Type Parameters
- T extends string | number | symbol
Parameters
- target: T
  The event type to listen for (e.g., 'props', 'destroy').
- listener: TCallbacksAction<CallbacksMap[T]>
  The function to execute when the event is triggered.
- settings: ICallbacksSettings = {}
  Additional settings for the callback.
Returns () => void
Inherited from Module.on
- Defined in src/base/Module/index.ts:122

onDestroy

onDestroy(action: () => void): void
Adds a callback on the module's destruction.
Parameters
- action: () => void
  The function to execute during destruction.
Returns void
Inherited from Module.onDestroy
- Defined in src/base/Module/index.ts:111

update

update(): void
Updates the section and root bounds, and emits an update callback.

Returns void
- Defined in src/components/ScrollProgress/index.ts:145

updateProps

updateProps(props: Partial<MutableProps>): void
Change module's mutable properties
Parameters
- props: Partial<MutableProps>
Returns void
Inherited from Module.updateProps
- Defined in src/base/Module/index.ts:97

Class ScrollProgress<CallbacksMap, StaticProps, MutableProps>

Type Parameters

Hierarchy (View Summary)

Index

Constructors

Properties

Accessors

Methods

Constructors

constructor

Type Parameters

Parameters

Returns ScrollProgress<CallbacksMap, StaticProps, MutableProps>

Properties

Protected_callbacks

Protected_destroyable

Protected_isDestroyed

Protected_isVisible

Protected_props

Protected_rootBounds

Protected_sectionBounds

Accessors

callbacks

Returns Callbacks<CallbacksMap>

inProgress

Returns { x: number; y: number }

isDestroyed

Returns boolean

isVisible

Returns boolean

moveProgress

Returns { x: number; y: number }

name

Returns string

outProgress

Returns { x: number; y: number }

prefix

Returns string

progress

Returns { x: number; y: number }

props

Returns TRequiredProps<MutableProps & StaticProps>

rootBounds

Returns IScrollProgressBounds

section

Returns Element

sectionBounds

Returns IScrollProgressBounds

Methods

Protected_addTempClassName

Parameters

Returns void

Protected_cn

Parameters

Returns string

Protected_destroy

Returns void

_getMutable

Returns TRequiredProps<MutableProps>

_getStatic

Returns TRequiredProps<StaticProps>

Protected_handleProps

Returns void

Protected_setup

Returns void

Protected_setupObserver

Returns void

Protected_setupScroll

Returns void

destroy

Returns void

getProgress

Parameters

Returns { x: number; y: number }

Example

on

Type Parameters

Parameters

Returns () => void

onDestroy

`Protected`_callbacks

`Protected`_destroyable

`Protected`_isDestroyed

`Protected`_isVisible

`Protected`_props

`Protected`_rootBounds

`Protected`_sectionBounds

`Protected`_addTempClassName

`Protected`_cn

`Protected`_destroy

`Protected`_handleProps

`Protected`_setup

`Protected`_setupObserver

`Protected`_setupScroll