motion 10.3.2 → 10.5.0-alpha.3
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 +0 -19
- package/dist/main.cjs.js +11 -13
- package/dist/main.es.js +7 -6
- package/dist/motion.min.js +1 -1
- package/dist/motion.umd.js +412 -16
- package/dist/react.cjs.js +7 -2
- package/dist/react.es.js +1 -1
- package/dist/size-index.js +1 -0
- package/lib/index.js +5 -0
- package/lib/index.js.map +1 -0
- package/lib/react.js +2 -0
- package/lib/react.js.map +1 -0
- package/lib/vue.js +2 -0
- package/lib/vue.js.map +1 -0
- package/package.json +16 -134
- package/react/package.json +1 -1
- package/types/index.d.ts +3 -7
- package/types/index.d.ts.map +1 -0
- package/types/react.d.ts +2 -0
- package/types/react.d.ts.map +1 -0
- package/types/vue.d.ts +2 -0
- package/types/vue.d.ts.map +1 -0
- package/CHANGELOG.md +0 -97
- package/dist/size-animate-dom.js +0 -1
- package/dist/size-animate-style.js +0 -1
- package/dist/size-react.js +0 -1
- package/dist/size-spring.js +0 -1
- package/dist/size-timeline-dom.js +0 -1
- package/dist/size-webpack-animate.js +0 -1
- package/dist/targets/dom/animate-style.cjs.js +0 -182
- package/dist/targets/dom/animate-style.es.js +0 -178
- package/dist/targets/dom/animate.cjs.js +0 -42
- package/dist/targets/dom/animate.es.js +0 -38
- package/dist/targets/dom/data.cjs.js +0 -18
- package/dist/targets/dom/data.es.js +0 -14
- package/dist/targets/dom/style.cjs.js +0 -22
- package/dist/targets/dom/style.es.js +0 -18
- package/dist/targets/dom/timeline/index.cjs.js +0 -174
- package/dist/targets/dom/timeline/index.es.js +0 -169
- package/dist/targets/dom/timeline/utils/calc-time.cjs.js +0 -23
- package/dist/targets/dom/timeline/utils/calc-time.es.js +0 -19
- package/dist/targets/dom/timeline/utils/edit.cjs.js +0 -36
- package/dist/targets/dom/timeline/utils/edit.es.js +0 -31
- package/dist/targets/dom/timeline/utils/sort.cjs.js +0 -14
- package/dist/targets/dom/timeline/utils/sort.es.js +0 -10
- package/dist/targets/dom/utils/apply.cjs.js +0 -9
- package/dist/targets/dom/utils/apply.es.js +0 -4
- package/dist/targets/dom/utils/controls.cjs.js +0 -59
- package/dist/targets/dom/utils/controls.es.js +0 -54
- package/dist/targets/dom/utils/css-var.cjs.js +0 -29
- package/dist/targets/dom/utils/css-var.es.js +0 -23
- package/dist/targets/dom/utils/defaults.cjs.js +0 -13
- package/dist/targets/dom/utils/defaults.es.js +0 -9
- package/dist/targets/dom/utils/easing.cjs.js +0 -18
- package/dist/targets/dom/utils/easing.es.js +0 -10
- package/dist/targets/dom/utils/feature-detection.cjs.js +0 -31
- package/dist/targets/dom/utils/feature-detection.es.js +0 -27
- package/dist/targets/dom/utils/get-style-name.cjs.js +0 -13
- package/dist/targets/dom/utils/get-style-name.es.js +0 -9
- package/dist/targets/dom/utils/keyframes.cjs.js +0 -16
- package/dist/targets/dom/utils/keyframes.es.js +0 -11
- package/dist/targets/dom/utils/options.cjs.js +0 -13
- package/dist/targets/dom/utils/options.es.js +0 -9
- package/dist/targets/dom/utils/resolve-elements.cjs.js +0 -22
- package/dist/targets/dom/utils/resolve-elements.es.js +0 -18
- package/dist/targets/dom/utils/stop-animation.cjs.js +0 -19
- package/dist/targets/dom/utils/stop-animation.es.js +0 -15
- package/dist/targets/dom/utils/time.cjs.js +0 -7
- package/dist/targets/dom/utils/time.es.js +0 -3
- package/dist/targets/dom/utils/transforms.cjs.js +0 -85
- package/dist/targets/dom/utils/transforms.es.js +0 -74
- package/dist/targets/js/NumberAnimation.cjs.js +0 -144
- package/dist/targets/js/NumberAnimation.es.js +0 -140
- package/dist/targets/js/easing/cubic-bezier.cjs.js +0 -57
- package/dist/targets/js/easing/cubic-bezier.es.js +0 -53
- package/dist/targets/js/easing/glide/generator.cjs.js +0 -99
- package/dist/targets/js/easing/glide/generator.es.js +0 -95
- package/dist/targets/js/easing/glide/index.cjs.js +0 -10
- package/dist/targets/js/easing/glide/index.es.js +0 -6
- package/dist/targets/js/easing/spring/generator.cjs.js +0 -64
- package/dist/targets/js/easing/spring/generator.es.js +0 -57
- package/dist/targets/js/easing/spring/index.cjs.js +0 -10
- package/dist/targets/js/easing/spring/index.es.js +0 -6
- package/dist/targets/js/easing/steps.cjs.js +0 -15
- package/dist/targets/js/easing/steps.es.js +0 -11
- package/dist/targets/js/easing/utils/create-generator-easing.cjs.js +0 -71
- package/dist/targets/js/easing/utils/create-generator-easing.es.js +0 -67
- package/dist/targets/js/easing/utils/get-function.cjs.js +0 -37
- package/dist/targets/js/easing/utils/get-function.es.js +0 -33
- package/dist/targets/js/easing/utils/has-reached-target.cjs.js +0 -10
- package/dist/targets/js/easing/utils/has-reached-target.es.js +0 -6
- package/dist/targets/js/easing/utils/pregenerate-keyframes.cjs.js +0 -34
- package/dist/targets/js/easing/utils/pregenerate-keyframes.es.js +0 -30
- package/dist/targets/js/utils/get-easing.cjs.js +0 -14
- package/dist/targets/js/utils/get-easing.es.js +0 -10
- package/dist/targets/js/utils/interpolate.cjs.js +0 -35
- package/dist/targets/js/utils/interpolate.es.js +0 -31
- package/dist/targets/js/utils/offset.cjs.js +0 -22
- package/dist/targets/js/utils/offset.es.js +0 -17
- package/dist/targets/react/animated.cjs.js +0 -126
- package/dist/targets/react/animated.es.js +0 -101
- package/dist/targets/react/context.cjs.js +0 -9
- package/dist/targets/react/context.es.js +0 -5
- package/dist/targets/react/hooks/use-animation.cjs.js +0 -47
- package/dist/targets/react/hooks/use-animation.es.js +0 -43
- package/dist/targets/react/hooks/use-exit.cjs.js +0 -27
- package/dist/targets/react/hooks/use-exit.es.js +0 -23
- package/dist/targets/react/hooks/use-gesture-state.cjs.js +0 -17
- package/dist/targets/react/hooks/use-gesture-state.es.js +0 -13
- package/dist/targets/react/hooks/use-hover.cjs.js +0 -24
- package/dist/targets/react/hooks/use-hover.es.js +0 -20
- package/dist/targets/react/hooks/use-press.cjs.js +0 -25
- package/dist/targets/react/hooks/use-press.es.js +0 -21
- package/dist/targets/react/hooks/use-viewport.cjs.js +0 -37
- package/dist/targets/react/hooks/use-viewport.es.js +0 -33
- package/dist/targets/react/index.cjs.js +0 -17
- package/dist/targets/react/index.es.js +0 -13
- package/dist/targets/react/utils/has-changed.cjs.js +0 -24
- package/dist/targets/react/utils/has-changed.es.js +0 -19
- package/dist/targets/react/utils/keyframes.cjs.js +0 -38
- package/dist/targets/react/utils/keyframes.es.js +0 -34
- package/dist/targets/react/utils/poses.cjs.js +0 -14
- package/dist/targets/react/utils/poses.es.js +0 -10
- package/dist/targets/react/utils/update-target.cjs.js +0 -20
- package/dist/targets/react/utils/update-target.es.js +0 -16
- package/dist/utils/array.cjs.js +0 -14
- package/dist/utils/array.es.js +0 -9
- package/dist/utils/clamp.cjs.js +0 -7
- package/dist/utils/clamp.es.js +0 -3
- package/dist/utils/is-number.cjs.js +0 -7
- package/dist/utils/is-number.es.js +0 -3
- package/dist/utils/mix.cjs.js +0 -28
- package/dist/utils/mix.es.js +0 -24
- package/dist/utils/noop.cjs.js +0 -9
- package/dist/utils/noop.es.js +0 -4
- package/dist/utils/progress.cjs.js +0 -20
- package/dist/utils/progress.es.js +0 -16
- package/dist/utils/stagger.cjs.js +0 -38
- package/dist/utils/stagger.es.js +0 -32
- package/dist/utils/velocity-per-second.cjs.js +0 -15
- package/dist/utils/velocity-per-second.es.js +0 -11
- package/dist/utils/wrap.cjs.js +0 -10
- package/dist/utils/wrap.es.js +0 -6
- package/types/react-entry.d.ts +0 -2
- package/types/targets/dom/animate-style.d.ts +0 -2
- package/types/targets/dom/animate.d.ts +0 -2
- package/types/targets/dom/data.d.ts +0 -2
- package/types/targets/dom/style.d.ts +0 -3
- package/types/targets/dom/timeline/index.d.ts +0 -15
- package/types/targets/dom/timeline/types.d.ts +0 -13
- package/types/targets/dom/timeline/utils/calc-time.d.ts +0 -2
- package/types/targets/dom/timeline/utils/edit.d.ts +0 -4
- package/types/targets/dom/timeline/utils/sort.d.ts +0 -2
- package/types/targets/dom/types.d.ts +0 -114
- package/types/targets/dom/utils/apply.d.ts +0 -3
- package/types/targets/dom/utils/controls.d.ts +0 -12
- package/types/targets/dom/utils/css-var.d.ts +0 -3
- package/types/targets/dom/utils/defaults.d.ts +0 -8
- package/types/targets/dom/utils/easing.d.ts +0 -6
- package/types/targets/dom/utils/feature-detection.d.ts +0 -8
- package/types/targets/dom/utils/get-style-name.d.ts +0 -1
- package/types/targets/dom/utils/keyframes.d.ts +0 -3
- package/types/targets/dom/utils/options.d.ts +0 -2
- package/types/targets/dom/utils/resolve-elements.d.ts +0 -4
- package/types/targets/dom/utils/stop-animation.d.ts +0 -6
- package/types/targets/dom/utils/time.d.ts +0 -1
- package/types/targets/dom/utils/transforms.d.ts +0 -20
- package/types/targets/js/NumberAnimation.d.ts +0 -24
- package/types/targets/js/easing/cubic-bezier.d.ts +0 -1
- package/types/targets/js/easing/glide/generator.d.ts +0 -5
- package/types/targets/js/easing/glide/index.d.ts +0 -2
- package/types/targets/js/easing/glide/types.d.ts +0 -14
- package/types/targets/js/easing/spring/generator.d.ts +0 -6
- package/types/targets/js/easing/spring/index.d.ts +0 -2
- package/types/targets/js/easing/spring/types.d.ts +0 -10
- package/types/targets/js/easing/steps.d.ts +0 -3
- package/types/targets/js/easing/utils/create-generator-easing.d.ts +0 -3
- package/types/targets/js/easing/utils/get-function.d.ts +0 -3
- package/types/targets/js/easing/utils/has-reached-target.d.ts +0 -1
- package/types/targets/js/easing/utils/pregenerate-keyframes.d.ts +0 -7
- package/types/targets/js/types.d.ts +0 -12
- package/types/targets/js/utils/get-easing.d.ts +0 -1
- package/types/targets/js/utils/interpolate.d.ts +0 -2
- package/types/targets/js/utils/offset.d.ts +0 -2
- package/types/targets/react/animated.d.ts +0 -3
- package/types/targets/react/context.d.ts +0 -3
- package/types/targets/react/hooks/use-animation.d.ts +0 -4
- package/types/targets/react/hooks/use-exit.d.ts +0 -3
- package/types/targets/react/hooks/use-gesture-state.d.ts +0 -4
- package/types/targets/react/hooks/use-hover.d.ts +0 -4
- package/types/targets/react/hooks/use-press.d.ts +0 -4
- package/types/targets/react/hooks/use-viewport.d.ts +0 -4
- package/types/targets/react/index.d.ts +0 -2
- package/types/targets/react/types.d.ts +0 -108
- package/types/targets/react/utils/has-changed.d.ts +0 -2
- package/types/targets/react/utils/keyframes.d.ts +0 -3
- package/types/targets/react/utils/poses.d.ts +0 -2
- package/types/targets/react/utils/supported-elements.d.ts +0 -8
- package/types/targets/react/utils/update-target.d.ts +0 -3
- package/types/utils/array.d.ts +0 -2
- package/types/utils/clamp.d.ts +0 -1
- package/types/utils/interpolate.d.ts +0 -0
- package/types/utils/is-number.d.ts +0 -1
- package/types/utils/mix.d.ts +0 -1
- package/types/utils/noop.d.ts +0 -2
- package/types/utils/progress.d.ts +0 -1
- package/types/utils/stagger.d.ts +0 -12
- package/types/utils/value-types.d.ts +0 -0
- package/types/utils/velocity-per-second.d.ts +0 -1
- package/types/utils/wrap.d.ts +0 -1
package/dist/utils/mix.es.js
DELETED
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Value in range from progress
|
|
3
|
-
|
|
4
|
-
Given a lower limit and an upper limit, we return the value within
|
|
5
|
-
that range as expressed by progress (usually a number from 0 to 1)
|
|
6
|
-
|
|
7
|
-
So progress = 0.5 would change
|
|
8
|
-
|
|
9
|
-
from -------- to
|
|
10
|
-
|
|
11
|
-
to
|
|
12
|
-
|
|
13
|
-
from ---- to
|
|
14
|
-
|
|
15
|
-
E.g. from = 10, to = 20, progress = 0.5 => 15
|
|
16
|
-
|
|
17
|
-
@param [number]: Lower limit of range
|
|
18
|
-
@param [number]: Upper limit of range
|
|
19
|
-
@param [number]: The progress between lower and upper limits expressed 0-1
|
|
20
|
-
@return [number]: Value as calculated from progress within range (not limited within range)
|
|
21
|
-
*/
|
|
22
|
-
const mix = (from, to, progress) => -progress * from + progress * to + from;
|
|
23
|
-
|
|
24
|
-
export { mix };
|
package/dist/utils/noop.cjs.js
DELETED
package/dist/utils/noop.es.js
DELETED
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
Progress within given range
|
|
7
|
-
|
|
8
|
-
Given a lower limit and an upper limit, we return the progress
|
|
9
|
-
(expressed as a number 0-1) represented by the given value.
|
|
10
|
-
|
|
11
|
-
@param [number]: Lower limit
|
|
12
|
-
@param [number]: Upper limit
|
|
13
|
-
@param [number]: Value to find progress within given range
|
|
14
|
-
@return [number]: Progress of value within range as expressed 0-1
|
|
15
|
-
*/
|
|
16
|
-
const progress = (from, to, value) => {
|
|
17
|
-
return to - from === 0 ? 1 : (value - from) / (to - from);
|
|
18
|
-
};
|
|
19
|
-
|
|
20
|
-
exports.progress = progress;
|
|
@@ -1,16 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Progress within given range
|
|
3
|
-
|
|
4
|
-
Given a lower limit and an upper limit, we return the progress
|
|
5
|
-
(expressed as a number 0-1) represented by the given value.
|
|
6
|
-
|
|
7
|
-
@param [number]: Lower limit
|
|
8
|
-
@param [number]: Upper limit
|
|
9
|
-
@param [number]: Value to find progress within given range
|
|
10
|
-
@return [number]: Progress of value within range as expressed 0-1
|
|
11
|
-
*/
|
|
12
|
-
const progress = (from, to, value) => {
|
|
13
|
-
return to - from === 0 ? 1 : (value - from) / (to - from);
|
|
14
|
-
};
|
|
15
|
-
|
|
16
|
-
export { progress };
|
|
@@ -1,38 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
var getFunction = require('../targets/js/easing/utils/get-function.cjs.js');
|
|
6
|
-
var isNumber = require('./is-number.cjs.js');
|
|
7
|
-
|
|
8
|
-
function stagger(duration = 0.1, { start = 0, from = 0, easing } = {}) {
|
|
9
|
-
return (i, total) => {
|
|
10
|
-
const fromIndex = isNumber.isNumber(from) ? from : getFromIndex(from, total);
|
|
11
|
-
const distance = Math.abs(fromIndex - i);
|
|
12
|
-
let delay = duration * distance;
|
|
13
|
-
if (easing) {
|
|
14
|
-
const maxDelay = total * i;
|
|
15
|
-
const easingFunction = getFunction.getEasingFunction(easing);
|
|
16
|
-
delay = easingFunction(delay / maxDelay) * maxDelay;
|
|
17
|
-
}
|
|
18
|
-
return start + delay;
|
|
19
|
-
};
|
|
20
|
-
}
|
|
21
|
-
function getFromIndex(from, total) {
|
|
22
|
-
if (from === "first") {
|
|
23
|
-
return 0;
|
|
24
|
-
}
|
|
25
|
-
else {
|
|
26
|
-
const lastIndex = total - 1;
|
|
27
|
-
return from === "last" ? lastIndex : lastIndex / 2;
|
|
28
|
-
}
|
|
29
|
-
}
|
|
30
|
-
function resolveOption(option, i, total) {
|
|
31
|
-
return typeof option === "function"
|
|
32
|
-
? option(i, total)
|
|
33
|
-
: option;
|
|
34
|
-
}
|
|
35
|
-
|
|
36
|
-
exports.getFromIndex = getFromIndex;
|
|
37
|
-
exports.resolveOption = resolveOption;
|
|
38
|
-
exports.stagger = stagger;
|
package/dist/utils/stagger.es.js
DELETED
|
@@ -1,32 +0,0 @@
|
|
|
1
|
-
import { getEasingFunction } from '../targets/js/easing/utils/get-function.es.js';
|
|
2
|
-
import { isNumber } from './is-number.es.js';
|
|
3
|
-
|
|
4
|
-
function stagger(duration = 0.1, { start = 0, from = 0, easing } = {}) {
|
|
5
|
-
return (i, total) => {
|
|
6
|
-
const fromIndex = isNumber(from) ? from : getFromIndex(from, total);
|
|
7
|
-
const distance = Math.abs(fromIndex - i);
|
|
8
|
-
let delay = duration * distance;
|
|
9
|
-
if (easing) {
|
|
10
|
-
const maxDelay = total * i;
|
|
11
|
-
const easingFunction = getEasingFunction(easing);
|
|
12
|
-
delay = easingFunction(delay / maxDelay) * maxDelay;
|
|
13
|
-
}
|
|
14
|
-
return start + delay;
|
|
15
|
-
};
|
|
16
|
-
}
|
|
17
|
-
function getFromIndex(from, total) {
|
|
18
|
-
if (from === "first") {
|
|
19
|
-
return 0;
|
|
20
|
-
}
|
|
21
|
-
else {
|
|
22
|
-
const lastIndex = total - 1;
|
|
23
|
-
return from === "last" ? lastIndex : lastIndex / 2;
|
|
24
|
-
}
|
|
25
|
-
}
|
|
26
|
-
function resolveOption(option, i, total) {
|
|
27
|
-
return typeof option === "function"
|
|
28
|
-
? option(i, total)
|
|
29
|
-
: option;
|
|
30
|
-
}
|
|
31
|
-
|
|
32
|
-
export { getFromIndex, resolveOption, stagger };
|
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
'use strict';
|
|
2
|
-
|
|
3
|
-
Object.defineProperty(exports, '__esModule', { value: true });
|
|
4
|
-
|
|
5
|
-
/*
|
|
6
|
-
Convert velocity into velocity per second
|
|
7
|
-
|
|
8
|
-
@param [number]: Unit per frame
|
|
9
|
-
@param [number]: Frame duration in ms
|
|
10
|
-
*/
|
|
11
|
-
function velocityPerSecond(velocity, frameDuration) {
|
|
12
|
-
return frameDuration ? velocity * (1000 / frameDuration) : 0;
|
|
13
|
-
}
|
|
14
|
-
|
|
15
|
-
exports.velocityPerSecond = velocityPerSecond;
|
|
@@ -1,11 +0,0 @@
|
|
|
1
|
-
/*
|
|
2
|
-
Convert velocity into velocity per second
|
|
3
|
-
|
|
4
|
-
@param [number]: Unit per frame
|
|
5
|
-
@param [number]: Frame duration in ms
|
|
6
|
-
*/
|
|
7
|
-
function velocityPerSecond(velocity, frameDuration) {
|
|
8
|
-
return frameDuration ? velocity * (1000 / frameDuration) : 0;
|
|
9
|
-
}
|
|
10
|
-
|
|
11
|
-
export { velocityPerSecond };
|
package/dist/utils/wrap.cjs.js
DELETED
package/dist/utils/wrap.es.js
DELETED
package/types/react-entry.d.ts
DELETED
|
@@ -1,15 +0,0 @@
|
|
|
1
|
-
import { AnimationOptions, AnimationOptionsWithOverrides, PlaybackOptions, ValueKeyframesDefinition } from "../types";
|
|
2
|
-
import { TimelineDefinition } from "./types";
|
|
3
|
-
declare type AnimateStyleDefinition = [
|
|
4
|
-
Element,
|
|
5
|
-
string,
|
|
6
|
-
ValueKeyframesDefinition,
|
|
7
|
-
AnimationOptions
|
|
8
|
-
];
|
|
9
|
-
export declare type TimelineOptions = PlaybackOptions & {
|
|
10
|
-
duration?: number;
|
|
11
|
-
defaultOptions?: AnimationOptionsWithOverrides;
|
|
12
|
-
};
|
|
13
|
-
export declare function timeline(definition: TimelineDefinition, options?: TimelineOptions): import("../types").AnimationControls;
|
|
14
|
-
export declare function createAnimationsFromTimeline(definition: TimelineDefinition, { defaultOptions, ...timelineOptions }?: TimelineOptions): AnimateStyleDefinition[];
|
|
15
|
-
export {};
|
|
@@ -1,13 +0,0 @@
|
|
|
1
|
-
import { AcceptedElements, AnimationListOptions, Easing, MotionKeyframesDefinition } from "../types";
|
|
2
|
-
export declare type TimelineSegment = [AcceptedElements, MotionKeyframesDefinition] | [AcceptedElements, MotionKeyframesDefinition, AnimationListOptions];
|
|
3
|
-
export declare type TimelineDefinition = TimelineSegment[];
|
|
4
|
-
export declare type NextTime = number | "<" | `+${number}` | `-${number}` | `${string}`;
|
|
5
|
-
export interface ElementSequence {
|
|
6
|
-
[key: string]: ValueSequence;
|
|
7
|
-
}
|
|
8
|
-
export declare type AbsoluteKeyframe = {
|
|
9
|
-
value: string | number | null;
|
|
10
|
-
at: number;
|
|
11
|
-
easing?: Easing;
|
|
12
|
-
};
|
|
13
|
-
export declare type ValueSequence = AbsoluteKeyframe[];
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { Easing, UnresolvedValueKeyframe } from "../../types";
|
|
2
|
-
import { ValueSequence } from "../types";
|
|
3
|
-
export declare function eraseKeyframes(sequence: ValueSequence, startTime: number, endTime: number): void;
|
|
4
|
-
export declare function addKeyframes(sequence: ValueSequence, keyframes: UnresolvedValueKeyframe[], easing: Easing | Easing[], offset: number[], startTime: number, endTime: number): void;
|
|
@@ -1,114 +0,0 @@
|
|
|
1
|
-
import { OptionResolver } from "../../utils/stagger";
|
|
2
|
-
import { AnimationGenerator, AnimationGeneratorState } from "../js/types";
|
|
3
|
-
import { NextTime } from "./timeline/types";
|
|
4
|
-
export interface AnimationData {
|
|
5
|
-
transforms: string[];
|
|
6
|
-
animations: {
|
|
7
|
-
[key: string]: BasicAnimationControls | undefined;
|
|
8
|
-
};
|
|
9
|
-
generators: {
|
|
10
|
-
[key: string]: AnimationGenerator | undefined;
|
|
11
|
-
};
|
|
12
|
-
prevGeneratorState: {
|
|
13
|
-
[key: string]: AnimationGeneratorState | undefined;
|
|
14
|
-
};
|
|
15
|
-
}
|
|
16
|
-
export declare type Omit<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
|
17
|
-
export declare type AcceptedElements = Element | Element[] | NodeListOf<Element> | string;
|
|
18
|
-
export declare type BezierDefinition = [number, number, number, number];
|
|
19
|
-
export interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction"> {
|
|
20
|
-
x: number;
|
|
21
|
-
y: number;
|
|
22
|
-
z: number;
|
|
23
|
-
rotateX: number;
|
|
24
|
-
rotateY: number;
|
|
25
|
-
rotateZ: number;
|
|
26
|
-
scaleX: number;
|
|
27
|
-
scaleY: number;
|
|
28
|
-
scaleZ: number;
|
|
29
|
-
skewX: number;
|
|
30
|
-
skewY: number;
|
|
31
|
-
}
|
|
32
|
-
export declare type StyleAnimationOptions = {
|
|
33
|
-
[K in keyof CSSStyleDeclarationWithTransform]?: AnimationOptions;
|
|
34
|
-
};
|
|
35
|
-
export declare type VariableAnimationOptions = {
|
|
36
|
-
[key: `--${string}`]: AnimationOptions;
|
|
37
|
-
};
|
|
38
|
-
export declare type AnimationOptionsWithOverrides = StyleAnimationOptions & VariableAnimationOptions & AnimationOptions;
|
|
39
|
-
export declare type ValueKeyframe = string | number;
|
|
40
|
-
export declare type UnresolvedValueKeyframe = ValueKeyframe | null;
|
|
41
|
-
export declare type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
|
|
42
|
-
export declare type StyleKeyframes = {
|
|
43
|
-
[K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframe | ValueKeyframe[];
|
|
44
|
-
};
|
|
45
|
-
export declare type VariableKeyframes = {
|
|
46
|
-
[key: `--${string}`]: ValueKeyframe | ValueKeyframe[];
|
|
47
|
-
};
|
|
48
|
-
export declare type MotionKeyframes = StyleKeyframes & VariableKeyframes;
|
|
49
|
-
export declare type StyleKeyframesDefinition = {
|
|
50
|
-
[K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
|
|
51
|
-
};
|
|
52
|
-
export declare type VariableKeyframesDefinition = {
|
|
53
|
-
[key: `--${string}`]: ValueKeyframesDefinition;
|
|
54
|
-
};
|
|
55
|
-
export declare type MotionKeyframesDefinition = StyleKeyframesDefinition & VariableKeyframesDefinition;
|
|
56
|
-
export declare type CustomAnimationSettings = {
|
|
57
|
-
easing: Easing;
|
|
58
|
-
keyframes?: number[];
|
|
59
|
-
duration?: number;
|
|
60
|
-
};
|
|
61
|
-
export declare type CustomEasing = {
|
|
62
|
-
createAnimation: (keyframes: UnresolvedValueKeyframe[], getOrigin: () => string, isTransform: boolean, name?: string, data?: AnimationData) => CustomAnimationSettings;
|
|
63
|
-
};
|
|
64
|
-
export declare type Easing = "linear" | "ease" | "ease-in" | "ease-out" | "ease-in-out" | "steps-start" | "steps-end" | `steps(${number}, ${"start" | "end"})` | BezierDefinition;
|
|
65
|
-
export declare type KeyframeOptions = {
|
|
66
|
-
duration?: number;
|
|
67
|
-
easing?: CustomEasing | Easing | Easing[];
|
|
68
|
-
offset?: number[];
|
|
69
|
-
};
|
|
70
|
-
export declare type PlaybackOptions = {
|
|
71
|
-
delay?: number;
|
|
72
|
-
endDelay?: number;
|
|
73
|
-
repeat?: number;
|
|
74
|
-
direction?: "normal" | "reverse" | "alternate" | "alternate-reverse";
|
|
75
|
-
};
|
|
76
|
-
export declare type AnimationOptions = KeyframeOptions & PlaybackOptions & {
|
|
77
|
-
allowWebkitAcceleration?: boolean;
|
|
78
|
-
};
|
|
79
|
-
export interface AnimationWithCommitStyles extends Animation {
|
|
80
|
-
commitStyles: () => void;
|
|
81
|
-
}
|
|
82
|
-
export declare type PlayState = "idle" | "running" | "paused" | "finished";
|
|
83
|
-
export interface BasicAnimationControls {
|
|
84
|
-
pause: () => void;
|
|
85
|
-
play: () => void;
|
|
86
|
-
commitStyles: () => void;
|
|
87
|
-
cancel: () => void;
|
|
88
|
-
playState: PlayState;
|
|
89
|
-
}
|
|
90
|
-
export declare type AnimationListOptions = Omit<AnimationOptionsWithOverrides, "delay"> & {
|
|
91
|
-
delay?: number | OptionResolver<number>;
|
|
92
|
-
at?: NextTime;
|
|
93
|
-
};
|
|
94
|
-
export interface AnimationControls {
|
|
95
|
-
play: VoidFunction;
|
|
96
|
-
pause: VoidFunction;
|
|
97
|
-
stop: VoidFunction;
|
|
98
|
-
finish: VoidFunction;
|
|
99
|
-
reverse: VoidFunction;
|
|
100
|
-
cancel: VoidFunction;
|
|
101
|
-
finished: Promise<any>;
|
|
102
|
-
currentTime: number | null;
|
|
103
|
-
duration: number;
|
|
104
|
-
playbackRate: number;
|
|
105
|
-
}
|
|
106
|
-
export interface CssPropertyDefinition {
|
|
107
|
-
syntax: `<${string}>`;
|
|
108
|
-
initialValue: string | number;
|
|
109
|
-
toDefaultUnit: (v: number) => string | number;
|
|
110
|
-
}
|
|
111
|
-
export declare type CssPropertyDefinitionMap = {
|
|
112
|
-
[key: string]: CssPropertyDefinition;
|
|
113
|
-
};
|
|
114
|
-
export declare type AnimationFactory = () => BasicAnimationControls | undefined;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
import { AnimationControls, AnimationFactory, AnimationWithCommitStyles } from "../types";
|
|
2
|
-
interface AnimationState {
|
|
3
|
-
animations: AnimationWithCommitStyles[];
|
|
4
|
-
duration: number;
|
|
5
|
-
finished?: Promise<any>;
|
|
6
|
-
}
|
|
7
|
-
export declare const createAnimations: (animationFactory: AnimationFactory[], duration: number) => AnimationControls;
|
|
8
|
-
export declare const controls: {
|
|
9
|
-
get: (target: AnimationState, key: string) => number | Promise<any> | (() => void) | undefined;
|
|
10
|
-
set: (target: AnimationState, key: string, value: number) => boolean;
|
|
11
|
-
};
|
|
12
|
-
export {};
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { BezierDefinition, CustomEasing, Easing } from "../types";
|
|
2
|
-
export declare const isCubicBezier: (easing: Easing | Easing[]) => easing is BezierDefinition;
|
|
3
|
-
export declare const isEasingList: (easing: Easing | Easing[]) => easing is Easing[];
|
|
4
|
-
export declare const isCustomEasing: (easing: Easing | Easing[] | CustomEasing) => easing is CustomEasing;
|
|
5
|
-
export declare const convertEasing: (easing: Easing) => string;
|
|
6
|
-
export declare const cubicBezierAsString: ([a, b, c, d]: BezierDefinition) => string;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function getStyleName(key: string): string;
|
|
@@ -1,3 +0,0 @@
|
|
|
1
|
-
import { UnresolvedValueKeyframe, ValueKeyframe } from "../types";
|
|
2
|
-
export declare function hydrateKeyframes(keyframes: UnresolvedValueKeyframe[], readInitialValue: () => string | number): ValueKeyframe[];
|
|
3
|
-
export declare const keyframesList: (keyframes: UnresolvedValueKeyframe | UnresolvedValueKeyframe[]) => UnresolvedValueKeyframe[];
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare const ms: (seconds: number) => number;
|
|
@@ -1,20 +0,0 @@
|
|
|
1
|
-
import { CssPropertyDefinition } from "../types";
|
|
2
|
-
/**
|
|
3
|
-
* A list of all transformable axes. We'll use this list to generated a version
|
|
4
|
-
* of each axes for each transform.
|
|
5
|
-
*/
|
|
6
|
-
export declare const axes: string[];
|
|
7
|
-
export declare const transformAlias: {
|
|
8
|
-
x: string;
|
|
9
|
-
y: string;
|
|
10
|
-
z: string;
|
|
11
|
-
};
|
|
12
|
-
export declare const transformDefinitions: Map<string, CssPropertyDefinition>;
|
|
13
|
-
export declare const asTransformCssVar: (name: string) => string;
|
|
14
|
-
/**
|
|
15
|
-
* A function to use with Array.sort to sort transform keys by their default order.
|
|
16
|
-
*/
|
|
17
|
-
export declare const compareTransformOrder: (a: string, b: string) => number;
|
|
18
|
-
export declare const isTransform: (name: string) => boolean;
|
|
19
|
-
export declare const addTransformToElement: (element: HTMLElement, name: string) => void;
|
|
20
|
-
export declare const buildTransformTemplate: (transforms: string[]) => string;
|
|
@@ -1,24 +0,0 @@
|
|
|
1
|
-
import { AnimationControls, AnimationOptions } from "../dom/types";
|
|
2
|
-
export declare class NumberAnimation implements Omit<AnimationControls, "stop" | "duration"> {
|
|
3
|
-
private resolve;
|
|
4
|
-
private reject;
|
|
5
|
-
private startTime;
|
|
6
|
-
private pauseTime;
|
|
7
|
-
private rate;
|
|
8
|
-
private tick;
|
|
9
|
-
private t;
|
|
10
|
-
private cancelTimestamp;
|
|
11
|
-
playState: AnimationPlayState;
|
|
12
|
-
constructor(output: (v: number) => void, keyframes?: number[], { easing, duration, delay, endDelay, repeat, offset, direction, }?: AnimationOptions);
|
|
13
|
-
finished: Promise<unknown>;
|
|
14
|
-
play(): void;
|
|
15
|
-
pause(): void;
|
|
16
|
-
finish(): void;
|
|
17
|
-
cancel(): void;
|
|
18
|
-
reverse(): void;
|
|
19
|
-
commitStyles(): void;
|
|
20
|
-
get currentTime(): number;
|
|
21
|
-
set currentTime(t: number);
|
|
22
|
-
get playbackRate(): number;
|
|
23
|
-
set playbackRate(rate: number);
|
|
24
|
-
}
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function cubicBezier(mX1: number, mY1: number, mX2: number, mY2: number): (t: number) => number;
|
|
@@ -1,5 +0,0 @@
|
|
|
1
|
-
import { GlideOptions } from "./types";
|
|
2
|
-
import { AnimationGeneratorState } from "../../types";
|
|
3
|
-
export declare const createGlideGenerator: ({ from, velocity, power, decay, bounceDamping, bounceStiffness, changeTarget, min, max, restDistance, restSpeed, }: GlideOptions) => {
|
|
4
|
-
next: (t: number) => AnimationGeneratorState;
|
|
5
|
-
};
|
|
@@ -1,14 +0,0 @@
|
|
|
1
|
-
export interface GlideOptions {
|
|
2
|
-
power?: number;
|
|
3
|
-
decay?: number;
|
|
4
|
-
changeTarget?: (v: number) => number;
|
|
5
|
-
max?: number;
|
|
6
|
-
min?: number;
|
|
7
|
-
bounceDamping?: number;
|
|
8
|
-
bounceStiffness?: number;
|
|
9
|
-
restSpeed?: number;
|
|
10
|
-
restDistance?: number;
|
|
11
|
-
from?: number;
|
|
12
|
-
to?: number;
|
|
13
|
-
velocity?: number;
|
|
14
|
-
}
|
|
@@ -1,6 +0,0 @@
|
|
|
1
|
-
import { AnimationGenerator } from "../../types";
|
|
2
|
-
import { SpringOptions } from "./types";
|
|
3
|
-
export declare const calcDampingRatio: (stiffness?: number, damping?: number, mass?: number) => number;
|
|
4
|
-
export declare const calcAngularFreq: (undampedFreq: number, dampingRatio: number) => number;
|
|
5
|
-
export declare const createSpringGenerator: ({ stiffness, damping, mass, from, to, velocity, restSpeed, restDistance, }?: SpringOptions) => AnimationGenerator;
|
|
6
|
-
export declare function calcVelocity(resolveValue: (v: number) => number, t: number, current: number): number;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function hasReachedTarget(origin: number, target: number, current: number): boolean;
|
|
@@ -1,12 +0,0 @@
|
|
|
1
|
-
export declare type EasingFunction = (v: number) => number;
|
|
2
|
-
export declare type AnimationGeneratorState = {
|
|
3
|
-
value: number;
|
|
4
|
-
target: number;
|
|
5
|
-
done: boolean;
|
|
6
|
-
velocity: number;
|
|
7
|
-
hasReachedTarget: boolean;
|
|
8
|
-
};
|
|
9
|
-
export declare type AnimationGenerator = {
|
|
10
|
-
next: (t: number) => AnimationGeneratorState;
|
|
11
|
-
};
|
|
12
|
-
export declare type AnimationGeneratorFactory<Options> = (options: Options) => AnimationGenerator;
|
|
@@ -1 +0,0 @@
|
|
|
1
|
-
export declare function getEasingForSegment<T>(easing: T | T[], i: number): any;
|
|
@@ -1,4 +0,0 @@
|
|
|
1
|
-
import { AnimationOptionsWithOverrides, MotionKeyframes } from "../../dom/types";
|
|
2
|
-
import { AnimationCallback, MotionCSSProperties } from "../types";
|
|
3
|
-
import { RefObject } from "react";
|
|
4
|
-
export declare function useAnimation(ref: RefObject<HTMLElement>, initial: MotionKeyframes | MotionCSSProperties, target: MotionKeyframes, options: AnimationOptionsWithOverrides, onStart?: AnimationCallback, onComplete?: AnimationCallback): void;
|