VFX-JS
    Preparing search index...

    Type Alias VFXOpts

    Options to initialize VFX class.

    type VFXOpts = {
        autoplay?: boolean;
        pixelRatio?: number;
        postEffect?: VFXPostEffect | VFXPass[];
        scrollPadding?: number | [number, number] | false;
        timeScale?: number;
        wrapper?: HTMLElement;
        zIndex?: number;
    }
    Index

    Properties

    autoplay? pixelRatio? postEffect? scrollPadding? timeScale? wrapper? zIndex?

    Properties

    autoplay?: boolean

    Whether VFX-JS should start playing animations automatically (Default: true).

    If false, you have to call VFX.play() manually to start animation,
    or render frames only when it's necessary by calling VFX.render().

    pixelRatio?: number

    The pixelRatio of the WebGL rendering context.

    VFX-JS renders the output with window.devicePixelRatio by default.
    This means the resolution of the WebGL canvas gets larger in high-DPI display devices (e.g. iPhone).

    However, you might find VFX-JS not being rendered smoothly, especially in low-end devices.
    In such case, you can pass lower values to pixelRatio so VFX-JS can render in lower resolutions.

    For example, if pixelRatio is 0.5, VFX-JS renders in the half resolution of the native resolution.

    ref. https://developer.mozilla.org/en-US/docs/Web/API/Window/devicePixelRatio

    postEffect?: VFXPostEffect | VFXPass[]

    Post effect to be applied to the final output.
    You can specify a custom fragment shader to process the entire canvas output.
    You can also pass VFXPass[] for a multipass post-effect chain.

    scrollPadding?: number | [number, number] | false

    Option to control the dynamic scroll technique to reduce scroll jank (Default: 0.1).

    If a number is given, VFX-JS will use the number as the padding ratio.
    For example, if 0.2 is given, VFX-JS will add 20% of padding to the canvas.
    (= the canvas width & height will be 140% of the window width & height)

    If [number, number] is given, VFX-JS will use the numbers as the horizontal & vertical padding ratio.
    For example, if [0, 0.2] is given, VFX-JS will only add the vertical padding with 20% height.

    If you prefer not using the scroll jank technique, specify false.

    timeScale?: number

    Playback rate of the animation clock that drives the time uniform
    (Default: 1).

    1 is realtime, 0.5 is half speed, 2 is double speed, 0
    pauses the animation (frames still render, so scroll / mouse stay
    live), and negative values run time backwards.

    Can be changed at runtime via VFX.timeScale, and the clock can be
    pinned to an exact value with VFX.setTime (useful for scrubbing or
    deterministic snapshots).

    wrapper?: HTMLElement

    A wrapper element to append the WebGL canvas to instead of document.body.
    Prevents scroll overflow caused by the canvas extending beyond the page.

    The wrapper must have position: relative and overflow: hidden,
    and should be at the page origin (0, 0) containing all page content.

    <div id="wrapper" style="position: relative; overflow: hidden;">
      <!-- page content -->
    </div>
    zIndex?: number

    z-index for the WebGL canvas.
    This is useful if you want to place the canvas behind other DOM element, or vice versa.

    Settings

    Member Visibility

    On This Page

    Properties