targets
css selector
dom node / nodelist
javascript object
{"charged":"0%","cycles":120}{"charged":"0%","cycles":120}{"prop1":0,"prop2":"0%"}0
Can be any CSS selector.
Pseudo elements can't be targeted using JavaScript.
| Type | Default | Example |
| String | null | targets: '.item' |
aeon({
targets: '.css-selector-demo .el',
translateX: 250,
});Can be any DOM Node or NodeList.
| Type | Default | Example |
| DOM Node | null | targets: el.querySelector('.item') |
| NodeList | null | targets: el.querySelectorAll('.item') |
const elements = document.querySelectorAll('.dom-node-demo .el');
aeon({
targets: elements,
translateX: 270,
});A JavaScript Object with at least one property containing a numerical value.
| Type | Default | Example |
| Object | null | targets: myObjectProp |
const logEl = document.querySelector('.battery-log');
const battery = {
charged: '0%',
cycles: 120,
};
aeon({
targets: battery,
charged: '100%',
cycles: 130,
round: 1,
easing: 'linear',
update() {
logEl.innerHTML = JSON.stringify(battery);
},
});An array containing multiple targets.
Accepts mixed types. E.g. ['.el', dom-node, jsObject]
| Type | Default | Example |
| Array | null | targets: ['.item', el.getElementById('#thing')] |
const el = document.querySelector('.mixed-array-demo .el-01');
aeon({
targets: [el, '.mixed-array-demo .el-02', '.mixed-array-demo .el-03'],
translateX: 250,
});Any CSS properties can be animated.
Most CSS properties will cause layout changes or repaint, and will result in choppy animation. Prioritize opacity and CSS transforms as much as possible.
More details about accepted values in the values section.
| Example | value |
opacity | .5 |
left | '100px' |
aeon({
targets: '.css-prop-demo .el',
left: '240px',
backgroundColor: '#FFF',
borderRadius: ['0%', '50%'],
easing: 'easeInOutQuad',
});Animate CSS transforms properties individually.
It's possible to specify different timing for each transforms properties, more details in the specific property parameters section.
More details about accepted values in the values section.
| Valid properties | Default unit |
'translateX' | 'px' |
'translateY' | 'px' |
'translateZ' | 'px' |
'rotate' | 'deg' |
'rotateX' | 'deg' |
'rotateY' | 'deg' |
'rotateZ' | 'deg' |
'scale' | — |
'scaleX' | — |
'scaleY' | — |
'scaleZ' | — |
'skew' | 'deg' |
'skewX' | 'deg' |
'skewY' | 'deg' |
'perspective' | 'px' |
aeon({
targets: '.css-transforms-demo .el',
translateX: 250,
scale: 2,
rotate: '1turn',
});Any Object property containing a numerical value can be animated.
More details about accepted values in the values section.
| Example | value |
prop1 | 50 |
'prop2' | '100%' |
const objPropLogEl = document.querySelector('.js-object-log');
const myObject = {
prop1: 0,
prop2: '0%',
};
aeon({
targets: myObject,
prop1: 50,
prop2: '100%',
easing: 'linear',
round: 1,
update() {
objPropLogEl.innerHTML = JSON.stringify(myObject);
},
});Any DOM Attributes containing a numerical value can be animated.
More details about accepted values in the values section.
| Example | value |
value | 1000 |
volume | 0 |
data-custom | '3 dogs' |
aeon({
targets: '.dom-attribute-demo input',
value: [0, 1000],
round: 1,
easing: 'easeInOutExpo',
});Like any other DOM attributes, all SVG attributes containing at least one numerical value can be animated.
More details about accepted values in the values section and SVG animation in the SVG section.
| Example | value |
points | '64 68.64 8.574 100 63.446 67.68 64 4 64.554 67.68 119.426 100' |
scale | 1 |
baseFrequency | 0 |
aeon({
targets: ['.svg-attributes-demo polygon', 'feTurbulence', 'feDisplacementMap'],
points: '64 128 8.574 96 8.574 32 64 0 119.426 32 119.426 96',
baseFrequency: 0,
scale: 1,
loop: true,
direction: 'alternate',
easing: 'easeInOutExpo',
});Defines the duration in milliseconds of the animation.
| Type | Default | Example |
| Number | 1000 | 3000 |
| stagger | See staggering section | stagger(150) |
| Function | See function based parameters section | (el, i) => i * 150 |
aeon({
targets: '.duration-demo .el',
translateX: 250,
duration: 3000,
});Defines the delay in milliseconds of the animation.
| Type | Default | Example |
| Number | 0 | 1000 |
| stagger | See staggering section | stagger(150) |
| Function | See function based parameters section | (el, i) => i * 150 |
aeon({
targets: '.delay-demo .el',
translateX: 250,
delay: 1000,
});Adds some extra time in milliseconds at the end of the animation.
| Type | Default | Example |
| Number | 0 | 1000 |
| stagger | See staggering section | stagger(150) |
| Function | See function based parameters section | (el, i) => i * 150 |
aeon({
targets: '.endDelay-demo .el',
translateX: 250,
endDelay: 1000,
direction: 'alternate',
});Defines the timing function of the animation.
Check out the easings section for a complete list of available easing and parameters.
| Type | Default | Example |
| String | 'easeOutElastic(1, .5)' | easing: 'easeInOutQuad' |
aeon({
targets: '.easing-demo .el',
translateX: 250,
easing: 'easeInOutExpo',
});Rounds up the value to x decimals.
| Type | Default | Example |
| Number | 0 | round: 10 |
const roundLogEl = document.querySelector('.round-log');
aeon({
targets: roundLogEl,
innerHTML: [0, 10000],
easing: 'linear',
round: 10, // Will round the animated value to 1 decimal
});aeon({
targets: '.specific-prop-params-demo .el',
translateX: {
value: 250,
duration: 800,
},
rotate: {
value: 360,
duration: 1800,
easing: 'easeInOutSine',
},
scale: {
value: 2,
duration: 1600,
delay: 800,
easing: 'easeInOutQuart',
},
delay: 250, // All properties except 'scale' inherit 250ms delay
});Get different values for every target and property of the animation.
The function accepts 3 arguments:
| Arguments | Infos |
target | The curent animated targeted element |
index | The index of the animated targeted element |
targetsLength | The total number of animated targets |
See staggering section for easier values manipulation.
aeon({
targets: '.function-based-params-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
delay(el, i) {
return i * 100;
},
endDelay(el, i, l) {
return (l - i) * 100;
},
});Defines the direction of the animation.
| Accepts | Infos |
'normal' | Animation progress goes from 0 to 100% |
'reverse' | Animation progress goes from 100% to 0% |
'alternate' | Animation progress goes from 0% to 100% then goes back to 0% |
aeon({
targets: '.dir-normal',
translateX: 250,
easing: 'easeInOutSine',
});
aeon({
targets: '.dir-reverse',
translateX: 250,
direction: 'reverse',
easing: 'easeInOutSine',
});
aeon({
targets: '.dir-alternate',
translateX: 250,
direction: 'alternate',
easing: 'easeInOutSine',
});Defines the number of iterations of your animation.
| Accepts | Infos |
Number | The number of iterations |
true | Loop indefinitely |
aeon({
targets: '.loop',
translateX: 270,
loop: 3,
easing: 'easeInOutSine',
});
aeon({
targets: '.loop-infinity',
translateX: 270,
loop: true,
easing: 'easeInOutSine',
});
aeon({
targets: '.loop-reverse',
translateX: 270,
loop: 3,
direction: 'reverse',
easing: 'easeInOutSine',
});
aeon({
targets: '.loop-reverse-infinity',
translateX: 270,
direction: 'reverse',
loop: true,
easing: 'easeInOutSine',
});
aeon({
targets: '.loop-alternate',
translateX: 270,
loop: 3,
direction: 'alternate',
easing: 'easeInOutSine',
});
aeon({
targets: '.loop-alternate-infinity',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutSine',
});Defines if the animation should automatically starts or not.
| Accepts | Infos |
true | Automatically starts the animation |
false | Animation is paused by default |
aeon({
targets: '.autoplay-true',
translateX: 250,
autoplay: true,
easing: 'easeInOutSine',
});
aeon({
targets: '.autoplay-false',
translateX: 250,
autoplay: false,
easing: 'easeInOutSine',
});If the original value has a unit, it will be automatically added to the animated value.
| Type | Example |
| Number | translateX: 250 |
aeon({
targets: '.unitless-values-demo .el',
translateX: 250, // -> '250px'
rotate: 540, // -> '540deg'
});Forces the animation to use a certain unit and will automatically convert the initial target value.
Conversion accuracy can vary depending of the unit used.
You can also define the initial value of the animation directly using an array, see the from to values section.
| Type | Example |
| String | width: '100%' |
const a = aeon({
targets: '.specific-unit-values-demo .el',
width: '100%', // from '28px' to '100%',
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true,
});Adds, substracts or multiplies the original value.
| Accepts | Effect | Example |
'+=' | Add | '+=100' |
'-=' | Substract | '-=2turn' |
'*=' | Multiply | '*=10' |
const relativeEl = document.querySelector('.el.relative-values');
relativeEl.style.transform = 'translateX(100px)';
aeon({
targets: '.el.relative-values',
translateX: {
value: '*=2.5', // 100px * 2.5 = '250px'
duration: 1000,
},
width: {
value: '-=20px', // 28 - 20 = '8px'
duration: 1800,
easing: 'easeInOutSine',
},
rotate: {
value: '+=2turn', // 0 + 2 = '2turn'
duration: 1800,
easing: 'easeInOutSine',
},
direction: 'alternate',
});aeon.js accepts and converts Hexadecimal, RGB, RGBA, HSL, and HSLA color values.
CSS color codes ( e.g. : 'red', 'yellow', 'aqua' ) are not supported.
| Accepts | Example |
| Hexadecimal | '#FFF' or '#FFFFFF' |
| RGB | 'rgb(255, 255, 255)' |
| RGBA | 'rgba(255, 255, 255, .2)' |
| HSL | 'hsl(0, 100%, 100%)' |
| HSLA | 'hsla(0, 100%, 100%, .2)' |
timeline({
endDelay: 1000,
easing: 'easeInOutQuad',
direction: 'alternate',
loop: true,
})
.add({ targets: '.color-hex', background: '#FFF' }, 0)
.add({ targets: '.color-rgb', background: 'rgb(255, 255, 255)' }, 0)
.add({ targets: '.color-hsl', background: 'hsl(0, 100%, 100%)' }, 0)
.add({ targets: '.color-rgba', background: 'rgba(255,255,255, 0.2)' }, 0)
.add({ targets: '.color-hsla', background: 'hsla(0, 100%, 100%, 0.2)' }, 0)
.add({ targets: '.colors-demo .el', translateX: 270 }, 0);Forces the animation to start at a specified value.
| Type | Example |
Array | ['50%', '100%'] |
aeon({
targets: '.el.from-to-values',
translateX: [100, 250], // from 100 to 250
delay: 500,
direction: 'alternate',
loop: true,
});Get different values for every target and property of the animation.
The function accepts 3 arguments:
| Arguments | Infos |
target | The curently animated targeted element |
index | The index of the animated targeted element |
targetsLength | The total number of animated targets |
aeon({
targets: '.function-based-values-demo .el',
translateX(el) {
return el.getAttribute('data-x');
},
translateY(el, i) {
return 50 + (-50 * i);
},
scale(el, i, l) {
return (l - i) + 0.25;
},
rotate() { return random(-360, 360); },
borderRadius() { return ['50%', `${random(10, 35)}%`]; },
duration() { return random(1200, 1800); },
delay() { return random(0, 400); },
direction: 'alternate',
loop: true,
});Animation keyframes are defined using an Array, within the keyframes property.
If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
| Type | Example |
Array | [
{value: 100, easing: 'easeOutExpo'},
{value: 200, delay: 500},
{value: 300, duration: 1000}
] |
aeon({
targets: '.animation-keyframes-demo .el',
keyframes: [
{ translateY: -40 },
{ translateX: 250 },
{ translateY: 40 },
{ translateX: 0 },
{ translateY: 0 },
],
duration: 4000,
easing: 'easeOutElastic(1, .8)',
loop: true,
});Similar to animation keyframes, property keyframes are defined using an Array of property Object. Property keyframes allow overlapping animations since each property have its own keyframes array.
If there is no duration specified inside the keyframes, each keyframe duration will be equal to the animation's total duration divided by the number of keyframes.
| Type | Example |
Array | [
{value: 100, easing: 'easeOutExpo'},
{value: 200, delay: 500},
{value: 300, duration: 1000}
] |
aeon({
targets: '.property-keyframes-demo .el',
translateX: [
{ value: 250, duration: 1000, delay: 500 },
{ value: 0, duration: 1000, delay: 500 },
],
translateY: [
{ value: -40, duration: 500 },
{ value: 40, duration: 500, delay: 1000 },
{ value: 0, duration: 500, delay: 1000 },
],
scaleX: [
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900 },
{ value: 4, duration: 100, delay: 500, easing: 'easeOutExpo' },
{ value: 1, duration: 900 },
],
scaleY: [
{ value: [1.75, 1], duration: 500 },
{ value: 2, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 },
{ value: 1.75, duration: 50, delay: 1000, easing: 'easeOutExpo' },
{ value: 1, duration: 450 },
],
easing: 'easeOutElastic(1, .8)',
loop: true,
});Staggering allows you to animate multiple elements with follow through and overlapping action.
stagger(value, options)| Arguments | Type | Info | Required |
| Value | Number, String, Array | The manipulated value(s) | Yes |
| Options | Object | Stagger parameters | No |
aeon({
targets: '.basic-staggering-demo .el',
translateX: 270,
delay: stagger(100), // increase delay by 100ms for each elements.
});Starts the staggering effect from a specific value.
stagger(value, {start: startValue})| Types | Info |
Number, String | Same as propety values, see values section |
aeon({
targets: '.staggering-start-value-demo .el',
translateX: 270,
delay: stagger(100, { start: 500 }), // delay starts at 500ms then increase by 100ms for each elements.
});Distributes evenly values between two numbers.
stagger([startValue, endValue])| Type | Info |
'easingName' | All valid easing names are accepted, see easings section |
function(i) | Custom easing function, see custom easings section |
aeon({
targets: '.range-value-staggering-demo .el',
translateX: 270,
rotate: stagger([-360, 360]), // rotation will be distributed from -360deg to 360deg evenly between all elements
easing: 'easeInOutQuad',
});Starts the stagger effect from a specific position.
stagger(value, {from: startingPosition})| Options | Type | Info |
'first' (default) | 'string' | Start the effect from the first element |
'last' | 'string' | Start the effect from the last element |
'center' | 'string' | Start the effect from the center |
index | number | Start the effect from the specified index |
aeon({
targets: '.staggering-from-demo .el',
translateX: 270,
delay: stagger(100, { from: 'center' }),
});Changes the order in which the stagger operates.
stagger(value, {direction: 'reverse'})| Options | Info |
'normal' (default) | Normal staggering, from the first element to the last |
'reverse' | Reversed staggering, from the last element to the first |
aeon({
targets: '.staggering-direction-demo .el',
translateX: 270,
delay: stagger(100, { direction: 'reverse' }),
});Stagger values using an easing function.
stagger(value, {easing: 'easingName'})| Type | Info |
'string' | All valid easing names are accepted |
function(i) | Use your own custom easings function |
aeon({
targets: '.staggering-easing-demo .el',
translateX: 270,
delay: stagger(300, { easing: 'easeOutQuad' }),
});Staggering values based a 2D array that allow "ripple" effects.
stagger(value, {grid: [rows, columns]})| Type | Info |
array | A 2 items array, the first value is the number of rows, the second the number of columns |
aeon({
targets: '.staggering-grid-demo .el',
scale: [
{ value: 0.1, easing: 'easeOutSine', duration: 500 },
{ value: 1, easing: 'easeInOutQuad', duration: 1200 },
],
delay: stagger(200, { grid: [14, 5], from: 'center' }),
});Forces the direction of a grid starrering effect.
stagger(value, {grid: [rows, columns], axis: 'x'})| Parameters | Info |
'x' | Follows the x axis |
'y' | Follows the y axis |
aeon({
targets: '.staggering-axis-grid-demo .el',
translateX: stagger(10, { grid: [14, 5], from: 'center', axis: 'x' }),
translateY: stagger(10, { grid: [14, 5], from: 'center', axis: 'y' }),
rotateZ: stagger([0, 90], { grid: [14, 5], from: 'center', axis: 'x' }),
delay: stagger(200, { grid: [14, 5], from: 'center' }),
easing: 'easeInOutQuad',
});Timelines let you synchronise multiple animations together.
By default each animation added to the timeline starts after the previous animation ends.
Creating a timeline:
const myTimeline = timeline(parameters);| Argument | Type | Info | Required |
parameters | Object | The default parameters of the timeline inherited by children | No |
Adding animations to a timeline:
myTimeline.add(parameters, offset);| Argument | Types | Info | Required |
parameters | Object | The child animation parameters, override the timeline default parameters | Yes |
time offset | String or Number | Check out the Timeline offsets section | No |
const els = document.querySelectorAll('.basic-timeline-demo .el');
// Create a timeline with default parameters
const tl = timeline({
easing: 'easeOutExpo',
duration: 750,
});
// Add children
tl
.add({
targets: els[0],
translateX: 250,
})
.add({
targets: els[1],
translateX: 250,
})
.add({
targets: els[2],
translateX: 250,
});Time offsets can be specified with a second optional parameter using the timeline .add() function. It defines when a animation starts in the timeline, if no offset is specifed, the animation will starts after the previous animation ends.
An offset can be relative to the last animation or absolute to the whole timeline.
| Type | Offset | Example | Infos |
| String | '+=' | '+=200' | Starts 200ms after the previous animation ends |
| String | '-=' | '-=200' | Starts 200ms before the previous animation ends |
| Number | Number | 100 | Starts at 100ms, reagardless of the animtion position in the timeline |
const els = document.querySelectorAll('.offsets-demo .el');
// Create a timeline with default parameters
const tl = timeline({
easing: 'easeOutExpo',
duration: 750,
});
tl
.add({
targets: els[0],
translateX: 250,
})
.add({
targets: els[1],
translateX: 250,
}, '-=600') // relative offset
.add({
targets: els[2],
translateX: 250,
}, 400); // absolute offsetParameters set in the parent timeline instance will be inherited by all the children.
| Parameters that can be inherited |
targets |
duration |
delay |
endDelay |
round |
const tl = timeline({
targets: '.params-inheritance-demo .el',
delay(el, i) {
return i * 200;
},
duration: 500,
easing: 'easeOutExpo',
direction: 'alternate',
loop: true,
});
tl
.add({
translateX: 250,
// override the easing parameter
easing: 'spring',
})
.add({
opacity: 0.5,
scale: 2,
})
.add({
// override the targets parameter
targets: '.params-inheritance-demo .el.triangle',
rotate: 180,
})
.add({
translateX: 0,
scale: 1,
});Plays a paused animation, or starts the animation if the autoplay parameters is set to false.
animation.play();Pauses a running animation.
animation.pause();const animation = aeon({
targets: '.play-pause-demo .el',
translateX: 270,
delay(el, i) { return i * 100; },
direction: 'alternate',
loop: true,
autoplay: false,
easing: 'easeInOutSine',
});
document.querySelector('.play-pause-demo .play').onclick = () => animation.play();
document.querySelector('.play-pause-demo .pause').onclick = () => animation.pause();Restarts an animation from its initial values.
animation.restart();const animation = aeon({
targets: '.restart-demo .el',
translateX: 250,
delay(el, i) { return i * 100; },
direction: 'alternate',
loop: true,
easing: 'easeInOutSine'
});
document.querySelector('.restart-demo .restart').onclick = () => animation.restart();Reverses the direction of an animation.
animation.reverse();const animation = aeon({
targets: '.reverse-anim-demo .el',
translateX: 270,
loop: true,
delay(el, i) { return i * 200; },
easing: 'easeInOutSine',
});
document.querySelector('.reverse-anim-demo .reverse').onclick = () => animation.reverse();Jump to a specific time (in milliseconds).
animation.seek(timeStamp);Can also be used to control an animation while scrolling.
animation.seek((scrollPercent / 100) * animation.duration);const animation = aeon({
targets: '.seek-anim-demo .el',
translateX: 270,
delay(el, i) { return i * 100; },
elasticity: 200,
easing: 'easeInOutSine',
autoplay: false,
update(anim) {
anim.pause();
},
});
const seekProgressEl = document.querySelector('.seek-anim-demo .progress');
seekProgressEl.oninput = function() {
animation.seek(animation.duration * (seekProgressEl.value / 100));
};Callback triggered on every frame as soon as the animation starts playing.
| Type | Parameters | Info |
| Function | animation | Return the current animation Object |
let updates = 0;
aeon({
targets: '.update-demo .el',
translateX: 270,
delay: 1000,
direction: 'alternate',
loop: 3,
easing: 'easeInOutCirc',
update(anim) {
updates++;
progressLogEl.value = `progress : ${Math.round(anim.progress)}%`;
updateLogEl.value = `updates : ${updates}`;
},
});begin() callback is triggered once, when the animation starts playing.
complete() callback is triggered once, when the animation is completed.
Both begin() and complete() callbacks are called if the animation's duration is 0.
| Type | Parameters | Info |
| Function | animation | Return the current animation Object |
aeon({
targets: '.begin-complete-demo .el',
translateX: 240,
delay: 1000,
easing: 'easeInOutCirc',
update(anim) {
progressLogEl.value = `progress : ${Math.round(anim.progress)}%`;
beginLogEl.value = `began : ${anim.began}`;
completeLogEl.value = `completed : ${anim.completed}`;
},
begin(anim) {
beginLogEl.value = `began : ${anim.began}`;
},
complete(anim) {
completeLogEl.value = `completed : ${anim.completed}`;
},
});loopBegin() callback is triggered once everytime a loop begin.
loopComplete() callback is triggered once everytime a loop is completed.
| Type | Parameters | Info |
| Function | animation | Return the current animation Object |
let loopBegan = 0;
let loopCompleted = 0;
aeon({
targets: '.loopBegin-loopComplete-demo .el',
translateX: 240,
loop: true,
direction: 'alternate',
easing: 'easeInOutCirc',
loopBegin() {
loopBegan++;
beginLogEl.value = `loop began : ${loopBegan}`;
},
loopComplete() {
loopCompleted++;
completeLogEl.value = `loop completed : ${loopCompleted}`;
},
});Callback triggered on every frames in between the animation's delay and endDelay.
| Type | Parameters | Info |
| Function | animation | Return the current animation Object |
let changes = 0;
aeon({
targets: '.change-demo .el',
translateX: 270,
delay: 1000,
endDelay: 1000,
direction: 'alternate',
loop: true,
easing: 'easeInOutCirc',
update(anim) {
progressLogEl.value = `progress : ${Math.round(anim.progress)}%`;
},
change() {
changeLogEl.value = `changes : ${changes++}`;
},
});changeBegin() callback is triggered everytime the animation starts changing.
changeComplete() callback is triggered everytime the animation stops changing.
Animation direction will affect the order in which changeBegin() and changeComplete() are triggerd.
| Type | Parameters | Info |
| Function | animation | Return the current animation Object |
let changeBegan = 0;
let changeCompleted = 0;
aeon({
targets: '.changeBegin-changeComplete-demo .el',
translateX: 240,
delay: 1000,
endDelay: 1000,
loop: true,
direction: 'alternate',
easing: 'easeInOutCirc',
update(anim) {
progressLogEl.value = `progress : ${Math.round(anim.progress)}%`;
},
changeBegin() {
beginLogEl.value = `change began : ${changeBegan++}`;
},
changeComplete() {
completeLogEl.value = `change completed : ${changeCompleted++}`;
},
});Every animation instances return a finished promise when the animation finised.
animation.finished.then(function() {
// Do things...
});Promises are not suported in IE %3C 11.
const logFinished = () => {
set(finishedLogEl, { value: 'Promise resolved' });
set(promiseEl, { backgroundColor: '#18FF92' });
};
const animation = timeline({
targets: promiseEl,
delay: 400,
duration: 500,
endDelay: 400,
easing: 'easeInOutSine',
update(anim) {
progressLogEl.value = `progress : ${Math.round(anim.progress)}%`;
},
})
.add({ translateX: 250 })
.add({ scale: 2 })
.add({ translateX: 0 });
await animation.finished();
logFinished();Animates an element relative to the x, y and angle values of an SVG path element.
const myPath = path('svg path');The path function returns a new Function that returns the specified property.
Motion path animations are responsive since v3
| Parameters | Example | Info |
'x' | myPath('x') | Return the current x value in 'px' of the SVG path |
'y' | myPath('y') | Return the current y value in 'px' of the SVG path |
'angle' | myPath('angle') | Return the current angle value in 'degrees' of the SVG path |
const p = path('.motion-path-demo path');
aeon({
targets: '.motion-path-demo .el',
translateX: p('x'),
translateY: p('y'),
rotate: p('angle'),
easing: 'linear',
duration: 2000,
loop: true,
});Creates transition between two svg shapes.
Shapes must have the same number of points!
More info on SVG shape morphing here.
aeon({
targets: '.morphing-demo .polymorph',
points: [
{ value: [
'70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369',
'70 41 118.574 59.369 111.145 132.631 60.855 84.631 20.426 60.369']
},
{ value: '70 6 119.574 60.369 100.145 117.631 39.855 117.631 55.426 68.369' },
{ value: '70 57 136.574 54.369 89.145 100.631 28.855 132.631 38.426 64.369' },
{ value: '70 24 119.574 60.369 100.145 117.631 50.855 101.631 3.426 54.369' }
],
easing: 'easeOutQuad',
duration: 2000,
loop: true,
});Creates path drawing animation using the 'stroke-dashoffset' property.
Set the path 'dash-offset' value with setDashoffset() in a from to formated value.
strokeDashoffset: [setDashoffset, 0]More info on line drawing animation here.
aeon({
targets: '.line-drawing-demo .lines path',
strokeDashoffset: [setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay(el, i) { return i * 250; },
direction: 'alternate',
loop: true,
});Does not apply any easing timing to your animation.
Usefull for opacity and colors transitions.
easing: 'linear'aeon({
targets: '.linear-easing-demo .el',
translateX: 250,
direction: 'alternate',
loop: true,
easing: 'linear',
});Built-in Robert Penner's easing functions.
See easings in action on easings.net.
easing: 'easeInOutSine'Availabe easings:
| in | out | in-out | out-in |
'easeInQuad' | 'easeOutQuad' | 'easeInOutQuad' | 'easeOutInQuad' |
'easeInCubic' | 'easeOutCubic' | 'easeInOutCubic' | 'easeOutInCubic' |
'easeInQuart' | 'easeOutQuart' | 'easeInOutQuart' | 'easeOutInQuart' |
'easeInQuint' | 'easeOutQuint' | 'easeInOutQuint' | 'easeOutInQuint' |
'easeInSine' | 'easeOutSine' | 'easeInOutSine' | 'easeOutInSine' |
'easeInExpo' | 'easeOutExpo' | 'easeInOutExpo' | 'easeOutInExpo' |
'easeInCirc' | 'easeOutCirc' | 'easeInOutCirc' | 'easeOutInCirc' |
'easeInBack' | 'easeOutBack' | 'easeInOutBack' | 'easeOutInBack' |
'easeInBounce' | 'easeOutBounce' | 'easeInOutBounce' | 'easeOutInBounce' |
[
'easeInQuad',
'easeInCubic',
'easeInQuart',
'easeInQuint',
'easeInSine',
'easeInExpo',
'easeInCirc',
'easeInBack',
'easeOutQuad',
'easeOutCubic',
'easeOutQuart',
'easeOutQuint',
'easeOutSine',
'easeOutExpo',
'easeOutCirc',
'easeOutBack',
'easeInBounce',
'easeInOutQuad',
'easeInOutCubic',
'easeInOutQuart',
'easeInOutQuint',
'easeInOutSine',
'easeInOutExpo',
'easeInOutCirc',
'easeInOutBack',
'easeInOutBounce',
'easeOutBounce',
'easeOutInQuad',
'easeOutInCubic',
'easeOutInQuart',
'easeOutInQuint',
'easeOutInSine',
'easeOutInExpo',
'easeOutInCirc',
'easeOutInBack',
'easeOutInBounce',
].forEach(function(easing) {
const a = aeon({
targets: `.penner-equations-demo .easing-${easing}`,
translateY: [50, -50],
direction: 'alternate',
loop: true,
delay: 100,
endDelay: 100,
duration: 1000,
easing,
});
});Use your own custom cubic Bézier curves cubicBezier(x1, y1, x2, y2).
easing: 'cubicBezier(.5, .05, .1, .3)'You can use Bézier curves generator like Ceaser to generate your curves coordinates.
aeon({
targets: '.cubic-bezier-demo .el',
translateX: 250,
direction: 'alternate',
loop: true,
easing: 'cubicBezier(.5, .05, .1, .3)',
});Spring physics based easing.
easing: 'spring(mass, stiffness, damping, velocity)'The duration of a spring animation is defined by the spring parameters.
The animation duration parameter will not be taken into account.
| Parameter | Default | Min | Max |
| Mass | 1 | 0 | 100 |
| Stiffness | 100 | 0 | 100 |
| Damping | 10 | 0 | 100 |
| Velocity | 0 | 0 | 100 |
aeon({
targets: '.spring-physics-demo .el',
translateX: 250,
direction: 'alternate',
loop: true,
easing: 'spring(1, 80, 10, 0)',
});Elastic easing.
easing: 'easeOutElastic(amplitude, period)'| in | out | in-out | out-in |
'easeInElastic' | 'easeOutElastic' | 'easeInOutElastic' | 'easeOutInElastic' |
| Parameter | Default | Min | Max | Info |
| Amplitude | 1 | 1 | 10 | Controls the overshoot of the curve. The larger this number, the more overshoot there is. |
| Period | 0.5 | 0.1 | 2 | Controls how many times the curve goes back and forth. The smaller this number, the more times the curtain goes back and forth. |
aeon({
targets: '.elastic-easing-demo > div:nth-of-type(1) .el',
translateX: 270,
easing: 'easeInElastic(1, 0.6)',
});
aeon({
targets: '.elastic-easing-demo > div:nth-of-type(2) .el',
translateX: 270,
easing: 'easeOutElastic(1, 0.6)',
});
aeon({
targets: '.elastic-easing-demo > div:nth-of-type(3) .el',
translateX: 270,
easing: 'easeInOutElastic(1, 0.6)',
});
aeon({
targets: '.elastic-easing-demo > div:nth-of-type(4) .el',
translateX: 270,
easing: 'easeOutInElastic(1, 0.6)',
});Defines the number of jumps an animation takes to arrive at its end value.
easing: 'steps(numberOfSteps)'| Parameter | Default | Min | Max |
| Number of steps | 10 | 1 | ∞ |
aeon({
targets: '.step-easing-demo .el',
translateX: 250,
direction: 'alternate',
loop: true,
easing: 'steps(5)',
});A custom easing function must be returned by function based value.
easing: function() { return function(time) { return time * i} }| Parameter | Info |
| Time | Return the current time of the animation |
aeon({
targets: '.custom-easing-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
duration: 2000,
easing(el, i, total) {
return function(t) {
return Math.pow(Math.sin(t * (i + 1)), total);
};
},
});A declarative way to use aeon in React.
Click the square in the demo to toggle the animation.
useAeon(config);import { useAeon } from 'aeon/hooks';
const Component = ({ active }) => {
const anim = useAeon({
translateX: active ? 250 : 0,
});
return <div ref={ anim } />;
};Removes targets from a running animation or timeline.
The targets parameters accepts the same values as the targets property.
Removes targets from all active animations.
remove(targets);Removes targets from a single animation or timeline.
animation.remove(targets);const animation = aeon({
targets: '.remove-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutQuad',
});
document.querySelector('.remove-el-button').addEventListener('click', function() {
animation.remove('.remove-demo > div:nth-of-type(2) .el');
});Returns the original value of an element.
get(target, propertyName, unit);Since aeon uses getComputedStyle to access original CSS, the values are almost always returned in 'px', the third (optional) argument converts the value in the desired unit.
get(dom-node, 'width', 'rem');| Parameter | Type | Info |
| target | 'string', var | Any valid targets can be used |
CSS transforms: Only inlined values can be accessed.
const logEl = document.querySelector('.get-value-demo-log');
const el = document.querySelector('.get-value-demo .el');
logEl.innerHTML = `
".el" width is:<br>
"${get(el, 'width', 'px')}" or "${get(el, 'width', 'rem')}rem";
`;Immediately sets values to the specified targets.
set(targets, {property: value});| Parameters | Types | Info |
| target(s) | 'string', var | Any valid targets can be used |
| values | object | Any valid properties can be used |
set('.set-value-demo .el', {
translateX() { return random(50, 250); },
rotate() { return random(0, 360); },
});Returns a random integer within a specific range.
random(minValue, maxValue);const randomValues = function() {
aeon({
targets: '.random-demo .el',
translateX() {
return random(0, 270);
},
easing: 'easeInOutQuad',
duration: 750,
complete: randomValues,
});
};
randomValues();Plays an animation using an external requestAnimationFrame loop.
animation.tick(time)Don't forget to set the autoplay parameter to false to prevent the aeon built-in RAF loop to start.
const animation = aeon({
targets: '.tick-demo .el',
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutQuad',
autoplay: false,
});
const loop = t => {
animation.tick(t);
customRAF = requestAnimationFrame(loop);
};
requestAnimationFrame(loop);Returns an Array of all active aeons instances currently running.
runningconst runninLogEl = document.querySelector('.running-log');
const els = document.querySelectorAll('.running-demo .el');
aeon({
targets: els[0],
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'linear',
});
aeon({
targets: els[1],
translateX: 270,
direction: 'alternate',
loop: true,
easing: 'easeInOutCirc',
});
aeon({
targets: els[2],
translateX: 270,
direction: 'alternate',
easing: 'easeInOutQuad',
loop: true,
update() {
runninLogEl.innerHTML = `there are currently ${running.size} instances running`;
},
});By default all animations are paused when switching tabs, useful if you want to make sure the user sees everything and doesn't miss an important part of your animation.
But you can choose to let the animation runs normally without any pause, like a video or an audio track that can continuously plays in the background.
const visibilitychangeLogEl = document.querySelector('.visibilitychange-log');
aeon({
targets: '.visibilitychange-demo .el',
translateX: 270,
direction: 'alternate',
easing: 'easeInOutQuad',
loop: true,
duration: 2000,
update(a) {
visibilitychangeLogEl.innerHTML = `animation progress ${Math.round(a.progress)}`;
},
});