optional object containing additional banks that the developer can use to add their own custom preset effects
Optionalcustomobject of type EffectGeneratorBank, containing keys that represent effect names and values that are EffectGenerators to be used with the Emphasis() clip factory function
Optionalcustomobject of type EffectGeneratorBank, containing keys that represent effect names and values that are EffectGenerators to be used with Entrance() clip factory function
Optionalcustomobject of type EffectGeneratorBank, containing keys that represent effect names and values that are EffectGenerators to be used with the Exit() clip factory function
Optionalcustomobject of type EffectGeneratorBank, containing keys that represent effect names and values that are EffectGenerators to be used with the Motion() clip factory function
if false, the preset effects that normally come with the framework will be excluded
Factory functions that return category-specific AnimClips, each with intellisense for their category-specific effects banks.
Creates a ConnectorEntranceClip, which can be used to reveal a WebimatorConnectorElement that was hidden.
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (ConnectorEntranceClipConfig) that defines the behavior of the clip
A ConnectorEntranceClip object.
// retrieve connector entrance clip factory function;
const { ConnectorEntrance } = webimator.createAnimationClipFactories();
// select connector elements from the DOM
const topConnector = document.querySelector('.connector--thick');
const middleConnector = document.querySelector('.connector--skinny');
const verticalConnector = document.querySelector('.connector--red');
const bottomConnector = document.querySelector('.connector--dashed');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create connector entrance clips using factory function
// A B C D
const clip1 = ConnectorEntrance(topConnector, '~fade-in', [], {duration: 2000, playbackRate: 2});
// A B C
const clip2 = ConnectorEntrance(middleConnector, '~trace', ['from-A']);
// A B C D
const clip3 = ConnectorEntrance(verticalConnector, '~trace', ['from-bottom'], {delay: 500});
// A B C
const clip4 = ConnectorEntrance(bottomConnector, '~appear', []);
// play clips (all will play at the same time because they are asynchronous)
clip1.play(); // topConnector fades in
clip2.play(); // middleConnector is drawn from its point A to its point B
clip3.play(); // verticalConnector is draw starting from whichever endpoint is lower
clip4.play(); // bottomConnector appears instantly
Creates a ConnectorExitClip, which can be used to unrender a WebimatorConnectorElement.
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (ConnectorExitClipConfig) that defines the behavior of the clip
A ConnectorExitClip object.
// retrieve connector exit clip factory function;
const { ConnectorExit } = webimator.createAnimationClipFactories();
// select connector elements from the DOM
const topConnector = document.querySelector('.connector--thick');
const middleConnector = document.querySelector('.connector--skinny');
const verticalConnector = document.querySelector('.connector--red');
const bottomConnector = document.querySelector('.connector--dashed');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create connector exit clips using factory function
// A B C D
const clip1 = ConnectorExit(topConnector, '~fade-out', [], {duration: 2000, playbackRate: 2});
// A B C
const clip2 = ConnectorExit(middleConnector, '~trace', ['from-B']);
// A B C D
const clip3 = ConnectorExit(verticalConnector, '~trace', ['from-top'], {delay: 500});
// A B C
const clip4 = ConnectorExit(bottomConnector, '~disappear', []);
// play clips (all will play at the same time because they are asynchronous)
clip1.play(); // topConnector fades out
clip2.play(); // middleConnector is erased from its point B to its point A
clip3.play(); // verticalConnector is erased starting from whichever endpoint is higher
clip4.play(); // bottomConnector disappears instantly
Creates a ConnectorSetterClip, which can be used to set the endpoints of a WebimatorConnectorElement.
the WebimatorConnectorElement element to which the animation effect will be applied
the new target of endpoint A (or "preserve" if it should not change)
the new target of endpoint B (or "preserve" if it should not change)
A WebimatorConnectorElementConfig object.
A ConnectorSetter object.
// retrieve connector setter clip factory function;
const { ConnectorSetter } = webimator.createAnimationClipFactories();
// select connector elements from the DOM
const topConnector = document.querySelector('.connector--thick');
const middleConnector = document.querySelector('.connector--skinny');
const verticalConnector = document.querySelector('.connector--red');
const bottomConnector = document.querySelector('.connector--dashed');
// select other elements from the DOM
const circle1 = document.querySelector('.circle--left');
const circle2 = document.querySelector('.circle--right');
// A = connector element, B = point a, C = point b, D = configuration (optional)
// create connector setter clips using factory function
// A B C
const clip1 = ConnectorSetter(topConnector, [circle1, 'center', 'top'], [circle2, 'center', 'top']);
// A B C
const clip2 = ConnectorSetter(middleConnector, [circle1, 'right', 'center'], [circle2, 'left', 'center']);
// A B C
const clip3 = ConnectorSetter(verticalConnector, [topConnector, 'center', 'center'], [middleConnector, 'center', 'center']);
const clip4 = ConnectorSetter(
bottomConnector, // A
[circle1, 'center', 'center'], // B
[circle2, 'center', 'center'], // C
{pointTrackingEnabled: false}, // D
);
// play clips (all will play at the same time because they are asynchronous)
// topConnector's endpoints are set to the center-tops of circle1 and circle2
clip1.play();
// middleConnector's endpoints are set to the right-center of circle1 and left-center of circle2
clip2.play();
// verticalConnector's endpoints are set to the midpoints of topConnector and middleConnector
clip3.play();
// bottomConnector's endpoints are set to the center-bottoms of circle1 and circle2,
// but its endpoints will NOT be updated if the circles move
clip4.play();
// if the connectors are then drawn using ConnectorEntrance(), their endpoints will match
// what was set according to ConnectorSetter()
Creates an EmphasisClip, which can be used to emphasize an element in some way (like highlighting).
the element to which the animation effect will be applied
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (EmphasisClipConfig) that defines the behavior of the clip
An EmphasisClip object.
// retrieve emphasis clip factory function;
const { Emphasis } = webimator.createAnimationClipFactories();
// select element from the DOM
const importantText = document.querySelector('.important-text');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create emphasis clip using factory function
const clip1 = Emphasis(
importantText, // A
'~highlight', // B
['yellow'], // C
{ // D
cssClasses: {toAddOnStart: ['.bold', '.italics']},
duration: 1000,
},
);
// play clip
clip1.play();
Creates an EntranceClip, which can be used to reveal an element that was hidden.
// retrieve entrance clip factory function;
const { Entrance } = webimator.createAnimationClipFactories();
// select elements from the DOM
const square = document.querySelector('.square');
const circle = document.querySelector('.circle');
const triangle = document.querySelector('.triangle');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create three entrance clips using factory function
// A B C
const clip1 = Entrance(square, '~appear', []);
// A B C D
const clip2 = Entrance(circle, '~fly-in', ['from-left'], {duration: 2000, easing: 'ease-out'});
// A B C D
const clip3 = Entrance(triangle, '~pinwheel', [2, 'clockwise'], {playbackRate: 2, delay: 1000});
// play clips (all will play at the same time because they are asynchronous)
clip1.play();
clip2.play();
clip3.play();
the element to which the animation effect will be applied
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (EntranceClipConfig) that defines the behavior of the clip
An EntranceClip object.
Creates an ExitClip, which can be used to unrender or make invisible an element.
the element to which the animation effect will be applied
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (ExitClipConfig) that defines the behavior of the clip
An ExitClip object.
// retrieve exit clip factory function;
const { Exit } = webimator.createAnimationClipFactories();
// select elements from the DOM
const square = document.querySelector('.square');
const circle = document.querySelector('.circle');
const triangle = document.querySelector('.triangle');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create three exit clips using factory function
// A B C
const clip1 = Exit(square, '~disappear', []);
// A B C D
const clip2 = Exit(circle, '~fly-out', ['to-left'], {duration: 2000, easing: 'ease-in'});
// A B C D
const clip3 = Exit(triangle, '~pinwheel', [2, 'counterclockwise'], {playbackRate: 2, delay: 1000});
// play clips (all will play at the same time because they are asynchronous)
clip1.play();
clip2.play();
clip3.play();
Creates a MotionClip.
the element to which the animation effect will be applied
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (MotionClipConfig) that defines the behavior of the clip
A MotionClip object.
// retrieve motion clip factory function;
const { Motion } = webimator.createAnimationClipFactories();
// select elements from the DOM
const square = document.querySelector('.square');
const circle = document.querySelector('.circle');
const triangle = document.querySelector('.triangle');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create motion clips using factory function
// A B C
const clip1 = Motion(square, '~translate', [{translate: '200px, 300rem'}]);
// A B C
const clip2 = Motion(circle, '~move-to', [document.querySelector('body'), {alignment: 'center center'}]);
// A B C D
const clip3 = Motion(triangle, '~move-to', [circle, {alignment: 'center top', selfOffset: '0%, -100%'}], {duration: 2000});
// play clips one at a time
(async() => {
await clip1.play(); // square moves 200px right and 300rem down
await clip2.play(); // circle moves to center itself horizontally and vertically with the <body>
await clip3.play(); // triangle moves to sit on top of the circle, horizontally centered
})()
Creates an ScrollerClip, which can be used to scroll an element.
the element to which the animation effect will be applied
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (ScrollerClipConfig) that defines the behavior of the clip
An ScrollerClip object.
// retrieve scroller clip factory function;
const { Scroller } = webimator.createAnimationClipFactories();
// select elements from the DOM
const sideBar = document.querySelector('.side-bar');
const mainPage = document.querySelector('.main');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create scroller clips using factory function
// A B C D
const clip1 = Scroller(sideBar, '~scroll-self', [sideBar?.querySelector('.contact-link')], {duration: 1000});
const clip2 = Scroller(
mainPage, // A
'~scroll-self', // B
[ // C
mainPage?.querySelector('.testimonials'),
{
scrollableOffset: ['0px', 'center'],
targetOffset: ['0px', 'top'],
},
],
{ // D
duration: 2000,
easing: 'ease-in-out'
},
);
// play clips one at a time
(async() => {
// side bar scrolls to a presumed contact link
await clip1.play();
// main page scrolls to a presumed testimonials section.
// the top of the testimonials section aligns with the center of the page
await clip2.play();
})();
Creates a TransitionClip, which can be used to make an element transition to or from a given Keyframe.
the element to which the animation effect will be applied
the name of the preset animation effect
array of arguments that can be used to customize the appearance of the chosen animation effect
configuration options object (TransitionClipConfig) that defines the behavior of the clip
A TransitionClip object.
// retrieve transition clip factory function;
const { Transition } = webimator.createAnimationClipFactories();
// select elements from the DOM
const square = document.querySelector('.square');
const textBox = document.querySelector('.text-box');
const triangle = document.querySelector('.triangle');
// A = element, B = effect name, C = effect options, D = configuration (optional)
// create transition clips using factory function
// A B C D
const clip1 = Transition(square, '~to', [{backgroundColor: 'lightred', width: '50%'}], {duration: 1000});
// A B C
const clip2 = Transition(textBox, '~to', [{fontSize: '30px', color: 'blue'}]);
// A B C
const clip3 = Transition(triangle, '~from', [{opacity: '0'}]);
// play clips (all will play at the same time because they are asynchronous)
clip1.play(); // square transitions to turn red and shrink to half width
clip2.play(); // text box font size transitions to have font size of 30px and text color blue
clip3.play(); // triangle transitions FROM 0 opacity to its current opacity
const square = document.querySelector('.square');
// Using the method and using one of the `Entrance()` factory function
const clipFactories = webimator.createAnimationClipFactories();
const ent = clipFactories.Entrance(square, '~fly-in', ['from-top'], {duration: 2000});
ent.play();
const square = document.querySelector('.square');
// Using destructuring assignment to conveniently extract the `Entrance()` and `Motion()` factory functions
const {Entrance, Motion} = webimator.createAnimationClipFactories();
const ent = Entrance(square, '~fly-in', ['from-top'], {duration: 2000});
const mot1 = Motion(square, '~translate', [{translate: '500px, 0px'}], {duration: 1000});
const mot2 = Motion(square, '~translate', [{translate: '0px, 500px'}], {duration: 500});
// clips are added to a sequence
const seq = webimator.newSequence(ent, mot1, mot2);
seq.play();
// Extending the preset entrances and motions banks with custom effects
const clipFactories = webimator.createAnimationClipFactories({
// CUSTOM ENTRANCES
customEntranceEffects: {
coolZoomIn: {
generateKeyframes(initialScale: number) {
return {
forwardFrames: [
{scale: initialScale, opacity: 0},
{scale: 1, opacity: 1}
],
// (backwardFrames could have been omitted in this case because
// the reversal of forwardFrames is exactly equivalent)
backwardFrames: [
{scale: 1, opacity: 1},
{scale: initialScale, opacity: 0}
]
};
}
},
blinkIn: {
generateKeyframes() {
return {
forwardFrames: [
{opacity: 0}, {opacity: 1}, {opacity: 0}, {opacity: 1}, {opacity: 0}, {opacity: 1}
],
// (backwardFrames omitted because the reversal of forwardFrames is exactly equivalent)
};
}
}
},
// CUSTOM EXITS
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 square = document.querySelector('.square');
// the custom animations you created are now valid as well as detected by TypeScript
const ent1 = clipFactories.Entrance(square, 'coolZoomIn', [0.2]);
const ent2 = clipFactories.Entrance(square, 'blinkIn', []);
const ext = clipFactories.Exit(square, 'flyOutLeft', []);
Creates a new AnimSequence with configuration options specified in the config parameter followed by an optional list of animation clips.
configuration options for the sequence
Rest...animClips: AnimClip<EffectGenerator, AnimClipConfig>[]optional comma-separated list of AnimClips to add to the sequence
A new AnimSequence instance.
// retrieve clip factory functions
const clipFactories = webimator.createAnimationClipFactories();
// select a (presumable) square-shaped element from the DOM
const squareEl = document.querySelector(".square");
// create sequence with some configuration options and some animation clips
const seq = webimator.newSequence(
{ description: "Fade in square, move it, and fade out", playbackRate: 2 },
clipFactories.Entrance(squareEl, "~fade-in", []),
clipFactories.Motion(squareEl, "~translate", [{ translate: "200px, 500px" }]),
clipFactories.Exit(squareEl, "~fade-out", [])
);
// play sequence
seq.play();
// SAME EXAMPLE BUT WITH DESTRUCTURING ASSIGNMENT FOR THE CLIP FACTORY FUNCTIONS
const {Entrance, Exit, Motion} = webimator.createAnimationClipFactories();
const squareEl = document.querySelector('.square');
const seq = webimator.newSequence(
{description: 'Fade in square, move it, and fade out', playbackRate: 2},
Entrance(squareEl, '~fade-in', []),
Motion(squareEl, '~translate', [{translate: '200px, 500px'}]),
Exit(squareEl, '~fade-out', []),
);
seq.play();
Creates a new AnimSequence instance with an optional list of animation clips.
Rest...animClips: AnimClip<EffectGenerator, AnimClipConfig>[]optional comma-separated list of AnimClips to add to the sequence
A new AnimSequence instance.
// retrieve clip factory functions
const clipFactories = webimator.createAnimationClipFactories();
// select a (presumable) square-shaped element from the DOM
const squareEl = document.querySelector('.square');
// create sequence with some animation clips
const seq = webimator.newSequence(
clipFactories.Entrance(squareEl, '~fade-in', []),
clipFactories.Motion(squareEl, '~translate', [{translate: '200px, 500px'}]),
clipFactories.Exit(squareEl, '~fade-out', []),
);
// play sequence
seq.play();
// SAME EXAMPLE BUT WITH DESTRUCTURING ASSIGNMENT FOR THE CLIP FACTORY FUNCTIONS
const {Entrance, Exit, Motion} = webimator.createAnimationClipFactories();
const squareEl = document.querySelector('.square');
const seq = webimator.newSequence(
Entrance(squareEl, '~fade-in', []),
Motion(squareEl, '~translate', [{translate: '200px, 500px'}]),
Exit(squareEl, '~fade-out', []),
);
seq.play();
Creates a new AnimTimeline with configuration options specified in the config parameter followed by an optional list of animation sequences.
configuration options for the timeline
Rest...animSequences: AnimSequence[]optional comma-separated list of AnimSequences to add to the timeline
A new AnimTimeline instance.
// retrieve some clip factory functions
const {Entrance, Exit, Motion} = webimator.createAnimationClipFactories();
// select presumably a square element and a circle element from the DOM
const squareEl = document.querySelector('.square');
const circleEl = document.querySelector('.circle');
// create first sequence
const seq1 = webimator.newSequence(
{description: 'Fade in square, move it, and fade out', playbackRate: 2},
Entrance(squareEl, '~fade-in', []),
Motion(squareEl, '~translate', [{translate: '200px, 500px'}]),
Exit(squareEl, '~fade-out', []),
);
// create second sequence
const seq2 = webimator.newSequence(
{description: 'Fade in circle and move it'},
Entrance(circleEl, '~fly-in', ['from-left']),
Motion(circleEl, '~translate', [{translate: '250px, 0px'}]),
);
// create timeline with some configuration and both sequences
const timeline = webimator.newTimeline(
{timelineName: 'Moving Shapes', autoLinksButtons: true},
seq1,
seq2,
);
// step forward twice, playing both sequences
timeline.step('forward')
.then(() => timeline.step('forward'));
Creates a new AnimTimeline with with an optional list of animation sequences.
Rest...animSequences: AnimSequence[]optional comma-separated list of AnimSequences to add to the timeline
A new AnimTimeline instance.
// retrieve some clip factory functions
const {Entrance, Exit, Motion} = webimator.createAnimationClipFactories();
// select presumably a square element and a circle element from the DOM
const squareEl = document.querySelector('.square');
const circleEl = document.querySelector('.circle');
// create first sequence
const seq1 = webimator.newSequence(
{description: 'Fade in square, move it, and fade out', playbackRate: 2},
Entrance(squareEl, '~fade-in', []),
Motion(squareEl, '~translate', [{translate: '200px, 500px'}]),
Exit(squareEl, '~fade-out', []),
);
// create second sequence
const seq2 = webimator.newSequence(
{description: 'Fade in circle and move it'},
Entrance(circleEl, '~fly-in', ['from-left']),
Motion(circleEl, '~translate', [{translate: '250px, 0px'}]),
);
// create timeline with both sequences
const timeline = webimator.newTimeline(
seq1,
seq2,
);
Creates functions that return AnimClips for specific effect categories. A clip for a given category can use a single preset animation effect from the effects bank of the same category. For example,
createAnimationClipFactories().Entrance(someElement, '~appear', [])will use the "~appear" animation effect from the bank of entrance animation effects, but the "~appear" animation will obviously not be found in the bank of exit animation effects, socreateAnimationClipFactories().Exit(someElement, '~appear', [])will throw an error.