GitHub

Layer types

Add Filter

Use composition.addFilter() to add filters to a composition.

composition.addFilter() signature

addFilter(
  options:FilterOptions
): Promise<Filter>

Options

PropertyTypeDefaultDescription
namestringnullA required string containing one of the supported filters
optionsobjectnullAn optional object used to configure one of the configurable filters. Only use this argument if you are adding a configurable filter.

Filter class

Calling composition.addFilter() returns an instance of the Filter class, which allows you to read/update its layer optionsthrough getters/setters.

Reading and updating layer options

filter.type; // "filter"


filter.setFilter({ name: 'brightness', options: { brightness: 1.1 })
filter.name; // "brightness"
filter.options; // { brightness: 1.1 }

Examples

await composition.addVideo(
  "https://editframe.com/docs/layer-types/add-filter/puppy-beach.mp4"
);


composition.addFilter({ name: "grayscale" });
composition.addFilter({ name: "brightness", options: { brightness: 0.5 } });

Output

Supported Filters

The following filters are currently supported:

Filter nameConfigurable
brightness✓️
contrast
fadein
fadeout
grayscale
lighten
negative
saturation
sobel
vintage

Configurable Filter Options

brightness options

OptionTypeDescription
brightnessnumberA number between -1 and 1

Example

composition.addFilter({ name: "brightness", options: { brightness: 0.5 } });

Output

contrast options

OptionTypeDescription
contrastnumberA number between -1000 and 1000

Example

composition.addFilter({ name: "contrast", options: { contrast: 42 } });

Output

fadein options

OptionTypeDescription
colorstringAny hexadecimal, rgb, or named color
durationnumberFade length in seconds
startTimenumberThe time in the composition, in seconds, at which to start the fade

Example

composition.addFilter({
  name: "fadein",
  options: {
    color: "#2f2649",
    duration: 2,
    startTime: 0,
  },
});

Output

fadeout options

OptionTypeDescription
colorstringAny hexadecimal, rgb, or named color
durationnumberFade length in seconds
startTimenumberThe time in the composition, in seconds, at which to start the fade

Example

composition.addFilter({
  name: "fadeout",
  options: {
    color: "#2f2649",
    duration: 2,
    startTime: 0,
  },
});

Output

saturation options

OptionTypeDescription
saturationnumberA number between 0 and 3

Example

composition.addFilter({
  name: "saturation",
  options: {
    saturation: 2,
  },
});

Output

Previous
Add audio