allEffects

Gets all of the effects defined for an element.

Description

This property contains the names of all the effects that were defined for an element using Editor X.

Note: This property can only be used in Editor X.

Type:

Array<string>Read Only

Was this helpful?

Retrieve all of the effects defined for an element

Copy Code

1const effectList = $w('#myElement').effects.allEffects; // ['Effect 1', 'Effect 2']

Display a different effect for an element each time a button is clicked

This code example changes the effect displayed for an element each time a button is clicked. The code has 3 steps:

Retrieve the currently displayed effect and a list of all the effects defined for the element.
Find the index of the next effect to display in the allEffects property's array.
Remove the currently displayed effect and apply the new one.

Copy Code

1$w('#myButton').onClick(() => {
2  // Retrieve the currently displayed effect, if there is one, and a list of all the element's effects.
3  const activeEffect = $w('#myElement').effects.activeEffects[0];
4  const allEffects = $w('#myElement').effects.allEffects;
5  // Find the index of the next effect to display.
6  let newEffectIndex = allEffects.indexOf(activeEffect) + 1;
7  // If the new index is greater than the total number of effects, reset it to 0.
8  if (newEffectIndex > allEffects.length - 1) {
9    newEffectIndex = 0;
10  }
11  // Remove the previous effect and display the new one.
12  $w('#myElement').effects.removeAllEffects();
13  $w('#myElement').effects.applyEffects([allEffects[newEffectIndex]]);
14});