AbstractMethods and/or fields related to the structure of the clip, including the element it targets and any parent structures it belongs to.
Methods that return objects that contain various internal fields of the clip (such as duration from getTiming(),
inProgress from getStatus(), etc.).
Methods that control the playback of the animation clip.
Methods that involve listening to the progress of the animation clip to perform tasks at specific times.
Methods and/or fields related to the configuration settings of the clip, including configuration settings specific to the effect category of the clip.
Methods to help with the functionality of clip operations.
ReadonlydomThe 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.
ProtectedanimationProtecteddirectionProtectedeffectProtectedeffectProtectedeffectProtectedfirstProtectedgenerateReadonlyidA number that uniquely identifies the clip from other clips. Automatically generated.
ProtectedinProtectedisProtectedisProtectedisProtectednestedProtectedpresetProtectedtimescaleProtected StaticMIN_Returns an object containing the configuration options used to define both the timing and effects of the animation clip.
An object containing
Returns 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 an object containing the specified style properties of the specified element.
['marginBottom', 'backgroundColor'], NOT ['margin-bottom', 'background-color']),['--nav-edge-color', '--brand-red']).The DOM element from which to read the styles.
An array of strings representing camelCase CSS property names.
An object where the keys are the specified camelCase strings and the values are the CSS property values.
Returns the string value of the specified CSS property name for the specified element.
'marginBottom', NOT 'margin-bottom'),'--brand-red').The DOM element from which to read the style.
The string value of the specified camelCase CSS property name.
Returns an object containing the specified style properties of this clip's DOM element.
['marginBottom', 'backgroundColor'], NOT ['margin-bottom', 'background-color']),['--nav-edge-color', '--brand-red']).An array of strings representing camelCase CSS property names.
An object where the keys are the specified camelCase strings and the values are the CSS property values.
Returns the string value of the specified CSS property name for this clip's DOM element.
'marginBottom', NOT 'margin-bottom'),'--brand-red').The string value of the specified camelCase CSS property name.
Protected AbstractcategoryProtectednestedForces the animation clip to instantly finish.
A promise that is resolved when the clip has finished.
Pauses the animation clip.
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).
Unpauses the animation clip.
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 } = webchalk.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.generatePromise('forward', 'activePhase', '20%');
console.log('1/5 done playing!');
}
testFunc();
async function testFunc() {
const { Entrance } = webchalk.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.generatePromise('backward', 'activePhase', '20%');
console.log('4/5 done rewinding!');
}
testFunc();
Pauses the animation clip when it reaches the specified time and performs the specified task, unpausing once the task is complete.
The phase of the animation to place the blocks in.
The time position within the phase when the task should be performed.
An object that contains the functions that should be called when timePosition is reached.
An options object defining the behavior of the scheduling.
OptionalfrequencyLimit?: numberThe maximum number of times the task can be performed.
The string id (auto-generated) referring to the task and its spot in the schedule.
async function wait(milliseconds: number) { // Promise-based timer
return new Promise(resolve => setTimeout(resolve, milliseconds));
}
const square = document.querySelector('.square');
const { Entrance } = webchalk.createAnimationClipFactories();
const ent = Entrance(square, '~fade-in', [], {endDelay: 1500});
// adds 1 task that will pause the clip for 2 seconds once the clip is 15% through the active phase
ent.scheduleTask('activePhase', '15%', {onPlay: () => wait(2000)});
// adds 1 more task at the same point that will pause the clip for 3 seconds.
ent.scheduleTask('activePhase', '15%', {onPlay: () => wait(3000)});
// adds 1 task at 40% into the endDelay phase that will...
// ... log 'HELLO' if the clip is playing forward
// ... log 'WORLD' if the clip is rewinding
ent.scheduleTask('endDelayPhase', '40%', {
onPlay: () => console.log('HELLO'),
onRewind: () => console.log('WORLD')
}, {frequencyLimit: 2});
(async () => {
// 1) First play
await ent.play();
// ↑
// Once ent is 15% through the active phase, it will pause and handle its scheduled tasks.
// -- "wait(2000)" resolves after 2 seconds.
// -- "wait(3000)" resolves after 3 seconds.
// There are no more tasks at this point, so playback is resumed.
// Once ent is 40% through the endDelay phase, it will pause and handle its tasks
// -- 'HELLO' is logged to the console
// There are no more tasks at this point, so playback is resumed.
// 2) First rewind
await ent.rewind();
// ↑
// Once ent rewinds back to the 40% point of the endDelay phase, it will pause and...
// ... handle its scheduled tasks
// -- 'WORLD' is logged to the console
// There are no more tasks at this point, so playback is resumed.
// 3) Second play
await ent.play();
// ↑
// Once ent is 15% through the active phase, it will pause and handle its scheduled tasks.
// -- "wait(2000)" resolves after 2 seconds.
// -- "wait(3000)" resolves after 3 seconds.
// There are no more tasks at this point, so playback is resumed.
// Once ent is 40% through the endDelay phase, it will pause and handle its tasks
// -- 'HELLO' is logged to the console
// -- -- Since the frequency limit was 2, this subtask is removed
// There are no more tasks at this point, so playback is resumed.
// 4) Second rewind
await ent.rewind();
// ↑
// Once ent rewinds back to the 40% point of the endDelay phase, it will pause and...
// ... handle its scheduled tasks
// -- 'WORLD' is logged to the console
// -- -- Since the frequency limit was 2, this subtask is removed
// There are no more tasks at this point, so playback is resumed.
// 5) Third play
await ent.play();
// ↑
// Once ent is 15% through the active phase, it will pause and handle its scheduled tasks.
// -- "wait(2000)" resolves after 2 seconds.
// -- "wait(3000)" resolves after 3 seconds.
// There are no more tasks at this point, so playback is resumed.
// 6) Third rewind
await ent.rewind();
// ↑ No scheduled tasks, so playback runs uninterrupted
})();
Removes the task represented by the string id (id obtained from scheduleTask()).
The string id of the task to remove.
The removed task.
ProtectedconfigAbstractcategoryThe default configuration for clips in a specific effect category, which includes any additional configuration options that are specific to the effect category.
AbstractcategoryThe 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 preset effect definition).
StaticbaseThe base default configuration for any animation clip before any category-specific configuration, preset effect definition configuration, or configuration passed in through clip factory functions are applied.
Returns an object containing the configuration options used to define both the timing and effects of the animation clip.
An object containing
Calculates 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} = webchalk.createAnimationClipFactories({
additionalEntranceEffectBank: {
rotate: {
buildFrameGenerators(degrees: number) {
return {
// when playing, keep computing the value between 0 and 'degrees'
mutatorGenerator_play: () => () => { this.domElem.style.rotate = this.computeTween(0, degrees)+'deg'; },
// when rewinding, keep computing the value between 'degrees' and 0
mutatorGenerator_rewind: () => () => { 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 definition with a function that returns empty arrays (so no actual keyframes).
Protected_Protected_Protected_Protected_ProtectedanimateProtectedmergeProtectedpreventProtectedupdateUpdates the duration of rate-based animation clips.
The duration computed once the clip plays.
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. Webchalk provides convenient factory functions that can be used to create such clips—the factory functions can be obtained from Webchalk.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>});Example