blotter

SlidingDoorMaterial

The SlidingDoorMaterial multiplies your text into a series of segmented panes. As the effect animates, copies of your text slide in stunted progression within and outside their individual frames, appearing to drag each other along as they move. The resulting effect is that your text splits and reorganizes itself, again and again in an endless loop.

SlidingDoorMaterial extends Material, and therefore has the same properties and functions as Material.

  • construction 

    import { SlidingDoorMaterial } from "blotter.ts/materials";

const material = new SlidingDoorMaterial();

  • uniforms material.uniforms

    An object that holds the uniforms that describe how the material's effects should be rendered. Each entry is a live UniformInterface: assign to its value and the running effect updates. You should not replace this property directly.

    • uDivisions material.uniforms.uDivisions

      The uDivisions uniform describes the number of panes to separate your text into, along the animation axis. By default, your text animates vertically and therefore the value of the uDivisions uniform describes a number of divisions along the Y axis. However, when the value of the uAnimateHorizontal uniform is more than 0.0 the value of the uDivisions uniform describes a number of divisions along the X axis.

      • value material.uniforms.uDivisions.value

        Any floating point value is acceptable.

        The default value is 5.

      • type material.uniforms.uDivisions.type

        The uniform type of the value being passed to the shader. "1f" means the value is a single float (e.g. 0.5). You should not change this property.

    • uDivisionWidth material.uniforms.uDivisionWidth

      Consider the panes of your text, each separately sliding, one after the other, out of and back into their original positions. As each pane follows its predecessor, it does so on a delay, waiting for the previous pane to animate some number of pixels before its own animation begins. The distance each pane covers before its descendant begins animating is described by the uDivisionWidth uniform.

      • value material.uniforms.uDivisionWidth.value

        A floating point value between 0.0 (0%) and 1.0 (100%), relative to the height of your text (including any padding and line height).

        The default value is 0.25.

      • type material.uniforms.uDivisionWidth.type

        The uniform type of the value being passed to the shader. "1f" means the value is a single float (e.g. 0.5). You should not change this property.

    • uAnimateHorizontal material.uniforms.uAnimateHorizontal

      By default, SlidingDoorMaterial assumes that animation within its effect takes place along the vertical (Y) axis. The uAnimateHorizontal uniform serves as a boolean (true/false) value, meant to tell the effect whether or not to animate along the horizontal (X) axis.

      • value material.uniforms.uAnimateHorizontal.value

        A floating point value. Either 0.0 (false) or 1.0 (true).

        The default value is 0.

      • type material.uniforms.uAnimateHorizontal.type

        The uniform type of the value being passed to the shader. "1f" means the value is a single float (e.g. 0.5). You should not change this property.

    • uFlipAnimationDirection material.uniforms.uFlipAnimationDirection

      By default, SlidingDoorMaterial animates your text in a predetermined direction, depending on the value of the uAnimateHorizontal uniform. When the value of the uAnimateHorizontal uniform is equal to 0.0 and your text is animating vertically, your text will animate from bottom to top by default. When the value of the uAnimateHorizontal uniform is more than 0.0 and your text is animating horizontally, your text will animate from right to left by default. The uFlipAnimationDirection uniform serves as a boolean (true/false) value, meant to tell the effect whether or not to invert animation along the axis determined by the uAnimateHorizontal uniform.

      • value material.uniforms.uFlipAnimationDirection.value

        A floating point value. Either 0.0 (false) or 1.0 (true).

        The default value is 0.

      • type material.uniforms.uFlipAnimationDirection.type

        The uniform type of the value being passed to the shader. "1f" means the value is a single float (e.g. 0.5). You should not change this property.

    • uSpeed material.uniforms.uSpeed

      The uSpeed uniform describes the speed of the animation of the panes of the SlidingDoorMaterial.

      • value material.uniforms.uSpeed.value

        Any floating point value is acceptable. This value acts as a multiplier against the default uniform passed to all effects, uGlobalTime, which represents the time in seconds since the effect started. Therefore, smaller values slow animation while higher values speed up animation. Play around, you'll get the idea.

        The default value is 0.2.

      • type material.uniforms.uSpeed.type

        The uniform type of the value being passed to the shader. "1f" means the value is a single float (e.g. 0.5). You should not change this property.

source code