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,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timeline - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -11,10 +11,10 @@ import { isUnd, mergeObjects, isObj, isFnc, isStr, normalizeTime, forEachChildre
|
|
|
11
11
|
import { setValue } from '../core/values.js';
|
|
12
12
|
import { parseTargets } from '../core/targets.js';
|
|
13
13
|
import { tick } from '../core/render.js';
|
|
14
|
-
import {
|
|
14
|
+
import { revertValues } from '../core/styles.js';
|
|
15
|
+
import { Timer } from '../timer/timer.js';
|
|
15
16
|
import { removeTargetsFromRenderable } from '../animation/composition.js';
|
|
16
17
|
import { JSAnimation } from '../animation/animation.js';
|
|
17
|
-
import { Timer } from '../timer/timer.js';
|
|
18
18
|
import { parseEase } from '../easings/eases/parser.js';
|
|
19
19
|
import { parseTimelinePosition } from './position.js';
|
|
20
20
|
|
|
@@ -31,6 +31,7 @@ import { parseTimelinePosition } from './position.js';
|
|
|
31
31
|
* DefaultsParams,
|
|
32
32
|
* TimelinePosition,
|
|
33
33
|
* StaggerFunction,
|
|
34
|
+
* TargetsArray,
|
|
34
35
|
* } from '../types/index.js'
|
|
35
36
|
*/
|
|
36
37
|
|
|
@@ -40,6 +41,8 @@ import { parseTimelinePosition } from './position.js';
|
|
|
40
41
|
* } from '../waapi/waapi.js'
|
|
41
42
|
*/
|
|
42
43
|
|
|
44
|
+
/** @import {TweakRegister} from 'tweaks' */
|
|
45
|
+
|
|
43
46
|
/**
|
|
44
47
|
* @param {Timeline} tl
|
|
45
48
|
* @return {Number}
|
|
@@ -61,7 +64,7 @@ function getTimelineTotalDuration(tl) {
|
|
|
61
64
|
* @param {Number} timePosition
|
|
62
65
|
* @param {TargetsParam} targets
|
|
63
66
|
* @param {Number} [index]
|
|
64
|
-
* @param {
|
|
67
|
+
* @param {TargetsArray} [allTargets]
|
|
65
68
|
* @return {Timeline}
|
|
66
69
|
*
|
|
67
70
|
* @param {TimerParams|AnimationParams} childParams
|
|
@@ -69,15 +72,15 @@ function getTimelineTotalDuration(tl) {
|
|
|
69
72
|
* @param {Number} timePosition
|
|
70
73
|
* @param {TargetsParam} [targets]
|
|
71
74
|
* @param {Number} [index]
|
|
72
|
-
* @param {
|
|
75
|
+
* @param {TargetsArray} [allTargets]
|
|
73
76
|
*/
|
|
74
|
-
function addTlChild(childParams, tl, timePosition, targets, index,
|
|
77
|
+
function addTlChild(childParams, tl, timePosition, targets, index, allTargets) {
|
|
75
78
|
const isSetter = isNum(childParams.duration) && /** @type {Number} */(childParams.duration) <= minValue;
|
|
76
79
|
// Offset the tl position with -minValue for 0 duration animations or .set() calls in order to align their end value with the defined position
|
|
77
80
|
const adjustedPosition = isSetter ? timePosition - minValue : timePosition;
|
|
78
81
|
if (tl.composition) tick(tl, adjustedPosition, 1, 1, tickModes.AUTO);
|
|
79
82
|
const tlChild = targets ?
|
|
80
|
-
new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index,
|
|
83
|
+
new JSAnimation(targets,/** @type {AnimationParams} */(childParams), tl, adjustedPosition, false, index, allTargets) :
|
|
81
84
|
new Timer(/** @type {TimerParams} */(childParams), tl, adjustedPosition);
|
|
82
85
|
if (tl.composition) tlChild.init(true);
|
|
83
86
|
// TODO: Might be better to insert at a position relative to startTime?
|
|
@@ -125,7 +128,7 @@ class Timeline extends Timer {
|
|
|
125
128
|
* @overload
|
|
126
129
|
* @param {TargetsParam} a1
|
|
127
130
|
* @param {AnimationParams} a2
|
|
128
|
-
* @param {TimelinePosition|StaggerFunction<Number|String
|
|
131
|
+
* @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
|
|
129
132
|
* @return {this}
|
|
130
133
|
*
|
|
131
134
|
* @overload
|
|
@@ -135,7 +138,7 @@ class Timeline extends Timer {
|
|
|
135
138
|
*
|
|
136
139
|
* @param {TargetsParam|TimerParams} a1
|
|
137
140
|
* @param {TimelinePosition|AnimationParams} a2
|
|
138
|
-
* @param {TimelinePosition|StaggerFunction<Number|String
|
|
141
|
+
* @param {TimelinePosition|StaggerFunction<Number|String>|TweakRegister} [a3]
|
|
139
142
|
*/
|
|
140
143
|
add(a1, a2, a3) {
|
|
141
144
|
const isAnim = isObj(a2);
|
|
@@ -144,9 +147,11 @@ class Timeline extends Timer {
|
|
|
144
147
|
this._hasChildren = true;
|
|
145
148
|
if (isAnim) {
|
|
146
149
|
const childParams = /** @type {AnimationParams} */(a2);
|
|
147
|
-
|
|
148
|
-
|
|
149
|
-
|
|
150
|
+
const editorHook = globals.editor && globals.editor.addTimelineChild;
|
|
151
|
+
const isStaggerType = a3 && /** @type {TweakRegister} */(a3).type === 'Stagger' && globals.editor;
|
|
152
|
+
// Check for function or Stagger type children positions
|
|
153
|
+
const staggeredPosition = isFnc(a3) ? a3 : null;
|
|
154
|
+
if (staggeredPosition || isStaggerType) {
|
|
150
155
|
const parsedTargetsArray = parseTargets(/** @type {TargetsParam} */(a1));
|
|
151
156
|
// Store initial duration before adding new children that will change the duration
|
|
152
157
|
const tlDuration = this.duration;
|
|
@@ -157,28 +162,36 @@ class Timeline extends Timer {
|
|
|
157
162
|
let i = 0;
|
|
158
163
|
/** @type {Number} */
|
|
159
164
|
const parsedLength = (parsedTargetsArray.length);
|
|
165
|
+
// Call editor hook once for the entire stagger group instead of per target
|
|
166
|
+
const resolvedParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3, parsedLength) : null;
|
|
167
|
+
// Resolve stagger AFTER editor hook so tweaked position value (a3.defaultValue) is used
|
|
168
|
+
const staggerFn = staggeredPosition || globals.editor.resolveStagger(/** @type {TweakRegister} */(a3).defaultValue);
|
|
160
169
|
parsedTargetsArray.forEach((/** @type {Target} */target) => {
|
|
161
170
|
// Create a new parameter object for each staggered children
|
|
162
|
-
const staggeredChildParams = { ...childParams };
|
|
171
|
+
const staggeredChildParams = { ...(resolvedParams || childParams) };
|
|
163
172
|
// Reset the duration of the timeline iteration before each stagger to prevent wrong start value calculation
|
|
164
173
|
this.duration = tlDuration;
|
|
165
174
|
this.iterationDuration = tlIterationDuration;
|
|
166
175
|
if (!isUnd(id)) staggeredChildParams.id = id + '-' + i;
|
|
176
|
+
const staggeredTimePosition = parseTimelinePosition(this, staggerFn(target, i, parsedTargetsArray, null, this));
|
|
167
177
|
addTlChild(
|
|
168
178
|
staggeredChildParams,
|
|
169
179
|
this,
|
|
170
|
-
|
|
180
|
+
staggeredTimePosition,
|
|
171
181
|
target,
|
|
172
182
|
i,
|
|
173
|
-
|
|
183
|
+
parsedTargetsArray,
|
|
174
184
|
);
|
|
175
185
|
i++;
|
|
176
186
|
});
|
|
177
187
|
} else {
|
|
188
|
+
// Call editor hook before resolving position so tweaked values are applied
|
|
189
|
+
const resolvedChildParams = editorHook ? editorHook(/** @type {TargetsParam} */(a1), childParams, this.id, a3) : childParams;
|
|
190
|
+
const resolvedPosition = a3 && /** @type {*} */(a3).type ? /** @type {*} */(a3).defaultValue : a3;
|
|
178
191
|
addTlChild(
|
|
179
|
-
|
|
192
|
+
resolvedChildParams,
|
|
180
193
|
this,
|
|
181
|
-
parseTimelinePosition(this,
|
|
194
|
+
parseTimelinePosition(this, resolvedPosition),
|
|
182
195
|
/** @type {TargetsParam} */(a1),
|
|
183
196
|
);
|
|
184
197
|
}
|
|
@@ -300,7 +313,7 @@ class Timeline extends Timer {
|
|
|
300
313
|
revert() {
|
|
301
314
|
super.revert();
|
|
302
315
|
forEachChildren(this, (/** @type {JSAnimation|Timer} */child) => child.revert, true);
|
|
303
|
-
return
|
|
316
|
+
return revertValues(this);
|
|
304
317
|
}
|
|
305
318
|
|
|
306
319
|
/**
|
|
@@ -320,6 +333,11 @@ class Timeline extends Timer {
|
|
|
320
333
|
* @param {TimelineParams} [parameters]
|
|
321
334
|
* @return {Timeline}
|
|
322
335
|
*/
|
|
323
|
-
const createTimeline = parameters =>
|
|
336
|
+
const createTimeline = parameters => {
|
|
337
|
+
if (globals.editor) {
|
|
338
|
+
return /** @type {Timeline} */(/** @type {unknown} */(globals.editor.addTimeline(parameters)));
|
|
339
|
+
}
|
|
340
|
+
return new Timeline(parameters).init();
|
|
341
|
+
};
|
|
324
342
|
|
|
325
343
|
export { Timeline, createTimeline };
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timer - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -69,6 +69,9 @@ const reviveTimer = timer => {
|
|
|
69
69
|
|
|
70
70
|
let timerId = 0;
|
|
71
71
|
|
|
72
|
+
/** @param {Timer} prev @param {Timer} child */
|
|
73
|
+
const sortByPriority = (prev, child) => prev._priority > child._priority;
|
|
74
|
+
|
|
72
75
|
/**
|
|
73
76
|
* Base class used to create Timers, Animations and Timelines
|
|
74
77
|
*/
|
|
@@ -95,6 +98,7 @@ class Timer extends clock.Clock {
|
|
|
95
98
|
autoplay,
|
|
96
99
|
frameRate,
|
|
97
100
|
playbackRate,
|
|
101
|
+
priority,
|
|
98
102
|
onComplete,
|
|
99
103
|
onLoop,
|
|
100
104
|
onPause,
|
|
@@ -116,16 +120,6 @@ class Timer extends clock.Clock {
|
|
|
116
120
|
/** @type {Number} */(timerLoop) < 0 ? Infinity :
|
|
117
121
|
/** @type {Number} */(timerLoop) + 1;
|
|
118
122
|
|
|
119
|
-
if (globals.devTools) {
|
|
120
|
-
const isInfinite = timerIterationCount === Infinity;
|
|
121
|
-
const registered = globals.devTools.register(this, parameters, isInfinite);
|
|
122
|
-
if (registered && isInfinite) {
|
|
123
|
-
const minIterations = alternate ? 2 : 1;
|
|
124
|
-
const iterations = parent ? globals.devTools.maxNestedInfiniteLoops : globals.devTools.maxInfiniteLoops;
|
|
125
|
-
timerIterationCount = Math.max(iterations, minIterations);
|
|
126
|
-
}
|
|
127
|
-
}
|
|
128
|
-
|
|
129
123
|
let offsetPosition = 0;
|
|
130
124
|
|
|
131
125
|
if (parent) {
|
|
@@ -209,6 +203,8 @@ class Timer extends clock.Clock {
|
|
|
209
203
|
this._fps = values.setValue(frameRate, timerDefaults.frameRate);
|
|
210
204
|
/** @type {Number} */
|
|
211
205
|
this._speed = values.setValue(playbackRate, timerDefaults.playbackRate);
|
|
206
|
+
/** @type {Number} */
|
|
207
|
+
this._priority = +values.setValue(priority, 1);
|
|
212
208
|
}
|
|
213
209
|
|
|
214
210
|
get cancelled() {
|
|
@@ -353,7 +349,7 @@ class Timer extends clock.Clock {
|
|
|
353
349
|
render.tick(this, consts.minValue, 0, 0, consts.tickModes.FORCE);
|
|
354
350
|
} else {
|
|
355
351
|
if (!this._running) {
|
|
356
|
-
helpers.addChild(engine.engine, this);
|
|
352
|
+
helpers.addChild(engine.engine, this, sortByPriority);
|
|
357
353
|
engine.engine._hasChildren = true;
|
|
358
354
|
this._running = true;
|
|
359
355
|
}
|
|
@@ -1,13 +1,13 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - timer - 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 { minValue, noop, maxValue, compositionTypes, tickModes } from '../core/consts.js';
|
|
9
9
|
import { isFnc, isUnd, now, clampInfinity, clamp, round, forEachChildren, addChild, normalizeTime, floor } from '../core/helpers.js';
|
|
10
|
-
import { globals,
|
|
10
|
+
import { globals, scope } from '../core/globals.js';
|
|
11
11
|
import { setValue } from '../core/values.js';
|
|
12
12
|
import { tick } from '../core/render.js';
|
|
13
13
|
import { removeTweenSliblings, composeTween, getTweenSiblings } from '../animation/composition.js';
|
|
@@ -67,6 +67,9 @@ const reviveTimer = timer => {
|
|
|
67
67
|
|
|
68
68
|
let timerId = 0;
|
|
69
69
|
|
|
70
|
+
/** @param {Timer} prev @param {Timer} child */
|
|
71
|
+
const sortByPriority = (prev, child) => prev._priority > child._priority;
|
|
72
|
+
|
|
70
73
|
/**
|
|
71
74
|
* Base class used to create Timers, Animations and Timelines
|
|
72
75
|
*/
|
|
@@ -93,6 +96,7 @@ class Timer extends Clock {
|
|
|
93
96
|
autoplay,
|
|
94
97
|
frameRate,
|
|
95
98
|
playbackRate,
|
|
99
|
+
priority,
|
|
96
100
|
onComplete,
|
|
97
101
|
onLoop,
|
|
98
102
|
onPause,
|
|
@@ -114,16 +118,6 @@ class Timer extends Clock {
|
|
|
114
118
|
/** @type {Number} */(timerLoop) < 0 ? Infinity :
|
|
115
119
|
/** @type {Number} */(timerLoop) + 1;
|
|
116
120
|
|
|
117
|
-
if (devTools) {
|
|
118
|
-
const isInfinite = timerIterationCount === Infinity;
|
|
119
|
-
const registered = devTools.register(this, parameters, isInfinite);
|
|
120
|
-
if (registered && isInfinite) {
|
|
121
|
-
const minIterations = alternate ? 2 : 1;
|
|
122
|
-
const iterations = parent ? devTools.maxNestedInfiniteLoops : devTools.maxInfiniteLoops;
|
|
123
|
-
timerIterationCount = Math.max(iterations, minIterations);
|
|
124
|
-
}
|
|
125
|
-
}
|
|
126
|
-
|
|
127
121
|
let offsetPosition = 0;
|
|
128
122
|
|
|
129
123
|
if (parent) {
|
|
@@ -207,6 +201,8 @@ class Timer extends Clock {
|
|
|
207
201
|
this._fps = setValue(frameRate, timerDefaults.frameRate);
|
|
208
202
|
/** @type {Number} */
|
|
209
203
|
this._speed = setValue(playbackRate, timerDefaults.playbackRate);
|
|
204
|
+
/** @type {Number} */
|
|
205
|
+
this._priority = +setValue(priority, 1);
|
|
210
206
|
}
|
|
211
207
|
|
|
212
208
|
get cancelled() {
|
|
@@ -351,7 +347,7 @@ class Timer extends Clock {
|
|
|
351
347
|
tick(this, minValue, 0, 0, tickModes.FORCE);
|
|
352
348
|
} else {
|
|
353
349
|
if (!this._running) {
|
|
354
|
-
addChild(engine, this);
|
|
350
|
+
addChild(engine, this, sortByPriority);
|
|
355
351
|
engine._hasChildren = true;
|
|
356
352
|
this._running = true;
|
|
357
353
|
}
|
|
@@ -27,12 +27,12 @@ export type Renderable = JSAnimation | Timeline;
|
|
|
27
27
|
export type Tickable = Timer | Renderable;
|
|
28
28
|
export type CallbackArgument = Timer & JSAnimation & Timeline;
|
|
29
29
|
export type Revertible = Animatable | Tickable | WAAPIAnimation | Draggable | ScrollObserver | TextSplitter | Scope | AutoLayout;
|
|
30
|
-
export type StaggerFunction<T> = (target?: Target, index?: number,
|
|
30
|
+
export type StaggerFunction<T> = (target?: Target, index?: number, targets?: TargetsArray, prevTween?: Tween | null, tl?: Timeline) => T;
|
|
31
31
|
export type StaggerParams = {
|
|
32
32
|
start?: number | string;
|
|
33
|
-
from?: number | "first" | "center" | "last" | "random"
|
|
33
|
+
from?: number | "first" | "center" | "last" | "random" | Array<number>;
|
|
34
34
|
reversed?: boolean;
|
|
35
|
-
grid?: Array<number
|
|
35
|
+
grid?: Array<number> | boolean;
|
|
36
36
|
axis?: ("x" | "y");
|
|
37
37
|
use?: string | ((target: Target, i: number, length: number) => number);
|
|
38
38
|
total?: number;
|
|
@@ -57,8 +57,8 @@ export type PowerEasing = (power?: number | string) => EasingFunction;
|
|
|
57
57
|
export type BackEasing = (overshoot?: number | string) => EasingFunction;
|
|
58
58
|
export type ElasticEasing = (amplitude?: number | string, period?: number | string) => EasingFunction;
|
|
59
59
|
export type EasingFunctionWithParams = PowerEasing | BackEasing | ElasticEasing;
|
|
60
|
-
export type EasingParam = (string & {}) | EaseStringParamNames | EasingFunction | Spring;
|
|
61
|
-
export type WAAPIEasingParam = (string & {}) | EaseStringParamNames | WAAPIEaseStringParamNames | EasingFunction | Spring;
|
|
60
|
+
export type EasingParam = (string & {}) | EaseStringParamNames | EasingFunction | Spring | TweakRegister;
|
|
61
|
+
export type WAAPIEasingParam = (string & {}) | EaseStringParamNames | WAAPIEaseStringParamNames | EasingFunction | Spring | TweakRegister;
|
|
62
62
|
export type SpringParams = {
|
|
63
63
|
/**
|
|
64
64
|
* - Mass, default 1
|
|
@@ -112,9 +112,10 @@ export type TimerOptions = {
|
|
|
112
112
|
autoplay?: boolean | ScrollObserver;
|
|
113
113
|
frameRate?: number;
|
|
114
114
|
playbackRate?: number;
|
|
115
|
+
priority?: number;
|
|
115
116
|
};
|
|
116
117
|
export type TimerParams = TimerOptions & TickableCallbacks<Timer>;
|
|
117
|
-
export type FunctionValue = (target
|
|
118
|
+
export type FunctionValue = (target?: Target, index?: number, targets?: TargetsArray, prevTween?: Tween | null) => number | string | TweenObjectValue | EasingParam | Array<number | string | TweenObjectValue>;
|
|
118
119
|
export type TweenModifier = (value: number) => number | string;
|
|
119
120
|
export type ColorArray = [number, number, number, number];
|
|
120
121
|
export type Tween = {
|
|
@@ -246,7 +247,7 @@ export type TimelinePosition = number | `+=${number}` | `-=${number}` | `*=${num
|
|
|
246
247
|
* - `'label'` - Label: Position animation at a named label position (e.g., `'My Label'`)<br>
|
|
247
248
|
* - `stagger(String|Nummber)` - Stagger multi-elements animation positions (e.g., 10, 20, 30...)
|
|
248
249
|
*/
|
|
249
|
-
export type TimelineAnimationPosition = TimelinePosition | StaggerFunction<number | string
|
|
250
|
+
export type TimelineAnimationPosition = TimelinePosition | StaggerFunction<number | string> | TweakRegister;
|
|
250
251
|
export type TimelineOptions = {
|
|
251
252
|
defaults?: DefaultsParams;
|
|
252
253
|
playbackEase?: EasingParam;
|
|
@@ -254,7 +255,7 @@ export type TimelineOptions = {
|
|
|
254
255
|
};
|
|
255
256
|
export type TimelineParams = TimerOptions & TimelineOptions & TickableCallbacks<Timeline> & RenderableCallbacks<Timeline>;
|
|
256
257
|
export type WAAPITweenValue = string | number | Array<string> | Array<number>;
|
|
257
|
-
export type WAAPIFunctionValue = (target: DOMTarget, index: number,
|
|
258
|
+
export type WAAPIFunctionValue = (target: DOMTarget, index: number, targets: DOMTargetsArray) => WAAPITweenValue | WAAPIEasingParam;
|
|
258
259
|
export type WAAPIKeyframeValue = WAAPITweenValue | WAAPIFunctionValue | Array<string | number | WAAPIFunctionValue>;
|
|
259
260
|
export type WAAPITweenOptions = {
|
|
260
261
|
to?: WAAPIKeyframeValue;
|
|
@@ -392,6 +393,72 @@ export type TextSplitterParams = {
|
|
|
392
393
|
includeSpaces?: boolean;
|
|
393
394
|
debug?: boolean;
|
|
394
395
|
};
|
|
396
|
+
export type ScrambleTextParams = {
|
|
397
|
+
/**
|
|
398
|
+
* - the text to transition to, otherwise uses the original text
|
|
399
|
+
*/
|
|
400
|
+
text?: string | ((arg0: Target, arg1: number, arg2: TargetsArray) => string);
|
|
401
|
+
/**
|
|
402
|
+
* - the characters used for scramble; named sets: 'lowercase', 'uppercase', 'numbers', 'symbols', 'braille', 'blocks', 'shades'; range syntax: 'A-Z', 'a-z0-9'; defaults to 'a-zA-Z0-9!%#_'
|
|
403
|
+
*/
|
|
404
|
+
chars?: string | ((arg0: Target, arg1: number, arg2: TargetsArray) => string);
|
|
405
|
+
/**
|
|
406
|
+
* - the easing applied to the scramble animation
|
|
407
|
+
*/
|
|
408
|
+
ease?: EasingParam;
|
|
409
|
+
/**
|
|
410
|
+
* - where the reveal wave starts from, 'auto' (default) uses 'left' when text grows and 'right' when it shrinks
|
|
411
|
+
*/
|
|
412
|
+
from?: number | "left" | "center" | "right" | "random" | "auto";
|
|
413
|
+
/**
|
|
414
|
+
* - reverses the reveal order, so 'center' reveals from edges inward instead of center outward
|
|
415
|
+
*/
|
|
416
|
+
reversed?: boolean;
|
|
417
|
+
/**
|
|
418
|
+
* - characters displayed at the leading edge of the reveal wave; true uses '_', a number is a char code, a string is used directly
|
|
419
|
+
*/
|
|
420
|
+
cursor?: boolean | number | string;
|
|
421
|
+
/**
|
|
422
|
+
* - adds random timing offsets to each character's start and end, creating a more organic reveal
|
|
423
|
+
*/
|
|
424
|
+
perturbation?: number;
|
|
425
|
+
/**
|
|
426
|
+
* - a seed for the random number generator to produce reproducible scramble sequences
|
|
427
|
+
*/
|
|
428
|
+
seed?: number;
|
|
429
|
+
/**
|
|
430
|
+
* - controls the starting appearance: false shows original text, true scrambles it (default), '' starts from blank, ' ' replaces characters with spaces, a custom string (supports range syntax like 'A-Z') uses its characters as scramble set
|
|
431
|
+
*/
|
|
432
|
+
override?: boolean | string;
|
|
433
|
+
/**
|
|
434
|
+
* - characters per second entering the active zone; higher values make the reveal wave move faster (default: 60)
|
|
435
|
+
*/
|
|
436
|
+
revealRate?: number;
|
|
437
|
+
/**
|
|
438
|
+
* - time in ms each character spends scrambling before settling into its final glyph (default: 300)
|
|
439
|
+
*/
|
|
440
|
+
settleDuration?: number;
|
|
441
|
+
/**
|
|
442
|
+
* - how many times per second scramble characters cycle in the active zone (default: 30)
|
|
443
|
+
*/
|
|
444
|
+
settleRate?: number;
|
|
445
|
+
/**
|
|
446
|
+
* - if set to a value greater than 0, overrides the computed duration from interval and settle; if unset or 0, duration is calculated automatically from text length and timing parameters
|
|
447
|
+
*/
|
|
448
|
+
duration?: number | ((arg0: Target, arg1: number, arg2: TargetsArray) => number);
|
|
449
|
+
/**
|
|
450
|
+
* - delay in ms before the reveal wave starts within the scramble animation
|
|
451
|
+
*/
|
|
452
|
+
revealDelay?: number | ((arg0: Target, arg1: number, arg2: TargetsArray) => number);
|
|
453
|
+
/**
|
|
454
|
+
* - delay in ms before the entire scramble animation starts
|
|
455
|
+
*/
|
|
456
|
+
delay?: number | ((arg0: Target, arg1: number, arg2: TargetsArray) => number);
|
|
457
|
+
/**
|
|
458
|
+
* - callback fired each time a character changes during scramble; receives the current scrambled text and the eased progress (0-1)
|
|
459
|
+
*/
|
|
460
|
+
onChange?: (arg0: string, arg1: number) => void;
|
|
461
|
+
};
|
|
395
462
|
export type DrawableSVGGeometry = SVGGeometryElement & {
|
|
396
463
|
setAttribute(name: "draw", value: `${number} ${number}`): void;
|
|
397
464
|
draw: `${number} ${number}`;
|
|
@@ -408,5 +475,6 @@ import type { TextSplitter } from '../text/split.js';
|
|
|
408
475
|
import type { Scope } from '../scope/scope.js';
|
|
409
476
|
import type { AutoLayout } from '../layout/layout.js';
|
|
410
477
|
import type { Spring } from '../easings/spring/index.js';
|
|
478
|
+
import type { TweakRegister } from 'tweaks';
|
|
411
479
|
import type { tweenTypes } from '../core/consts.js';
|
|
412
480
|
import type { valueTypes } from '../core/consts.js';
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - utils - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -36,10 +36,13 @@ const chain = fn => {
|
|
|
36
36
|
const result = fn(...args);
|
|
37
37
|
return new Proxy(consts.noop, {
|
|
38
38
|
apply: (_, __, [v]) => result(v),
|
|
39
|
-
get: (_, prop) =>
|
|
40
|
-
|
|
41
|
-
return (/**@
|
|
42
|
-
|
|
39
|
+
get: (_, prop) => {
|
|
40
|
+
if (!chainables[prop]) return undefined;
|
|
41
|
+
return chain(/**@param {...Number|String} nextArgs */(...nextArgs) => {
|
|
42
|
+
const nextResult = chainables[prop](...nextArgs);
|
|
43
|
+
return (/**@type {Number|String} */v) => nextResult(result(v));
|
|
44
|
+
})
|
|
45
|
+
}
|
|
43
46
|
});
|
|
44
47
|
}
|
|
45
48
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - utils - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -34,10 +34,13 @@ const chain = fn => {
|
|
|
34
34
|
const result = fn(...args);
|
|
35
35
|
return new Proxy(noop, {
|
|
36
36
|
apply: (_, __, [v]) => result(v),
|
|
37
|
-
get: (_, prop) =>
|
|
38
|
-
|
|
39
|
-
return (/**@
|
|
40
|
-
|
|
37
|
+
get: (_, prop) => {
|
|
38
|
+
if (!chainables[prop]) return undefined;
|
|
39
|
+
return chain(/**@param {...Number|String} nextArgs */(...nextArgs) => {
|
|
40
|
+
const nextResult = chainables[prop](...nextArgs);
|
|
41
|
+
return (/**@type {Number|String} */v) => nextResult(result(v));
|
|
42
|
+
})
|
|
43
|
+
}
|
|
41
44
|
});
|
|
42
45
|
}
|
|
43
46
|
};
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - utils - CJS
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -12,6 +12,7 @@ var random = require('./random.cjs');
|
|
|
12
12
|
var time = require('./time.cjs');
|
|
13
13
|
var target = require('./target.cjs');
|
|
14
14
|
var stagger = require('./stagger.cjs');
|
|
15
|
+
var helpers = require('../core/helpers.cjs');
|
|
15
16
|
var styles = require('../core/styles.cjs');
|
|
16
17
|
var targets = require('../core/targets.cjs');
|
|
17
18
|
|
|
@@ -39,5 +40,8 @@ exports.get = target.get;
|
|
|
39
40
|
exports.remove = target.remove;
|
|
40
41
|
exports.set = target.set;
|
|
41
42
|
exports.stagger = stagger.stagger;
|
|
43
|
+
exports.addChild = helpers.addChild;
|
|
44
|
+
exports.forEachChildren = helpers.forEachChildren;
|
|
45
|
+
exports.removeChild = helpers.removeChild;
|
|
42
46
|
exports.cleanInlineStyles = styles.cleanInlineStyles;
|
|
43
47
|
exports.$ = targets.registerTargets;
|
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
/**
|
|
2
2
|
* Anime.js - utils - ESM
|
|
3
|
-
* @version v4.
|
|
3
|
+
* @version v4.4.1
|
|
4
4
|
* @license MIT
|
|
5
5
|
* @copyright 2026 - Julian Garnier
|
|
6
6
|
*/
|
|
@@ -10,5 +10,6 @@ export { createSeededRandom, random, randomPick, shuffle } from './random.js';
|
|
|
10
10
|
export { keepTime, sync } from './time.js';
|
|
11
11
|
export { get, remove, set } from './target.js';
|
|
12
12
|
export { stagger } from './stagger.js';
|
|
13
|
+
export { addChild, forEachChildren, removeChild } from '../core/helpers.js';
|
|
13
14
|
export { cleanInlineStyles } from '../core/styles.js';
|
|
14
15
|
export { registerTargets as $ } from '../core/targets.js';
|