Search...
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});