Skip to content
blotter

Material

SlidingDoorMaterial

Panes that slide and split

SlidingDoorMaterial cuts the text into panes and slides them, one after another, out of their frames and back. Each pane waits for the one before it to get a little way along before it moves, so the copies seem to drag each other. The word splits, reorganises itself, and does it again.

Construction #

SlidingDoorMaterial extends Material, so everything on a material, from uniforms to update(), works here too. Construct it with no arguments and set uniforms afterwards.

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

const material = new SlidingDoorMaterial();
material.uniforms.uDivisions.value = 5;

Uniforms #

Each entry in material.uniforms is a live UniformInterface: assign to its value and the running effect changes. Set a value through a text’s render scope to change that text alone.

uDivisions

type "1f", a single float default 5

How many panes to cut the text into along the animation axis: vertical by default, horizontal when uAnimateHorizontal is on.

Value

Any float. Whole numbers make even panes.

uDivisionWidth

type "1f", a single float default 0.25

How far a pane travels before the next one sets off. Small values make a tight ripple; large ones make the panes move almost in turn.

Value

A float from 0.0 to 1.0, as a fraction of the text’s total height.

uAnimateHorizontal

type "1f", a single float default 0

A switch. Off, the panes slide vertically; on, they slide horizontally.

Value

A float used as a boolean: 0.0 for off, 1.0 for on.

uFlipAnimationDirection

type "1f", a single float default 0

A switch that reverses the direction of travel. Vertical animation runs bottom to top by default and horizontal runs right to left; this flips whichever is active.

Value

A float used as a boolean: 0.0 for off, 1.0 for on.

uSpeed

type "1f", a single float default 0.2

How fast the panes slide.

Value

Any float. It multiplies uGlobalTime, so 0.0 freezes the doors mid-slide.