the category of the animation effects
object where every key is an effect name and every value is an EffectComposer
This function is purely for convenience. You could create EffectComposerBank or individual EffectComposer objects on your own without it, but there would be no autocompletion or hinting. Besides using this function, the other way to contstruct effect composers while still having access to Intellisense is to define them directly within the call to webchalk.createAnimationClipFactories.
// CREATE CUSTOM EFFECT COMPOSER BANKS
// bank with 2 effect composers for a "zoomIn" effect and a "fadeIn" effect
const customEntrances = createCustomEffectComposerBank(
'Entrance',
{
zoomIn: {
composeEffect(initialScale: number) {
// return ComposedEffect
return {
forwardKeyframesGenerator: () => {
// return Keyframes (Keyframe[])
return [
{scale: initialScale, opacity: 0},
{}
];
},
};
}
},
fadeIn: {
composeEffect() {
return {
forwardKeyframesGenerator: () => {
return [{opacity: 0}, {}];
}
};
},
defaultConfig: { duration: 1000, easing: 'ease-in' },
}
}
);
// bank with 1 effect composer for a "flyOutLeft" effect
const customExits = createCustomEffectComposerBank(
'Exit',
{
flyOutLeft: {
composeEffect() {
const computeTranslationStr = () => {
const orthogonalDistance = -(this.domElem.getBoundingClientRect().right);
const translationString = `${orthogonalDistance}px 0px`;
return translationString;
}
// return ComposedEffect
return {
forwardKeyframesGenerator: () => {
// return Keyframes (Keyframe[])
return [
{translate: computeTranslationStr()}
];
},
};
},
defaultConfig: {
duration: 1000,
easing: "ease-in",
},
immutableConfig: {
composite: 'accumulate',
},
}
}
)
// CREATE CLIP FACTORIES AND PASS IN CUSTOM EFFECT COMPOSER BANKS
const clipFactories = webchalk.createAnimationClipFactories({
customEntranceEffects: customEntrances,
customExitEffects: customExits,
});
const square = document.querySelector('.square');
// your custom effects are now part of the presets (along with full Intellisense)
const ent1 = clipFactories.Entrance(square, 'zoomIn', [0.1]);
const ent2 = clipFactories.Entrance(square, 'fadeIn', []);
const ext2 = clipFactories.Exit(square, 'flyOutLeft', []);
Allows the convenient creation of an object in the shape of an EffectComposerBank with full auto-completion for each entry. The resulting effect composer bank must be passed into webchalk.createAnimationClipFactories in order for its composers to be added to the preset effects registry.