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 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.
Additional properties for text editor configuration.
ProtectedcategoryProtectednestedForces 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 AnimClip.scheduleTask | scheduleTask()).
The string id of the task to remove.
The removed task.
ProtectedconfigThe default configuration for clips in a specific effect category, which includes any additional configuration options that are specific to the effect category.
The 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.
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_ProtectedanimateAdditional properties for text editor configuration:
ProtectedmergeProtectedpreventProtectedupdateUpdates the duration of rate-based animation clips.
The duration computed once the clip plays.
Used to edit the text contents of an element.
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