animejs 4.3.6 → 4.4.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/README.md +6 -9
- package/dist/bundles/anime.esm.js +973 -391
- package/dist/bundles/anime.esm.min.js +2 -2
- package/dist/bundles/anime.umd.js +977 -390
- package/dist/bundles/anime.umd.min.js +2 -2
- package/dist/modules/animatable/animatable.cjs +1 -1
- package/dist/modules/animatable/animatable.js +2 -2
- package/dist/modules/animatable/index.cjs +1 -1
- package/dist/modules/animatable/index.js +1 -1
- package/dist/modules/animation/additive.cjs +1 -1
- package/dist/modules/animation/additive.js +1 -1
- package/dist/modules/animation/animation.cjs +38 -16
- package/dist/modules/animation/animation.d.ts +2 -2
- package/dist/modules/animation/animation.js +42 -20
- package/dist/modules/animation/composition.cjs +1 -1
- package/dist/modules/animation/composition.js +3 -3
- package/dist/modules/animation/index.cjs +1 -1
- package/dist/modules/animation/index.js +1 -1
- package/dist/modules/core/clock.cjs +1 -1
- package/dist/modules/core/clock.js +1 -1
- package/dist/modules/core/colors.cjs +1 -1
- package/dist/modules/core/colors.js +1 -1
- package/dist/modules/core/consts.cjs +3 -9
- package/dist/modules/core/consts.d.ts +1 -5
- package/dist/modules/core/consts.js +4 -8
- package/dist/modules/core/globals.cjs +16 -5
- package/dist/modules/core/globals.d.ts +22 -1
- package/dist/modules/core/globals.js +18 -6
- package/dist/modules/core/helpers.cjs +7 -10
- package/dist/modules/core/helpers.js +8 -11
- package/dist/modules/core/render.cjs +7 -34
- package/dist/modules/core/render.js +8 -35
- package/dist/modules/core/styles.cjs +53 -32
- package/dist/modules/core/styles.d.ts +1 -0
- package/dist/modules/core/styles.js +55 -35
- package/dist/modules/core/targets.cjs +1 -1
- package/dist/modules/core/targets.js +1 -1
- package/dist/modules/core/transforms.cjs +129 -13
- package/dist/modules/core/transforms.d.ts +1 -0
- package/dist/modules/core/transforms.js +130 -15
- package/dist/modules/core/units.cjs +1 -1
- package/dist/modules/core/units.js +1 -1
- package/dist/modules/core/values.cjs +68 -8
- package/dist/modules/core/values.d.ts +5 -2
- package/dist/modules/core/values.js +69 -11
- package/dist/modules/draggable/draggable.cjs +1 -1
- package/dist/modules/draggable/draggable.js +1 -1
- package/dist/modules/draggable/index.cjs +1 -1
- package/dist/modules/draggable/index.js +1 -1
- package/dist/modules/easings/cubic-bezier/index.cjs +1 -1
- package/dist/modules/easings/cubic-bezier/index.js +1 -1
- package/dist/modules/easings/eases/index.cjs +1 -1
- package/dist/modules/easings/eases/index.js +1 -1
- package/dist/modules/easings/eases/parser.cjs +1 -1
- package/dist/modules/easings/eases/parser.js +1 -1
- package/dist/modules/easings/index.cjs +1 -1
- package/dist/modules/easings/index.js +1 -1
- package/dist/modules/easings/irregular/index.cjs +1 -1
- package/dist/modules/easings/irregular/index.js +1 -1
- package/dist/modules/easings/linear/index.cjs +1 -1
- package/dist/modules/easings/linear/index.js +1 -1
- package/dist/modules/easings/none.cjs +1 -1
- package/dist/modules/easings/none.js +1 -1
- package/dist/modules/easings/spring/index.cjs +1 -1
- package/dist/modules/easings/spring/index.js +1 -1
- package/dist/modules/easings/steps/index.cjs +1 -1
- package/dist/modules/easings/steps/index.js +1 -1
- package/dist/modules/engine/engine.cjs +1 -1
- package/dist/modules/engine/engine.js +1 -1
- package/dist/modules/engine/index.cjs +1 -1
- package/dist/modules/engine/index.js +1 -1
- package/dist/modules/events/index.cjs +1 -1
- package/dist/modules/events/index.js +1 -1
- package/dist/modules/events/scroll.cjs +1 -1
- package/dist/modules/events/scroll.js +1 -1
- package/dist/modules/index.cjs +9 -1
- package/dist/modules/index.d.ts +1 -0
- package/dist/modules/index.js +4 -1
- package/dist/modules/layout/index.cjs +1 -1
- package/dist/modules/layout/index.js +1 -1
- package/dist/modules/layout/layout.cjs +29 -25
- package/dist/modules/layout/layout.d.ts +4 -3
- package/dist/modules/layout/layout.js +30 -26
- package/dist/modules/scope/index.cjs +1 -1
- package/dist/modules/scope/index.js +1 -1
- package/dist/modules/scope/scope.cjs +1 -1
- package/dist/modules/scope/scope.js +1 -1
- package/dist/modules/svg/drawable.cjs +1 -1
- package/dist/modules/svg/drawable.js +1 -1
- package/dist/modules/svg/helpers.cjs +1 -1
- package/dist/modules/svg/helpers.js +1 -1
- package/dist/modules/svg/index.cjs +1 -1
- package/dist/modules/svg/index.js +1 -1
- package/dist/modules/svg/morphto.cjs +3 -6
- package/dist/modules/svg/morphto.js +3 -6
- package/dist/modules/svg/motionpath.cjs +1 -1
- package/dist/modules/svg/motionpath.js +1 -1
- package/dist/modules/text/index.cjs +3 -1
- package/dist/modules/text/index.d.ts +1 -0
- package/dist/modules/text/index.js +2 -1
- package/dist/modules/text/scramble.cjs +272 -0
- package/dist/modules/text/scramble.d.ts +3 -0
- package/dist/modules/text/scramble.js +270 -0
- package/dist/modules/text/split.cjs +5 -5
- package/dist/modules/text/split.d.ts +5 -5
- package/dist/modules/text/split.js +5 -5
- package/dist/modules/timeline/index.cjs +1 -1
- package/dist/modules/timeline/index.js +1 -1
- package/dist/modules/timeline/position.cjs +1 -1
- package/dist/modules/timeline/position.js +1 -1
- package/dist/modules/timeline/timeline.cjs +36 -18
- package/dist/modules/timeline/timeline.d.ts +6 -5
- package/dist/modules/timeline/timeline.js +37 -19
- package/dist/modules/timer/index.cjs +1 -1
- package/dist/modules/timer/index.js +1 -1
- package/dist/modules/timer/timer.cjs +8 -12
- package/dist/modules/timer/timer.d.ts +2 -0
- package/dist/modules/timer/timer.js +9 -13
- package/dist/modules/types/index.d.ts +76 -8
- package/dist/modules/utils/chainable.cjs +8 -5
- package/dist/modules/utils/chainable.js +8 -5
- package/dist/modules/utils/index.cjs +5 -1
- package/dist/modules/utils/index.d.ts +1 -0
- package/dist/modules/utils/index.js +2 -1
- package/dist/modules/utils/number.cjs +1 -1
- package/dist/modules/utils/number.js +1 -1
- package/dist/modules/utils/random.cjs +1 -1
- package/dist/modules/utils/random.js +1 -1
- package/dist/modules/utils/stagger.cjs +117 -20
- package/dist/modules/utils/stagger.js +118 -21
- package/dist/modules/utils/target.cjs +1 -1
- package/dist/modules/utils/target.js +1 -1
- package/dist/modules/utils/time.cjs +5 -3
- package/dist/modules/utils/time.d.ts +1 -1
- package/dist/modules/utils/time.js +5 -3
- package/dist/modules/waapi/composition.cjs +1 -1
- package/dist/modules/waapi/composition.js +1 -1
- package/dist/modules/waapi/index.cjs +1 -1
- package/dist/modules/waapi/index.js +1 -1
- package/dist/modules/waapi/waapi.cjs +19 -20
- package/dist/modules/waapi/waapi.js +20 -21
- package/package.json +2 -1
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - animatable - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
8
|
import { compositionTypes, noop } from '../core/consts.js';
|
|
9
9
|
import { scope } from '../core/globals.js';
|
|
10
|
-
import { isUnd, isKey, stringStartsWith, isObj, mergeObjects, forEachChildren,
|
|
10
|
+
import { isUnd, isKey, stringStartsWith, isObj, mergeObjects, forEachChildren, isArr, isStr } from '../core/helpers.js';
|
|
11
11
|
import { JSAnimation } from '../animation/animation.js';
|
|
12
12
|
import { parseEase } from '../easings/eases/parser.js';
|
|
13
13
|
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - animation - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -162,7 +162,7 @@ class JSAnimation extends timer.Timer {
|
|
|
162
162
|
* @param {Number} [parentPosition]
|
|
163
163
|
* @param {Boolean} [fastSet=false]
|
|
164
164
|
* @param {Number} [index=0]
|
|
165
|
-
* @param {
|
|
165
|
+
* @param {TargetsArray} [allTargets]
|
|
166
166
|
*/
|
|
167
167
|
constructor(
|
|
168
168
|
targets$1,
|
|
@@ -171,7 +171,7 @@ class JSAnimation extends timer.Timer {
|
|
|
171
171
|
parentPosition,
|
|
172
172
|
fastSet = false,
|
|
173
173
|
index = 0,
|
|
174
|
-
|
|
174
|
+
allTargets
|
|
175
175
|
) {
|
|
176
176
|
|
|
177
177
|
super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
|
|
@@ -222,7 +222,7 @@ class JSAnimation extends timer.Timer {
|
|
|
222
222
|
|
|
223
223
|
const target = parsedTargets[targetIndex];
|
|
224
224
|
const ti = index || targetIndex;
|
|
225
|
-
const tl =
|
|
225
|
+
const tl = allTargets || parsedTargets;
|
|
226
226
|
|
|
227
227
|
let lastTransformGroupIndex = NaN;
|
|
228
228
|
let lastTransformGroupLength = NaN;
|
|
@@ -298,7 +298,14 @@ class JSAnimation extends timer.Timer {
|
|
|
298
298
|
toFunctionStore.func = null;
|
|
299
299
|
fromFunctionStore.func = null;
|
|
300
300
|
|
|
301
|
-
const
|
|
301
|
+
const computedComposition = values.getFunctionValue(values.setValue(key.composition, tComposition), target, ti, tl, null, null);
|
|
302
|
+
const tweenComposition = helpers.isNum(computedComposition) ? computedComposition : consts.compositionTypes[computedComposition];
|
|
303
|
+
if (!siblings && tweenComposition !== consts.compositionTypes.none) siblings = composition.getTweenSiblings(target, propName);
|
|
304
|
+
// Timelines pass the last sibling tween if it belongs to the same timeline
|
|
305
|
+
// Standalone animations only pass prevTween when the property has multiple keyframes
|
|
306
|
+
const tailTween = siblings ? siblings._tail : null;
|
|
307
|
+
const prevSiblingTween = parent && tailTween && tailTween.parent.parent === parent ? tailTween : prevTween;
|
|
308
|
+
const computedToValue = values.getFunctionValue(key.to, target, ti, tl, toFunctionStore, prevSiblingTween);
|
|
302
309
|
|
|
303
310
|
let tweenToValue;
|
|
304
311
|
// Allows function based values to return an object syntax value ({to: v})
|
|
@@ -308,20 +315,18 @@ class JSAnimation extends timer.Timer {
|
|
|
308
315
|
} else {
|
|
309
316
|
tweenToValue = computedToValue;
|
|
310
317
|
}
|
|
311
|
-
const tweenFromValue = values.getFunctionValue(key.from, target, ti, tl);
|
|
318
|
+
const tweenFromValue = values.getFunctionValue(key.from, target, ti, tl, null, prevSiblingTween);
|
|
312
319
|
const easeToParse = key.ease || tEasing;
|
|
313
320
|
|
|
314
|
-
const easeFunctionResult = values.getFunctionValue(easeToParse, target, ti, tl);
|
|
321
|
+
const easeFunctionResult = values.getFunctionValue(easeToParse, target, ti, tl, null, prevSiblingTween);
|
|
315
322
|
const keyEasing = helpers.isFnc(easeFunctionResult) || helpers.isStr(easeFunctionResult) ? easeFunctionResult : easeToParse;
|
|
316
323
|
|
|
317
324
|
const hasSpring = !helpers.isUnd(keyEasing) && !helpers.isUnd(/** @type {Spring} */(keyEasing).ease);
|
|
318
325
|
const tweenEasing = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
|
|
319
326
|
// Calculate default individual keyframe duration by dividing the tl of keyframes
|
|
320
|
-
const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : values.getFunctionValue(values.setValue(key.duration, (l > 1 ? values.getFunctionValue(tDuration, target, ti, tl) / l : tDuration)), target, ti, tl);
|
|
327
|
+
const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : values.getFunctionValue(values.setValue(key.duration, (l > 1 ? values.getFunctionValue(tDuration, target, ti, tl, null, prevSiblingTween) / l : tDuration)), target, ti, tl, null, prevSiblingTween);
|
|
321
328
|
// Default delay value should only be applied to the first tween
|
|
322
|
-
const tweenDelay = values.getFunctionValue(values.setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl);
|
|
323
|
-
const computedComposition = values.getFunctionValue(values.setValue(key.composition, tComposition), target, ti, tl);
|
|
324
|
-
const tweenComposition = helpers.isNum(computedComposition) ? computedComposition : consts.compositionTypes[computedComposition];
|
|
329
|
+
const tweenDelay = values.getFunctionValue(values.setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl, null, prevSiblingTween);
|
|
325
330
|
// Modifiers are treated differently and don't accept function based value to prevent having to pass a function wrapper
|
|
326
331
|
const tweenModifier = key.modifier || tModifier;
|
|
327
332
|
const hasFromvalue = !helpers.isUnd(tweenFromValue);
|
|
@@ -338,7 +343,6 @@ class JSAnimation extends timer.Timer {
|
|
|
338
343
|
let prevSibling = prevTween;
|
|
339
344
|
|
|
340
345
|
if (tweenComposition !== consts.compositionTypes.none) {
|
|
341
|
-
if (!siblings) siblings = composition.getTweenSiblings(target, propName);
|
|
342
346
|
let nextSibling = siblings._head;
|
|
343
347
|
// Iterate trough all the next siblings until we find a sibling with an equal or inferior start time
|
|
344
348
|
while (nextSibling && !nextSibling._isOverridden && nextSibling._absoluteStartTime <= absoluteStartTime) {
|
|
@@ -357,8 +361,8 @@ class JSAnimation extends timer.Timer {
|
|
|
357
361
|
|
|
358
362
|
// Decompose values
|
|
359
363
|
if (isFromToValue) {
|
|
360
|
-
values.decomposeRawValue(isFromToArray ? values.getFunctionValue(tweenToValue[0], target, ti, tl, fromFunctionStore) : tweenFromValue, fromTargetObject);
|
|
361
|
-
values.decomposeRawValue(isFromToArray ? values.getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore) : tweenToValue, toTargetObject);
|
|
364
|
+
values.decomposeRawValue(isFromToArray ? values.getFunctionValue(tweenToValue[0], target, ti, tl, fromFunctionStore, prevSiblingTween) : tweenFromValue, fromTargetObject);
|
|
365
|
+
values.decomposeRawValue(isFromToArray ? values.getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore, prevSiblingTween) : tweenToValue, toTargetObject);
|
|
362
366
|
// Needed to force an inline style registration
|
|
363
367
|
const originalValue = values.getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore);
|
|
364
368
|
if (fromTargetObject.t === consts.valueTypes.NUMBER) {
|
|
@@ -512,6 +516,18 @@ class JSAnimation extends timer.Timer {
|
|
|
512
516
|
composition.composeTween(tween, siblings);
|
|
513
517
|
}
|
|
514
518
|
|
|
519
|
+
// Pre-compute the tween end value for function-based value chaining (ie morphTo / scrambleText in keyframe arrays and timelines)
|
|
520
|
+
const vt = tween._valueType;
|
|
521
|
+
if (vt === consts.valueTypes.COMPLEX) {
|
|
522
|
+
tween._value = values.composeComplexValue(tween, 1, -1);
|
|
523
|
+
} else if (vt === consts.valueTypes.COLOR) {
|
|
524
|
+
tween._value = values.composeColorValue(tween, 1, -1);
|
|
525
|
+
} else if (vt === consts.valueTypes.UNIT) {
|
|
526
|
+
tween._value = `${tweenModifier(tween._toNumber)}${tween._unit}`;
|
|
527
|
+
} else {
|
|
528
|
+
tween._value = tweenModifier(tween._toNumber);
|
|
529
|
+
}
|
|
530
|
+
|
|
515
531
|
if (isNaN(firstTweenChangeStartTime)) {
|
|
516
532
|
firstTweenChangeStartTime = tween._startTime;
|
|
517
533
|
}
|
|
@@ -669,7 +685,7 @@ class JSAnimation extends timer.Timer {
|
|
|
669
685
|
*/
|
|
670
686
|
revert() {
|
|
671
687
|
super.revert();
|
|
672
|
-
return styles.
|
|
688
|
+
return styles.revertValues(this);
|
|
673
689
|
}
|
|
674
690
|
|
|
675
691
|
/**
|
|
@@ -691,7 +707,13 @@ class JSAnimation extends timer.Timer {
|
|
|
691
707
|
* @param {AnimationParams} parameters
|
|
692
708
|
* @return {JSAnimation}
|
|
693
709
|
*/
|
|
694
|
-
const animate = (targets, parameters) =>
|
|
710
|
+
const animate = (targets, parameters) => {
|
|
711
|
+
if (globals.globals.editor) {
|
|
712
|
+
return globals.globals.editor.addAnimation(targets, parameters);
|
|
713
|
+
} else {
|
|
714
|
+
return new JSAnimation(targets, parameters, null, 0, false).init();
|
|
715
|
+
}
|
|
716
|
+
};
|
|
695
717
|
|
|
696
718
|
exports.JSAnimation = JSAnimation;
|
|
697
719
|
exports.animate = animate;
|
|
@@ -6,9 +6,9 @@ export class JSAnimation extends Timer {
|
|
|
6
6
|
* @param {Number} [parentPosition]
|
|
7
7
|
* @param {Boolean} [fastSet=false]
|
|
8
8
|
* @param {Number} [index=0]
|
|
9
|
-
* @param {
|
|
9
|
+
* @param {TargetsArray} [allTargets]
|
|
10
10
|
*/
|
|
11
|
-
constructor(targets: TargetsParam, parameters: AnimationParams, parent?: Timeline, parentPosition?: number, fastSet?: boolean, index?: number,
|
|
11
|
+
constructor(targets: TargetsParam, parameters: AnimationParams, parent?: Timeline, parentPosition?: number, fastSet?: boolean, index?: number, allTargets?: TargetsArray);
|
|
12
12
|
/** @type {TargetsArray} */
|
|
13
13
|
targets: TargetsArray;
|
|
14
14
|
/** @type {Callback<this>} */
|
|
@@ -1,16 +1,16 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - animation - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import { K, compositionTypes, valueTypes, minValue,
|
|
9
|
-
import { mergeObjects, isUnd, isKey, isObj,
|
|
8
|
+
import { K, compositionTypes, valueTypes, minValue, isDomSymbol, tweenTypes } from '../core/consts.js';
|
|
9
|
+
import { mergeObjects, isUnd, isKey, isObj, cloneArray, isNil, round, addChild, forEachChildren, clampInfinity, normalizeTime, isArr, isNum, isFnc, isStr } from '../core/helpers.js';
|
|
10
10
|
import { globals } from '../core/globals.js';
|
|
11
11
|
import { registerTargets } from '../core/targets.js';
|
|
12
|
-
import { setValue, getTweenType, getFunctionValue, decomposeRawValue, getOriginalAnimatableValue, createDecomposedValueTargetObject, decomposedOriginalValue, getRelativeValue, decomposeTweenValue } from '../core/values.js';
|
|
13
|
-
import { sanitizePropertyName,
|
|
12
|
+
import { setValue, getTweenType, getFunctionValue, decomposeRawValue, getOriginalAnimatableValue, createDecomposedValueTargetObject, decomposedOriginalValue, getRelativeValue, composeComplexValue, composeColorValue, decomposeTweenValue } from '../core/values.js';
|
|
13
|
+
import { sanitizePropertyName, revertValues } from '../core/styles.js';
|
|
14
14
|
import { convertValueUnit } from '../core/units.js';
|
|
15
15
|
import { parseEase } from '../easings/eases/parser.js';
|
|
16
16
|
import { Timer } from '../timer/timer.js';
|
|
@@ -160,7 +160,7 @@ class JSAnimation extends Timer {
|
|
|
160
160
|
* @param {Number} [parentPosition]
|
|
161
161
|
* @param {Boolean} [fastSet=false]
|
|
162
162
|
* @param {Number} [index=0]
|
|
163
|
-
* @param {
|
|
163
|
+
* @param {TargetsArray} [allTargets]
|
|
164
164
|
*/
|
|
165
165
|
constructor(
|
|
166
166
|
targets,
|
|
@@ -169,7 +169,7 @@ class JSAnimation extends Timer {
|
|
|
169
169
|
parentPosition,
|
|
170
170
|
fastSet = false,
|
|
171
171
|
index = 0,
|
|
172
|
-
|
|
172
|
+
allTargets
|
|
173
173
|
) {
|
|
174
174
|
|
|
175
175
|
super(/** @type {TimerParams & AnimationParams} */(parameters), parent, parentPosition);
|
|
@@ -220,7 +220,7 @@ class JSAnimation extends Timer {
|
|
|
220
220
|
|
|
221
221
|
const target = parsedTargets[targetIndex];
|
|
222
222
|
const ti = index || targetIndex;
|
|
223
|
-
const tl =
|
|
223
|
+
const tl = allTargets || parsedTargets;
|
|
224
224
|
|
|
225
225
|
let lastTransformGroupIndex = NaN;
|
|
226
226
|
let lastTransformGroupLength = NaN;
|
|
@@ -296,7 +296,14 @@ class JSAnimation extends Timer {
|
|
|
296
296
|
toFunctionStore.func = null;
|
|
297
297
|
fromFunctionStore.func = null;
|
|
298
298
|
|
|
299
|
-
const
|
|
299
|
+
const computedComposition = getFunctionValue(setValue(key.composition, tComposition), target, ti, tl, null, null);
|
|
300
|
+
const tweenComposition = isNum(computedComposition) ? computedComposition : compositionTypes[computedComposition];
|
|
301
|
+
if (!siblings && tweenComposition !== compositionTypes.none) siblings = getTweenSiblings(target, propName);
|
|
302
|
+
// Timelines pass the last sibling tween if it belongs to the same timeline
|
|
303
|
+
// Standalone animations only pass prevTween when the property has multiple keyframes
|
|
304
|
+
const tailTween = siblings ? siblings._tail : null;
|
|
305
|
+
const prevSiblingTween = parent && tailTween && tailTween.parent.parent === parent ? tailTween : prevTween;
|
|
306
|
+
const computedToValue = getFunctionValue(key.to, target, ti, tl, toFunctionStore, prevSiblingTween);
|
|
300
307
|
|
|
301
308
|
let tweenToValue;
|
|
302
309
|
// Allows function based values to return an object syntax value ({to: v})
|
|
@@ -306,20 +313,18 @@ class JSAnimation extends Timer {
|
|
|
306
313
|
} else {
|
|
307
314
|
tweenToValue = computedToValue;
|
|
308
315
|
}
|
|
309
|
-
const tweenFromValue = getFunctionValue(key.from, target, ti, tl);
|
|
316
|
+
const tweenFromValue = getFunctionValue(key.from, target, ti, tl, null, prevSiblingTween);
|
|
310
317
|
const easeToParse = key.ease || tEasing;
|
|
311
318
|
|
|
312
|
-
const easeFunctionResult = getFunctionValue(easeToParse, target, ti, tl);
|
|
319
|
+
const easeFunctionResult = getFunctionValue(easeToParse, target, ti, tl, null, prevSiblingTween);
|
|
313
320
|
const keyEasing = isFnc(easeFunctionResult) || isStr(easeFunctionResult) ? easeFunctionResult : easeToParse;
|
|
314
321
|
|
|
315
322
|
const hasSpring = !isUnd(keyEasing) && !isUnd(/** @type {Spring} */(keyEasing).ease);
|
|
316
323
|
const tweenEasing = hasSpring ? /** @type {Spring} */(keyEasing).ease : keyEasing;
|
|
317
324
|
// Calculate default individual keyframe duration by dividing the tl of keyframes
|
|
318
|
-
const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(setValue(key.duration, (l > 1 ? getFunctionValue(tDuration, target, ti, tl) / l : tDuration)), target, ti, tl);
|
|
325
|
+
const tweenDuration = hasSpring ? /** @type {Spring} */(keyEasing).settlingDuration : getFunctionValue(setValue(key.duration, (l > 1 ? getFunctionValue(tDuration, target, ti, tl, null, prevSiblingTween) / l : tDuration)), target, ti, tl, null, prevSiblingTween);
|
|
319
326
|
// Default delay value should only be applied to the first tween
|
|
320
|
-
const tweenDelay = getFunctionValue(setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl);
|
|
321
|
-
const computedComposition = getFunctionValue(setValue(key.composition, tComposition), target, ti, tl);
|
|
322
|
-
const tweenComposition = isNum(computedComposition) ? computedComposition : compositionTypes[computedComposition];
|
|
327
|
+
const tweenDelay = getFunctionValue(setValue(key.delay, (!tweenIndex ? tDelay : 0)), target, ti, tl, null, prevSiblingTween);
|
|
323
328
|
// Modifiers are treated differently and don't accept function based value to prevent having to pass a function wrapper
|
|
324
329
|
const tweenModifier = key.modifier || tModifier;
|
|
325
330
|
const hasFromvalue = !isUnd(tweenFromValue);
|
|
@@ -336,7 +341,6 @@ class JSAnimation extends Timer {
|
|
|
336
341
|
let prevSibling = prevTween;
|
|
337
342
|
|
|
338
343
|
if (tweenComposition !== compositionTypes.none) {
|
|
339
|
-
if (!siblings) siblings = getTweenSiblings(target, propName);
|
|
340
344
|
let nextSibling = siblings._head;
|
|
341
345
|
// Iterate trough all the next siblings until we find a sibling with an equal or inferior start time
|
|
342
346
|
while (nextSibling && !nextSibling._isOverridden && nextSibling._absoluteStartTime <= absoluteStartTime) {
|
|
@@ -355,8 +359,8 @@ class JSAnimation extends Timer {
|
|
|
355
359
|
|
|
356
360
|
// Decompose values
|
|
357
361
|
if (isFromToValue) {
|
|
358
|
-
decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[0], target, ti, tl, fromFunctionStore) : tweenFromValue, fromTargetObject);
|
|
359
|
-
decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore) : tweenToValue, toTargetObject);
|
|
362
|
+
decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[0], target, ti, tl, fromFunctionStore, prevSiblingTween) : tweenFromValue, fromTargetObject);
|
|
363
|
+
decomposeRawValue(isFromToArray ? getFunctionValue(tweenToValue[1], target, ti, tl, toFunctionStore, prevSiblingTween) : tweenToValue, toTargetObject);
|
|
360
364
|
// Needed to force an inline style registration
|
|
361
365
|
const originalValue = getOriginalAnimatableValue(target, propName, tweenType, inlineStylesStore);
|
|
362
366
|
if (fromTargetObject.t === valueTypes.NUMBER) {
|
|
@@ -510,6 +514,18 @@ class JSAnimation extends Timer {
|
|
|
510
514
|
composeTween(tween, siblings);
|
|
511
515
|
}
|
|
512
516
|
|
|
517
|
+
// Pre-compute the tween end value for function-based value chaining (ie morphTo / scrambleText in keyframe arrays and timelines)
|
|
518
|
+
const vt = tween._valueType;
|
|
519
|
+
if (vt === valueTypes.COMPLEX) {
|
|
520
|
+
tween._value = composeComplexValue(tween, 1, -1);
|
|
521
|
+
} else if (vt === valueTypes.COLOR) {
|
|
522
|
+
tween._value = composeColorValue(tween, 1, -1);
|
|
523
|
+
} else if (vt === valueTypes.UNIT) {
|
|
524
|
+
tween._value = `${tweenModifier(tween._toNumber)}${tween._unit}`;
|
|
525
|
+
} else {
|
|
526
|
+
tween._value = tweenModifier(tween._toNumber);
|
|
527
|
+
}
|
|
528
|
+
|
|
513
529
|
if (isNaN(firstTweenChangeStartTime)) {
|
|
514
530
|
firstTweenChangeStartTime = tween._startTime;
|
|
515
531
|
}
|
|
@@ -667,7 +683,7 @@ class JSAnimation extends Timer {
|
|
|
667
683
|
*/
|
|
668
684
|
revert() {
|
|
669
685
|
super.revert();
|
|
670
|
-
return
|
|
686
|
+
return revertValues(this);
|
|
671
687
|
}
|
|
672
688
|
|
|
673
689
|
/**
|
|
@@ -689,6 +705,12 @@ class JSAnimation extends Timer {
|
|
|
689
705
|
* @param {AnimationParams} parameters
|
|
690
706
|
* @return {JSAnimation}
|
|
691
707
|
*/
|
|
692
|
-
const animate = (targets, parameters) =>
|
|
708
|
+
const animate = (targets, parameters) => {
|
|
709
|
+
if (globals.editor) {
|
|
710
|
+
return globals.editor.addAnimation(targets, parameters);
|
|
711
|
+
} else {
|
|
712
|
+
return new JSAnimation(targets, parameters, null, 0, false).init();
|
|
713
|
+
}
|
|
714
|
+
};
|
|
693
715
|
|
|
694
716
|
export { JSAnimation, animate };
|
|
@@ -1,15 +1,15 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - animation - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
7
7
|
|
|
8
|
-
import {
|
|
8
|
+
import { compositionTypes, minValue, tweenTypes } from '../core/consts.js';
|
|
9
9
|
import { forEachChildren, removeChild, isUnd, addChild, round, cloneArray } from '../core/helpers.js';
|
|
10
10
|
import { sanitizePropertyName } from '../core/styles.js';
|
|
11
11
|
import { engine } from '../engine/engine.js';
|
|
12
|
-
import {
|
|
12
|
+
import { additive, addAdditiveAnimation } from './additive.js';
|
|
13
13
|
|
|
14
14
|
/**
|
|
15
15
|
* @import {
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - core - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -12,7 +12,7 @@
|
|
|
12
12
|
// TODO: Do we need to check if we're running inside a worker ?
|
|
13
13
|
const isBrowser = typeof window !== 'undefined';
|
|
14
14
|
|
|
15
|
-
/** @typedef {Window & {AnimeJS: Array}
|
|
15
|
+
/** @typedef {Window & {AnimeJS: Array}|null} AnimeJSWindow
|
|
16
16
|
|
|
17
17
|
/** @type {AnimeJSWindow} */
|
|
18
18
|
const win = isBrowser ? /** @type {AnimeJSWindow} */(/** @type {unknown} */(window)) : null;
|
|
@@ -59,7 +59,6 @@ const isRegisteredTargetSymbol = Symbol();
|
|
|
59
59
|
const isDomSymbol = Symbol();
|
|
60
60
|
const isSvgSymbol = Symbol();
|
|
61
61
|
const transformsSymbol = Symbol();
|
|
62
|
-
const morphPointsSymbol = Symbol();
|
|
63
62
|
const proxyTargetSymbol = Symbol();
|
|
64
63
|
|
|
65
64
|
// Numbers
|
|
@@ -83,6 +82,7 @@ const shortTransforms = /*#__PURE__*/ (() => {
|
|
|
83
82
|
})();
|
|
84
83
|
|
|
85
84
|
const validTransforms = [
|
|
85
|
+
'perspective',
|
|
86
86
|
'translateX',
|
|
87
87
|
'translateY',
|
|
88
88
|
'translateZ',
|
|
@@ -97,9 +97,6 @@ const validTransforms = [
|
|
|
97
97
|
'skew',
|
|
98
98
|
'skewX',
|
|
99
99
|
'skewY',
|
|
100
|
-
'matrix',
|
|
101
|
-
'matrix3d',
|
|
102
|
-
'perspective',
|
|
103
100
|
];
|
|
104
101
|
|
|
105
102
|
const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
|
|
@@ -122,7 +119,6 @@ const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi;
|
|
|
122
119
|
// export const unitsExecRgx = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)+([a-z]+|%)$/i;
|
|
123
120
|
const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
|
|
124
121
|
const lowerCaseRgx = /([a-z])([A-Z])/g;
|
|
125
|
-
const transformsExecRgx = /(\w+)(\([^)]+\)+)/g; // Match inline transforms with cacl() values, returns the value wrapped in ()
|
|
126
122
|
const relativeValuesExecRgx = /(\*=|\+=|-=)/;
|
|
127
123
|
const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
|
|
128
124
|
|
|
@@ -144,7 +140,6 @@ exports.lowerCaseRgx = lowerCaseRgx;
|
|
|
144
140
|
exports.maxFps = maxFps;
|
|
145
141
|
exports.maxValue = maxValue;
|
|
146
142
|
exports.minValue = minValue;
|
|
147
|
-
exports.morphPointsSymbol = morphPointsSymbol;
|
|
148
143
|
exports.noop = noop;
|
|
149
144
|
exports.proxyTargetSymbol = proxyTargetSymbol;
|
|
150
145
|
exports.relativeValuesExecRgx = relativeValuesExecRgx;
|
|
@@ -152,7 +147,6 @@ exports.rgbExecRgx = rgbExecRgx;
|
|
|
152
147
|
exports.rgbaExecRgx = rgbaExecRgx;
|
|
153
148
|
exports.shortTransforms = shortTransforms;
|
|
154
149
|
exports.tickModes = tickModes;
|
|
155
|
-
exports.transformsExecRgx = transformsExecRgx;
|
|
156
150
|
exports.transformsFragmentStrings = transformsFragmentStrings;
|
|
157
151
|
exports.transformsSymbol = transformsSymbol;
|
|
158
152
|
exports.tweenTypes = tweenTypes;
|
|
@@ -1,5 +1,5 @@
|
|
|
1
1
|
export const isBrowser: boolean;
|
|
2
|
-
/** @typedef {Window & {AnimeJS: Array}
|
|
2
|
+
/** @typedef {Window & {AnimeJS: Array}|null} AnimeJSWindow
|
|
3
3
|
|
|
4
4
|
/** @type {AnimeJSWindow} */
|
|
5
5
|
export const win: AnimeJSWindow;
|
|
@@ -36,7 +36,6 @@ export const isRegisteredTargetSymbol: unique symbol;
|
|
|
36
36
|
export const isDomSymbol: unique symbol;
|
|
37
37
|
export const isSvgSymbol: unique symbol;
|
|
38
38
|
export const transformsSymbol: unique symbol;
|
|
39
|
-
export const morphPointsSymbol: unique symbol;
|
|
40
39
|
export const proxyTargetSymbol: unique symbol;
|
|
41
40
|
export const minValue: 1e-11;
|
|
42
41
|
export const maxValue: 1000000000000;
|
|
@@ -57,7 +56,6 @@ export const hslaExecRgx: RegExp;
|
|
|
57
56
|
export const digitWithExponentRgx: RegExp;
|
|
58
57
|
export const unitsExecRgx: RegExp;
|
|
59
58
|
export const lowerCaseRgx: RegExp;
|
|
60
|
-
export const transformsExecRgx: RegExp;
|
|
61
59
|
export const relativeValuesExecRgx: RegExp;
|
|
62
60
|
export const cssVariableMatchRgx: RegExp;
|
|
63
61
|
/**
|
|
@@ -65,6 +63,4 @@ export const cssVariableMatchRgx: RegExp;
|
|
|
65
63
|
*/
|
|
66
64
|
export type AnimeJSWindow = (Window & {
|
|
67
65
|
AnimeJS: any[];
|
|
68
|
-
} & {
|
|
69
|
-
AnimeJSDevTools: any;
|
|
70
66
|
}) | null;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - core - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -10,7 +10,7 @@
|
|
|
10
10
|
// TODO: Do we need to check if we're running inside a worker ?
|
|
11
11
|
const isBrowser = typeof window !== 'undefined';
|
|
12
12
|
|
|
13
|
-
/** @typedef {Window & {AnimeJS: Array}
|
|
13
|
+
/** @typedef {Window & {AnimeJS: Array}|null} AnimeJSWindow
|
|
14
14
|
|
|
15
15
|
/** @type {AnimeJSWindow} */
|
|
16
16
|
const win = isBrowser ? /** @type {AnimeJSWindow} */(/** @type {unknown} */(window)) : null;
|
|
@@ -57,7 +57,6 @@ const isRegisteredTargetSymbol = Symbol();
|
|
|
57
57
|
const isDomSymbol = Symbol();
|
|
58
58
|
const isSvgSymbol = Symbol();
|
|
59
59
|
const transformsSymbol = Symbol();
|
|
60
|
-
const morphPointsSymbol = Symbol();
|
|
61
60
|
const proxyTargetSymbol = Symbol();
|
|
62
61
|
|
|
63
62
|
// Numbers
|
|
@@ -81,6 +80,7 @@ const shortTransforms = /*#__PURE__*/ (() => {
|
|
|
81
80
|
})();
|
|
82
81
|
|
|
83
82
|
const validTransforms = [
|
|
83
|
+
'perspective',
|
|
84
84
|
'translateX',
|
|
85
85
|
'translateY',
|
|
86
86
|
'translateZ',
|
|
@@ -95,9 +95,6 @@ const validTransforms = [
|
|
|
95
95
|
'skew',
|
|
96
96
|
'skewX',
|
|
97
97
|
'skewY',
|
|
98
|
-
'matrix',
|
|
99
|
-
'matrix3d',
|
|
100
|
-
'perspective',
|
|
101
98
|
];
|
|
102
99
|
|
|
103
100
|
const transformsFragmentStrings = /*#__PURE__*/ validTransforms.reduce((a, v) => ({...a, [v]: v + '('}), {});
|
|
@@ -120,8 +117,7 @@ const digitWithExponentRgx = /[-+]?\d*\.?\d+(?:e[-+]?\d)?/gi;
|
|
|
120
117
|
// export const unitsExecRgx = /^([-+]?\d*\.?\d+(?:[eE][-+]?\d+)?)+([a-z]+|%)$/i;
|
|
121
118
|
const unitsExecRgx = /^([-+]?\d*\.?\d+(?:e[-+]?\d+)?)([a-z]+|%)$/i;
|
|
122
119
|
const lowerCaseRgx = /([a-z])([A-Z])/g;
|
|
123
|
-
const transformsExecRgx = /(\w+)(\([^)]+\)+)/g; // Match inline transforms with cacl() values, returns the value wrapped in ()
|
|
124
120
|
const relativeValuesExecRgx = /(\*=|\+=|-=)/;
|
|
125
121
|
const cssVariableMatchRgx = /var\(\s*(--[\w-]+)(?:\s*,\s*([^)]+))?\s*\)/;
|
|
126
122
|
|
|
127
|
-
export { K, compositionTypes, cssVarPrefix, cssVariableMatchRgx, digitWithExponentRgx, doc, emptyString, hexTestRgx, hslExecRgx, hslaExecRgx, isBrowser, isDomSymbol, isRegisteredTargetSymbol, isSvgSymbol, lowerCaseRgx, maxFps, maxValue, minValue,
|
|
123
|
+
export { K, compositionTypes, cssVarPrefix, cssVariableMatchRgx, digitWithExponentRgx, doc, emptyString, hexTestRgx, hslExecRgx, hslaExecRgx, isBrowser, isDomSymbol, isRegisteredTargetSymbol, isSvgSymbol, lowerCaseRgx, maxFps, maxValue, minValue, noop, proxyTargetSymbol, relativeValuesExecRgx, rgbExecRgx, rgbaExecRgx, shortTransforms, tickModes, transformsFragmentStrings, transformsSymbol, tweenTypes, unitsExecRgx, validRgbHslRgx, validTransforms, valueTypes, win };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - core - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -20,6 +20,18 @@ var consts = require('./consts.cjs');
|
|
|
20
20
|
* } from '../scope/index.js'
|
|
21
21
|
*/
|
|
22
22
|
|
|
23
|
+
/**
|
|
24
|
+
* @typedef {Object} EditorGlobals
|
|
25
|
+
* @property {boolean} showPanel
|
|
26
|
+
* @property {boolean} synced
|
|
27
|
+
* @property {Function} addAnimation
|
|
28
|
+
* @property {Function} addTimeline
|
|
29
|
+
* @property {Function} addTimelineChild
|
|
30
|
+
* @property {Function} resolveStagger
|
|
31
|
+
* @property {Object|null} _head
|
|
32
|
+
* @property {Object|null} _tail
|
|
33
|
+
*/
|
|
34
|
+
|
|
23
35
|
/** @type {DefaultsParams} */
|
|
24
36
|
const defaults = {
|
|
25
37
|
id: null,
|
|
@@ -63,11 +75,11 @@ const globals = {
|
|
|
63
75
|
timeScale: 1,
|
|
64
76
|
/** @type {Number} */
|
|
65
77
|
tickThreshold: 200,
|
|
78
|
+
/** @type {EditorGlobals|null} */
|
|
79
|
+
editor: null,
|
|
66
80
|
};
|
|
67
81
|
|
|
68
|
-
const
|
|
69
|
-
|
|
70
|
-
const globalVersions = { version: '4.3.6', engine: null };
|
|
82
|
+
const globalVersions = { version: '4.4.1', engine: null };
|
|
71
83
|
|
|
72
84
|
if (consts.isBrowser) {
|
|
73
85
|
if (!consts.win.AnimeJS) consts.win.AnimeJS = [];
|
|
@@ -75,7 +87,6 @@ if (consts.isBrowser) {
|
|
|
75
87
|
}
|
|
76
88
|
|
|
77
89
|
exports.defaults = defaults;
|
|
78
|
-
exports.devTools = devTools;
|
|
79
90
|
exports.globalVersions = globalVersions;
|
|
80
91
|
exports.globals = globals;
|
|
81
92
|
exports.scope = scope;
|