Optional ReadonlydefaultDefault configuration options that are appropriate for the effect (and can be overwritten).
Optional ReadonlygenerateRuns itself exactly once (creating a closure) and returns up to 2 callback functions that each return one set of Keyframes.
Rest...effectOptions: unknown[]parameters used to set the behavior for the specific animation effect
An object containing 2 possible callback functions that each generate (return) one set of Keyframes.
forwardGenerator will run every time the clip is playedbackwardGenerator (optional) will run every time the clip is rewound
backwardGenerator is omitted, forwardGenerator will be used, and the resulting keyframes will be reversedconst clipFactories = webimator.createAnimationClipFactories({
customExitEffects: {
// a custom animation effect for flying out to the left side of the screen
flyOutLeft: {
generateKeyframeGenerators() {
const computeTranslationStr = () => {
const orthogonalDistance = -(this.domElem.getBoundingClientRect().right);
const translationString = `${orthogonalDistance}px 0px`;
return translationString;
}
return {
forwardGenerator: () => {
return [
{translate: computeTranslationStr()}
];
},
// backwardGenerator could have been omitted because the result of running forwardGenerator()
// again and reversing the keyframes produces the same desired rewinding effect in this case
backwardGenerator: () => {
return [
{translate: computeTranslationStr()},
{translate: `0 0`}
];
}
};
},
immutableConfig: {
// this means that the translation is added onto the element's position instead of replacing it
composite: 'accumulate',
}
},
}
});
const element = document.querySelector('.some-element');
const ext = clipFactories.Exit(element, 'flyOutLeft', []);
ext.play().then(ext.rewind);
Optional ReadonlygenerateRuns itself exactly once (creating a closure) and returns 2 function that each return one function. Those final returned functions are run every frame (using requestAnimationFrame behind the scenes), so if a property of the animated element is changed using AnimClip.computeTween, it will look like a smooth animation.
Rest...effectOptions: unknown[]parameters used to set the behavior for the specific animation effect
An object containing 2 callback functions that each generate (return) one function.
forwardGenerator will run every time the clip is played, producing a function that will be used in a loopbackwardGenerator will run every time the clip is rewound, producing a function that will be used in a loopconst clipFactories = webimator.createAnimationClipFactories({
customMotionEffects: {
// a custom animation for scrolling to a specific point on the page.
// when rewinding, the current scroll position is computed on the spot so that
// it can smoothly scroll from THERE to the initial position.
scrollToImproved: {
generateRafMutatorGenerators(yPosition: number) {
const initialPosition = this.domElem.scrollTop;
return {
forwardGenerator: () => {
const forwardMutator = () => {
this.domElem.scrollTo({
top: this.computeTween(initialPosition, yPosition),
behavior: 'instant'
});
};
return forwardMutator;
},
backwardGenerator: () => {
const backwardMutator = () => {
const currentPosition = this.domElem.scrollTop;
this.domElem.scrollTo({
top: this.computeTween(currentPosition, initialPosition),
behavior: 'instant'
});
};
return backwardMutator;
}
};
}
},
}
});
const element = document.querySelector('.some-element');
const mot = clipFactories.Motion(element, 'scrollToImproved', [1020]);
mot.play().then(mot.rewind);
Optional ReadonlygenerateRuns every time the clip is played, returning 2 functions each time. These functions are run every frame (using requestAnimationFrame behind the scenes), so if a property of the animated element is changed using AnimClip.computeTween, it will look like a smooth animation.
Rest...effectOptions: unknown[]parameters used to set the behavior for the specific animation effect
An object containing 2 functions.
forwardMutator is used for the clip's animation when the clip is playedbackwardKeyframes is used for the clip's animation when the clip is rewoundconst clipFactories = webimator.createAnimationClipFactories({
customMotionEffects: {
// a custom animation for scrolling to a specific position (but when
// rewinding, it will snap to yPosition before scrolling to the initial position, which
// may feel janky. This could be solved with generateRafMutatorGenerators())
scrollTo: {
generateRafMutators(yPosition: number) {
const initialPosition = this.domElem.scrollTop;
return {
forwardMutator: () => {
this.domElem.scrollTo({
top: this.computeTween(initialPosition, yPosition),
behavior: 'instant'
});
},
backwardMutator: () => {
this.domElem.scrollTo({
top: this.computeTween(yPosition, initialPosition),
behavior: 'instant'
});
}
};
}
},
}
});
const element = document.querySelector('.some-element');
const mot = clipFactories.Motion(element, 'scrollTo', [1020]);
mot.play().then(mot.rewind);
Optional Readonlyimmutabledefault configuration options for the effect that cannot be overwritten (but cannot be overwritten).
Object representing an entry in an EffectGeneratorBank. It consists of 3 properties:
The configuration options that are allowed to be set in defaultConfig or immutableConfig depend on AnimClip.categoryImmutableConfig. For example, ExitClip.categoryImmutableConfig contains
commitStyles: false, so thecommitStylesoption is unavailable in defaultConfig and immutableConfig for any entries in the exit effects bank.