Visual Effects

Transform methods for masks, clip paths, filters, backdrop filters, and blend modes applied during an animation.

Use these methods when masks, clips, filters, backdrop filters, or blend modes should run inside a transform.

const flash = Transform.create()
    .filter("brightness(1.5)")
    .commit({ duration: 120 })
    .filter("none")
    .commit({ duration: 160 });

For image masks that should be preloaded automatically, use Displayable.mask.

effect

Set multiple visual effect fields at once.

Transform.create()
    .effect({
        clipPath: "inset(0 0 30% 0)",
        filter: "brightness(0.8)",
    })
    .commit({ duration: 200 });

effect: TransformDefinitions.VisualEffectTransformProps - Supports mask, clip path, filter, backdrop filter, and blend mode fields.
Returns this

maskImage

Set the raw CSS mask-image value.

Transform.create()
    .maskImage('url("/masks/spotlight.png")')
    .commit({ duration: 300 });

maskImage: TransformDefinitions.Types["maskImage"]
Returns this

clipPath

Set a CSS clip-path value.

Transform.create()
    .clipPath("circle(0% at 50% 50%)")
    .commit({ duration: 0 })
    .clipPath("circle(150% at 50% 50%)")
    .commit({ duration: 500, ease: "easeOut" });

clipPath: TransformDefinitions.Types["clipPath"]
Returns this

filter

Set a CSS filter value.

Transform.create()
    .filter("blur(4px) brightness(0.8)")
    .commit({ duration: 240 });

filter: TransformDefinitions.Types["filter"]
Returns this

backdropFilter

Set a CSS backdrop-filter value.

Transform.create()
    .backdropFilter("blur(12px)")
    .commit({ duration: 200 });

backdropFilter: TransformDefinitions.Types["backdropFilter"]
Returns this

mixBlendMode

Set a CSS mix-blend-mode value.

Transform.create()
    .mixBlendMode("screen")
    .commit({ duration: 0 });

mixBlendMode: TransformDefinitions.Types["mixBlendMode"]
Returns this