The DOM element that is to be animated.
The parent AnimSequence that contains this clip
(undefined if the clip is not part of a sequence).
The parent AnimTimeline that contains the AnimSequence that contains this clip (may be undefined).
The highest level of this clip's lineage.
ProtectedanimationProtectedeffectProtectedeffectProtectedeffectProtectedgenerateReadonlyidNumber that uniquely identifies the clip from other clips. Automatically generated.
ProtectedinProtectedisProtectedisReturns specific details about the animation's effect.
an object containing
Returns details about how the DOM element is modified beyond just the effect of the animation.
an object containing
Returns details about the animation's current status.
an object containing
Returns timing-related details about the animation.
an object containing
Forces the animation clip to instantly finish.
Plays the animation clip (animation runs forward).
a promise that is resolved when the animation finishes playing (including playing its endDelay phase).
Rewinds the animation clip (animation runs backward).
a promise that is resolved when the animation finishes rewinding (including rewinding its delay phase).
Pauses the animation clip when it reaches the specified time in the specified direction, only unpausing after
the specified array of Promise objects is resolved.
the direction the animation will be going when the clip is paused
the phase of the animation to place the blocks in
the time position within the phase when the roadblocks should be encountered
an array of promises or functions that return promises that block the clip's playback until resolved
async function wait(milliseconds: number) { // Promise-based timer
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
const square = document.querySelector('.square');
const { Entrance } = webimator.createAnimationClipFactories();
const ent = Entrance(square, '~fade-in', []);
// adds 1 roadblock that will pause the clip once the clip is 15% through the delay phase
ent.addRoadblocks('forward', 'activePhase', '15%', [function(){ return wait(2000); }]);
// adds 2 more roadblocks at the same point.
const someOtherPromise = Promise.resolve(); // instantly resolved promise
ent.addRoadblocks('forward', 'activePhase', '15%', [function(){ return wait(3000); }, someOtherPromise]);
// adds 1 roadblock at 40% into the endDelay phase
ent.addRoadblocks('forward', 'endDelayPhase', '40%', [new Promise(resolve => {})]);
ent.play();
// ↑ Once ent is 15% through the active phase, it will pause and handle its roadblocks.
// "wait(2000)" resolves after 2 seconds.
// "wait(3000)" resolves after 3 seconds.
// someOtherPromise blocks the clip's playback. Presumably, its resolver is eventually called from somewhere outside.
// Once someOtherPromise is resolved, there are no more roadblocks at this point, so playback is resumed.
// Once ent is 40% through the endDelay phase, it will pause and handle its roadblocks
// The newly created promise obviously has no way to be resolved, so the clip is unfortunately stuck.
Returns a Promise that is resolved when the animation clip reaches the specified time in the specified direction.
the direction the animation will be going when the Promise is resolved
the phase of the animation where the Promise will be resolved
the time position within the phase when the Promise will be resolved
a Promise that is resolved at the specific time point of the animation.
async function testFunc() {
const { Entrance } = webimator.createAnimationClipFactories();
const square = document.querySelector('.square');
const ent = Entrance(square, '~fade-in', []);
// wait until ent is played and gets 1/5 of the way through the active phase of the animation
await ent.generateTimePromise('forward', 'activePhase', '20%');
console.log('1/5 done playing!');
}
testFunc();
async function testFunc() {
const { Entrance } = webimator.createAnimationClipFactories();
const square = document.querySelector('.square');
const ent = Entrance(square, '~fade-in', []);
// wait until ent is eventually rewound and gets 4/5 of the way through rewinding the active phase of the animation
await ent.generateTimePromise('backward', 'activePhase', '20%');
console.log('4/5 done rewinding!');
}
testFunc();
ProtectedconfigThe default configuration for clips in a specific effect category, which includes any additional configuration options that are specific to the effect category.
ReadonlytoReadonlytoReadonlytoReadonlytoThe unchangeable default configuration for clips in a specific effect category.
All the unchangeable default configuration settings for the clip (both category-specific immutable configurations and immutable configurations that come from the specific effect generator).
StaticbaseThe base default configuration for any animation clip before any category-specific configuration, effect generator configuration, or configuration passed in through clip factory functions are applied.
ReadonlycommitsReadonlycomposite: "replace"ReadonlycssReadonlytoReadonlytoReadonlytoReadonlytoReadonlydelay: 0Readonlyduration: 500Readonlyeasing: "linear"ReadonlyendReadonlyplaybackReadonlyrunReadonlystartsReadonlystartsCalculates the value partway between two fixed numbers (an initial value and a final value) based on the progress of the animation.
the starting value
the ending value
the number that is a percentage of the way between initialVal and finalVal based on the
percentage of completion of the animation (playing or rewinding).
const {Entrance} = webimator.createAnimationClipFactories({
customEntranceEffects: {
rotate: {
generateRafMutators(degrees: number) {
return {
// when playing, keep computing the value between 0 and 'degrees'
forwardMutator: () => { this.domElem.style.rotate = this.computeTween(0, degrees)+'deg'; },
// when rewinding, keep computing the value between 'degrees' and 0
backwardMutator: () => { this.domElem.style.rotate = this.computeTween(degrees, 0)+'deg'; }
};
}
}
},
});
const someElement = document.querySelector('.some-element');
(async () => {
await Entrance(someElement, 'rotate', [360], {duration: 2000}).play();
// ↑ At 1.5 seconds (or 1500ms), the animation is 1.5/2 = 75% done playing.
// Thus, computeTween(0, 360) at that exactly moment would...
// return the value 75% of the way between 0 and 360 (= 270).
// Therefore, at 1.5 seconds of playing, someElement's rotation is set to "270deg".
await Entrance(someElement, 'rotate', [360], {duration: 2000}).rewind();
// ↑ At 0.5 seconds (or 500ms), the animation is 0.5/2 = 25% done rewinding.
// Thus, computeTween(360, 0) at that exactly moment would...
// return the value 25% of the way between 360 and 0 (= 270).
// Therefore, at 0.5 seconds of rewinding, someElement's rotation is set to "270deg".
})();
Staticcreatean effect generator with a function that returns empty arrays (so no actual keyframes).
Protected_onProtected_onProtected_onProtected_onProtectedanimateadditional properties for connector entrance configuration:
ProtectedmergeProtectedprevent
Used to reveal a WebimatorConnectorElement that was hidden.
A "clip" is the smallest building block of a timeline. It is essentially a [DOM element, effect] pair, where a "DOM element" is some HTML element on the page and the effect is the animation effect that will be applied to it (asynchronously).
The AnimClip class is abstract, meaning it cannot be instantiated. But it has several subclasses such as EntranceClip, MotionClip, TransitionClip, etc. Webimator provides convenient factory functions that can be used to create such clips—the factory functions can be obtained from Webimator.createAnimationClipFactories. Examples are shown below.
Generally (with some exceptions), using a clip factory function follows this format:
const clip = <factory func>(<some element>, <effect name>, [<effect options>], {<optional clip configuration>});"<some element>" here must be of type WebimatorConnectorElement (our custom
<wbmtr-connector>HTML element).Note that ConnectorEntranceClips are merely for entering connectors, not setting their endpoints. A connector's endpoints must be set (using a ConnectorSetterClip), and then a ConnectorEntranceClip can be used to draw the connector.
Example