Class Timeline<StaticProps, ChangeableProps, CallbacksTypes>

Animation timeline that handles time-based animations with progress, easing, play, reverse, and pause functionality.

Link

See examples https://antonbobrov.github.io/vevet-demo/timeline/

Link

See docs https://antonbobrov.github.io/vevet/classes/Timeline.html

Type Parameters

Hierarchy

  • Component<StaticProps, ChangeableProps, CallbacksTypes>
    • Timeline

Constructors

constructor

Accessors

callbacks duration e isDestroyed isInitialized isPaused isPlaying isReversed name p prefix props

Methods

addCallback addEventListener addPlugin addResponsiveProps addViewportCallback changeProps destroy init pause play reset reverse

Constructors

constructor

Accessors

callbacks

duration

e

isDestroyed

  • get isDestroyed(): boolean

  • Checks if the module has been destroyed.

    Returns boolean

isInitialized

  • get isInitialized(): boolean

  • Checks if the module has been initialized.

    Returns boolean

isPaused

isPlaying

isReversed

name

  • get name(): string

  • The name of the module, derived from the class name

    Returns string

p

prefix

  • get prefix(): string

  • Optional prefix for class names used by the module

    Returns string

props

  • get props(): TRequiredModuleProp<StaticProps & ChangeableProps>

  • The current properties of the module, which include both static and changeable properties. These can be retrieved dynamically during the module's lifecycle.

    Returns TRequiredModuleProp<StaticProps & ChangeableProps>

Methods

addCallback

  • 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., 'propsChange', 'destroy').

    • action: TAction<CallbacksTypes[T]>

      The function to execute when the event is triggered.

    • settings: ISettings = {}

      Additional settings for the callback.

    Returns IAddedCallback

addEventListener

  • Adds a DOM event listener that will be automatically removed when the module is destroyed.

    Type Parameters

    • Target extends keyof HTMLElementEventMap

    • Listener extends ((event) => void)

    Parameters

    • element: Document | Element | Window

      The target element for the event listener.

    • target: Target

      The event type to listen for (e.g., 'click', 'resize').

    • callback: Listener

      The callback function to execute when the event is triggered.

    • Optional options: boolean | AddEventListenerOptions

      Additional options for the event listener.

    Returns (() => void)

      • (): void

      • Returns void

addPlugin

  • Adds a plugin to the component. The plugin is initialized upon being added, and the plugin's component property is set to the current component instance.

    Type Parameters

    • T extends Plugin<any, any, any, any>

    Parameters

    • plugin: T

      An instance of the Plugin class to be added.

    Returns void

addResponsiveProps

addViewportCallback

  • Adds a viewport callback that will be automatically removed when the module is destroyed.

    Parameters

    • target: keyof IViewportCallbackTypes

      The viewport target (e.g., width or height).

    • action: (() => void)

      The callback function to execute when the viewport target changes.

        • (): void

        • Returns void

    • data: undefined | ISettings = {}

      Additional data for the callback.

    Returns void

changeProps

destroy

init

pause

play

  • Plays the timeline, advancing progress from its current state toward completion. Will not play if the timeline has already been destroyed or has fully completed.

    Returns void

reset

reverse

  • Reverses the timeline, moving progress from its current state toward the start. Will not reverse if the timeline has already been destroyed or is at the start.

    Returns void

Settings

Member Visibility

Theme

On This Page