The category of the animation effects.
The object where every key is an effect name and every value is a PresetEffectDefinition.
This function is purely for convenience. You could create presetEffectBank's or individual PresetEffectDefinition objects on your own without it, but this is highly ill-advised because there would be there would be no autocompletion or hinting. Besides using this function, the other way define preset effects while still having access to Intellisense is to define them directly within the call to webchalk.createAnimationClipFactories.
// CREATE NEW PRESET EFFECT BANK
// bank with 2 preset effect definitions for a "zoomIn" effect and a "fadeIn" effect
const myPresetEntrances = definePresetEffectBank(
'Entrance',
{
zoomIn: {
buildFrameGenerators(initialScale: number) {
// return EffectFrameGeneratorSet
return {
keyframesGenerator_play: () => {
// return Keyframes (Keyframe[])
return [
{scale: initialScale, opacity: 0},
{}
];
},
};
}
},
fadeIn: {
buildFrameGenerators() {
return {
keyframesGenerator_play: () => {
return [{opacity: 0}, {}];
}
};
},
defaultConfig: { duration: 1000, easing: 'ease-in' },
}
}
);
// bank with 1 preset effect definition for a "flyOutLeft" effect
const myPresetExits = definePresetEffectBank(
'Exit',
{
flyOutLeft: {
buildFrameGenerators() {
const computeTranslationStr = () => {
const orthogonalDistance = -(this.domElem.getBoundingClientRect().right);
const translationString = `${orthogonalDistance}px 0px`;
return translationString;
}
// return EffectFrameGeneratorSet
return {
keyframesGenerator_play: () => {
// return Keyframes (Keyframe[])
return [
{translate: computeTranslationStr()}
];
},
};
},
defaultConfig: {
duration: 1000,
easing: "ease-in",
},
immutableConfig: {
composite: 'accumulate',
},
}
}
)
// CREATE CLIP FACTORIES AND PASS IN PRESET EFFECT BANKS
const clipFactories = webchalk.createAnimationClipFactories({
additionalEntranceEffectBank: myPresetEntrances,
additionalExitEffectBank: myPresetExits,
});
const square = document.querySelector('.square');
// your preset effects are now part of the preset effect banks (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 a PresetEffectBank with full auto-completion for each entry. The resulting effect bank must be passed into webchalk.createAnimationClipFactories in order for its effect definitions to be added to the preset effects registry.