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.
Files changed (210) hide show
  1. package/README.md +0 -19
  2. package/dist/main.cjs.js +11 -13
  3. package/dist/main.es.js +7 -6
  4. package/dist/motion.min.js +1 -1
  5. package/dist/motion.umd.js +412 -16
  6. package/dist/react.cjs.js +7 -2
  7. package/dist/react.es.js +1 -1
  8. package/dist/size-index.js +1 -0
  9. package/lib/index.js +5 -0
  10. package/lib/index.js.map +1 -0
  11. package/lib/react.js +2 -0
  12. package/lib/react.js.map +1 -0
  13. package/lib/vue.js +2 -0
  14. package/lib/vue.js.map +1 -0
  15. package/package.json +16 -134
  16. package/react/package.json +1 -1
  17. package/types/index.d.ts +3 -7
  18. package/types/index.d.ts.map +1 -0
  19. package/types/react.d.ts +2 -0
  20. package/types/react.d.ts.map +1 -0
  21. package/types/vue.d.ts +2 -0
  22. package/types/vue.d.ts.map +1 -0
  23. package/CHANGELOG.md +0 -97
  24. package/dist/size-animate-dom.js +0 -1
  25. package/dist/size-animate-style.js +0 -1
  26. package/dist/size-react.js +0 -1
  27. package/dist/size-spring.js +0 -1
  28. package/dist/size-timeline-dom.js +0 -1
  29. package/dist/size-webpack-animate.js +0 -1
  30. package/dist/targets/dom/animate-style.cjs.js +0 -182
  31. package/dist/targets/dom/animate-style.es.js +0 -178
  32. package/dist/targets/dom/animate.cjs.js +0 -42
  33. package/dist/targets/dom/animate.es.js +0 -38
  34. package/dist/targets/dom/data.cjs.js +0 -18
  35. package/dist/targets/dom/data.es.js +0 -14
  36. package/dist/targets/dom/style.cjs.js +0 -22
  37. package/dist/targets/dom/style.es.js +0 -18
  38. package/dist/targets/dom/timeline/index.cjs.js +0 -174
  39. package/dist/targets/dom/timeline/index.es.js +0 -169
  40. package/dist/targets/dom/timeline/utils/calc-time.cjs.js +0 -23
  41. package/dist/targets/dom/timeline/utils/calc-time.es.js +0 -19
  42. package/dist/targets/dom/timeline/utils/edit.cjs.js +0 -36
  43. package/dist/targets/dom/timeline/utils/edit.es.js +0 -31
  44. package/dist/targets/dom/timeline/utils/sort.cjs.js +0 -14
  45. package/dist/targets/dom/timeline/utils/sort.es.js +0 -10
  46. package/dist/targets/dom/utils/apply.cjs.js +0 -9
  47. package/dist/targets/dom/utils/apply.es.js +0 -4
  48. package/dist/targets/dom/utils/controls.cjs.js +0 -59
  49. package/dist/targets/dom/utils/controls.es.js +0 -54
  50. package/dist/targets/dom/utils/css-var.cjs.js +0 -29
  51. package/dist/targets/dom/utils/css-var.es.js +0 -23
  52. package/dist/targets/dom/utils/defaults.cjs.js +0 -13
  53. package/dist/targets/dom/utils/defaults.es.js +0 -9
  54. package/dist/targets/dom/utils/easing.cjs.js +0 -18
  55. package/dist/targets/dom/utils/easing.es.js +0 -10
  56. package/dist/targets/dom/utils/feature-detection.cjs.js +0 -31
  57. package/dist/targets/dom/utils/feature-detection.es.js +0 -27
  58. package/dist/targets/dom/utils/get-style-name.cjs.js +0 -13
  59. package/dist/targets/dom/utils/get-style-name.es.js +0 -9
  60. package/dist/targets/dom/utils/keyframes.cjs.js +0 -16
  61. package/dist/targets/dom/utils/keyframes.es.js +0 -11
  62. package/dist/targets/dom/utils/options.cjs.js +0 -13
  63. package/dist/targets/dom/utils/options.es.js +0 -9
  64. package/dist/targets/dom/utils/resolve-elements.cjs.js +0 -22
  65. package/dist/targets/dom/utils/resolve-elements.es.js +0 -18
  66. package/dist/targets/dom/utils/stop-animation.cjs.js +0 -19
  67. package/dist/targets/dom/utils/stop-animation.es.js +0 -15
  68. package/dist/targets/dom/utils/time.cjs.js +0 -7
  69. package/dist/targets/dom/utils/time.es.js +0 -3
  70. package/dist/targets/dom/utils/transforms.cjs.js +0 -85
  71. package/dist/targets/dom/utils/transforms.es.js +0 -74
  72. package/dist/targets/js/NumberAnimation.cjs.js +0 -144
  73. package/dist/targets/js/NumberAnimation.es.js +0 -140
  74. package/dist/targets/js/easing/cubic-bezier.cjs.js +0 -57
  75. package/dist/targets/js/easing/cubic-bezier.es.js +0 -53
  76. package/dist/targets/js/easing/glide/generator.cjs.js +0 -99
  77. package/dist/targets/js/easing/glide/generator.es.js +0 -95
  78. package/dist/targets/js/easing/glide/index.cjs.js +0 -10
  79. package/dist/targets/js/easing/glide/index.es.js +0 -6
  80. package/dist/targets/js/easing/spring/generator.cjs.js +0 -64
  81. package/dist/targets/js/easing/spring/generator.es.js +0 -57
  82. package/dist/targets/js/easing/spring/index.cjs.js +0 -10
  83. package/dist/targets/js/easing/spring/index.es.js +0 -6
  84. package/dist/targets/js/easing/steps.cjs.js +0 -15
  85. package/dist/targets/js/easing/steps.es.js +0 -11
  86. package/dist/targets/js/easing/utils/create-generator-easing.cjs.js +0 -71
  87. package/dist/targets/js/easing/utils/create-generator-easing.es.js +0 -67
  88. package/dist/targets/js/easing/utils/get-function.cjs.js +0 -37
  89. package/dist/targets/js/easing/utils/get-function.es.js +0 -33
  90. package/dist/targets/js/easing/utils/has-reached-target.cjs.js +0 -10
  91. package/dist/targets/js/easing/utils/has-reached-target.es.js +0 -6
  92. package/dist/targets/js/easing/utils/pregenerate-keyframes.cjs.js +0 -34
  93. package/dist/targets/js/easing/utils/pregenerate-keyframes.es.js +0 -30
  94. package/dist/targets/js/utils/get-easing.cjs.js +0 -14
  95. package/dist/targets/js/utils/get-easing.es.js +0 -10
  96. package/dist/targets/js/utils/interpolate.cjs.js +0 -35
  97. package/dist/targets/js/utils/interpolate.es.js +0 -31
  98. package/dist/targets/js/utils/offset.cjs.js +0 -22
  99. package/dist/targets/js/utils/offset.es.js +0 -17
  100. package/dist/targets/react/animated.cjs.js +0 -126
  101. package/dist/targets/react/animated.es.js +0 -101
  102. package/dist/targets/react/context.cjs.js +0 -9
  103. package/dist/targets/react/context.es.js +0 -5
  104. package/dist/targets/react/hooks/use-animation.cjs.js +0 -47
  105. package/dist/targets/react/hooks/use-animation.es.js +0 -43
  106. package/dist/targets/react/hooks/use-exit.cjs.js +0 -27
  107. package/dist/targets/react/hooks/use-exit.es.js +0 -23
  108. package/dist/targets/react/hooks/use-gesture-state.cjs.js +0 -17
  109. package/dist/targets/react/hooks/use-gesture-state.es.js +0 -13
  110. package/dist/targets/react/hooks/use-hover.cjs.js +0 -24
  111. package/dist/targets/react/hooks/use-hover.es.js +0 -20
  112. package/dist/targets/react/hooks/use-press.cjs.js +0 -25
  113. package/dist/targets/react/hooks/use-press.es.js +0 -21
  114. package/dist/targets/react/hooks/use-viewport.cjs.js +0 -37
  115. package/dist/targets/react/hooks/use-viewport.es.js +0 -33
  116. package/dist/targets/react/index.cjs.js +0 -17
  117. package/dist/targets/react/index.es.js +0 -13
  118. package/dist/targets/react/utils/has-changed.cjs.js +0 -24
  119. package/dist/targets/react/utils/has-changed.es.js +0 -19
  120. package/dist/targets/react/utils/keyframes.cjs.js +0 -38
  121. package/dist/targets/react/utils/keyframes.es.js +0 -34
  122. package/dist/targets/react/utils/poses.cjs.js +0 -14
  123. package/dist/targets/react/utils/poses.es.js +0 -10
  124. package/dist/targets/react/utils/update-target.cjs.js +0 -20
  125. package/dist/targets/react/utils/update-target.es.js +0 -16
  126. package/dist/utils/array.cjs.js +0 -14
  127. package/dist/utils/array.es.js +0 -9
  128. package/dist/utils/clamp.cjs.js +0 -7
  129. package/dist/utils/clamp.es.js +0 -3
  130. package/dist/utils/is-number.cjs.js +0 -7
  131. package/dist/utils/is-number.es.js +0 -3
  132. package/dist/utils/mix.cjs.js +0 -28
  133. package/dist/utils/mix.es.js +0 -24
  134. package/dist/utils/noop.cjs.js +0 -9
  135. package/dist/utils/noop.es.js +0 -4
  136. package/dist/utils/progress.cjs.js +0 -20
  137. package/dist/utils/progress.es.js +0 -16
  138. package/dist/utils/stagger.cjs.js +0 -38
  139. package/dist/utils/stagger.es.js +0 -32
  140. package/dist/utils/velocity-per-second.cjs.js +0 -15
  141. package/dist/utils/velocity-per-second.es.js +0 -11
  142. package/dist/utils/wrap.cjs.js +0 -10
  143. package/dist/utils/wrap.es.js +0 -6
  144. package/types/react-entry.d.ts +0 -2
  145. package/types/targets/dom/animate-style.d.ts +0 -2
  146. package/types/targets/dom/animate.d.ts +0 -2
  147. package/types/targets/dom/data.d.ts +0 -2
  148. package/types/targets/dom/style.d.ts +0 -3
  149. package/types/targets/dom/timeline/index.d.ts +0 -15
  150. package/types/targets/dom/timeline/types.d.ts +0 -13
  151. package/types/targets/dom/timeline/utils/calc-time.d.ts +0 -2
  152. package/types/targets/dom/timeline/utils/edit.d.ts +0 -4
  153. package/types/targets/dom/timeline/utils/sort.d.ts +0 -2
  154. package/types/targets/dom/types.d.ts +0 -114
  155. package/types/targets/dom/utils/apply.d.ts +0 -3
  156. package/types/targets/dom/utils/controls.d.ts +0 -12
  157. package/types/targets/dom/utils/css-var.d.ts +0 -3
  158. package/types/targets/dom/utils/defaults.d.ts +0 -8
  159. package/types/targets/dom/utils/easing.d.ts +0 -6
  160. package/types/targets/dom/utils/feature-detection.d.ts +0 -8
  161. package/types/targets/dom/utils/get-style-name.d.ts +0 -1
  162. package/types/targets/dom/utils/keyframes.d.ts +0 -3
  163. package/types/targets/dom/utils/options.d.ts +0 -2
  164. package/types/targets/dom/utils/resolve-elements.d.ts +0 -4
  165. package/types/targets/dom/utils/stop-animation.d.ts +0 -6
  166. package/types/targets/dom/utils/time.d.ts +0 -1
  167. package/types/targets/dom/utils/transforms.d.ts +0 -20
  168. package/types/targets/js/NumberAnimation.d.ts +0 -24
  169. package/types/targets/js/easing/cubic-bezier.d.ts +0 -1
  170. package/types/targets/js/easing/glide/generator.d.ts +0 -5
  171. package/types/targets/js/easing/glide/index.d.ts +0 -2
  172. package/types/targets/js/easing/glide/types.d.ts +0 -14
  173. package/types/targets/js/easing/spring/generator.d.ts +0 -6
  174. package/types/targets/js/easing/spring/index.d.ts +0 -2
  175. package/types/targets/js/easing/spring/types.d.ts +0 -10
  176. package/types/targets/js/easing/steps.d.ts +0 -3
  177. package/types/targets/js/easing/utils/create-generator-easing.d.ts +0 -3
  178. package/types/targets/js/easing/utils/get-function.d.ts +0 -3
  179. package/types/targets/js/easing/utils/has-reached-target.d.ts +0 -1
  180. package/types/targets/js/easing/utils/pregenerate-keyframes.d.ts +0 -7
  181. package/types/targets/js/types.d.ts +0 -12
  182. package/types/targets/js/utils/get-easing.d.ts +0 -1
  183. package/types/targets/js/utils/interpolate.d.ts +0 -2
  184. package/types/targets/js/utils/offset.d.ts +0 -2
  185. package/types/targets/react/animated.d.ts +0 -3
  186. package/types/targets/react/context.d.ts +0 -3
  187. package/types/targets/react/hooks/use-animation.d.ts +0 -4
  188. package/types/targets/react/hooks/use-exit.d.ts +0 -3
  189. package/types/targets/react/hooks/use-gesture-state.d.ts +0 -4
  190. package/types/targets/react/hooks/use-hover.d.ts +0 -4
  191. package/types/targets/react/hooks/use-press.d.ts +0 -4
  192. package/types/targets/react/hooks/use-viewport.d.ts +0 -4
  193. package/types/targets/react/index.d.ts +0 -2
  194. package/types/targets/react/types.d.ts +0 -108
  195. package/types/targets/react/utils/has-changed.d.ts +0 -2
  196. package/types/targets/react/utils/keyframes.d.ts +0 -3
  197. package/types/targets/react/utils/poses.d.ts +0 -2
  198. package/types/targets/react/utils/supported-elements.d.ts +0 -8
  199. package/types/targets/react/utils/update-target.d.ts +0 -3
  200. package/types/utils/array.d.ts +0 -2
  201. package/types/utils/clamp.d.ts +0 -1
  202. package/types/utils/interpolate.d.ts +0 -0
  203. package/types/utils/is-number.d.ts +0 -1
  204. package/types/utils/mix.d.ts +0 -1
  205. package/types/utils/noop.d.ts +0 -2
  206. package/types/utils/progress.d.ts +0 -1
  207. package/types/utils/stagger.d.ts +0 -12
  208. package/types/utils/value-types.d.ts +0 -0
  209. package/types/utils/velocity-per-second.d.ts +0 -1
  210. package/types/utils/wrap.d.ts +0 -1
@@ -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 };
@@ -1,9 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const noop = () => { };
6
- const noopReturn = (v) => v;
7
-
8
- exports.noop = noop;
9
- exports.noopReturn = noopReturn;
@@ -1,4 +0,0 @@
1
- const noop = () => { };
2
- const noopReturn = (v) => v;
3
-
4
- export { noop, noopReturn };
@@ -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;
@@ -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 };
@@ -1,10 +0,0 @@
1
- 'use strict';
2
-
3
- Object.defineProperty(exports, '__esModule', { value: true });
4
-
5
- const wrap = (min, max, v) => {
6
- const rangeSize = max - min;
7
- return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
8
- };
9
-
10
- exports.wrap = wrap;
@@ -1,6 +0,0 @@
1
- const wrap = (min, max, v) => {
2
- const rangeSize = max - min;
3
- return ((((v - min) % rangeSize) + rangeSize) % rangeSize) + min;
4
- };
5
-
6
- export { wrap };
@@ -1,2 +0,0 @@
1
- export { animated } from "./targets/react/index";
2
- export * from "./targets/react/types";
@@ -1,2 +0,0 @@
1
- import { AnimationFactory, AnimationOptions, ValueKeyframesDefinition } from "./types";
2
- export declare function animateStyle(element: Element, key: string, keyframesDefinition: ValueKeyframesDefinition, options?: AnimationOptions): AnimationFactory;
@@ -1,2 +0,0 @@
1
- import { AcceptedElements, AnimationControls, AnimationListOptions, MotionKeyframesDefinition } from "./types";
2
- export declare function animate(elements: AcceptedElements, keyframes: MotionKeyframesDefinition, options?: AnimationListOptions): AnimationControls;
@@ -1,2 +0,0 @@
1
- import { AnimationData } from "./types";
2
- export declare function getAnimationData(element: Element): AnimationData;
@@ -1,3 +0,0 @@
1
- export declare const style: {
2
- get: (element: Element, name: string) => string | undefined;
3
- };
@@ -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,2 +0,0 @@
1
- import { NextTime } from "../types";
2
- export declare function calcNextTime(current: number, next: NextTime, prev: number, labels: Map<string, number>): number;
@@ -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,2 +0,0 @@
1
- import { AbsoluteKeyframe } from "../types";
2
- export declare function compareByTime(a: AbsoluteKeyframe, b: AbsoluteKeyframe): number;
@@ -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,3 +0,0 @@
1
- export declare type RendererFactory = (element: Element, name: string) => (latest: string | number) => void;
2
- export declare const cssVariableRenderer: RendererFactory;
3
- export declare const styleRenderer: RendererFactory;
@@ -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,3 +0,0 @@
1
- export declare const isCssVar: (name: string) => boolean;
2
- export declare const registeredProperties: Set<string>;
3
- export declare function registerCssVariable(name: string): void;
@@ -1,8 +0,0 @@
1
- import { Easing } from "../types";
2
- export declare const defaults: {
3
- duration: number;
4
- delay: number;
5
- endDelay: number;
6
- repeat: number;
7
- easing: Easing;
8
- };
@@ -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,8 +0,0 @@
1
- interface FeatureTests {
2
- cssRegisterProperty: () => boolean;
3
- waapi: () => boolean;
4
- partialKeyframes: () => boolean;
5
- finished: () => boolean;
6
- }
7
- export declare const supports: FeatureTests;
8
- export {};
@@ -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,2 +0,0 @@
1
- import { AnimationListOptions, AnimationOptions, AnimationOptionsWithOverrides } from "../types";
2
- export declare const getOptions: (options: AnimationOptionsWithOverrides | AnimationListOptions, key: string) => AnimationOptions;
@@ -1,4 +0,0 @@
1
- import { AcceptedElements } from "../types";
2
- export declare function resolveElements(elements: AcceptedElements, selectorCache?: {
3
- [key: string]: NodeListOf<Element>;
4
- }): Element[];
@@ -1,6 +0,0 @@
1
- import { BasicAnimationControls } from "../types";
2
- export interface WithCommitStyles {
3
- commitStyles: VoidFunction;
4
- cancel: VoidFunction;
5
- }
6
- export declare function stopAnimation(animation?: BasicAnimationControls): void;
@@ -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,2 +0,0 @@
1
- import { GlideOptions } from "./types";
2
- export declare const glide: (options?: GlideOptions) => import("../../../..").CustomEasing;
@@ -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,2 +0,0 @@
1
- import { SpringOptions } from "./types";
2
- export declare const spring: (options?: SpringOptions) => import("../../../..").CustomEasing;
@@ -1,10 +0,0 @@
1
- export interface SpringOptions {
2
- stiffness?: number;
3
- damping?: number;
4
- mass?: number;
5
- restSpeed?: number;
6
- restDistance?: number;
7
- from?: number;
8
- to?: number;
9
- velocity?: number;
10
- }
@@ -1,3 +0,0 @@
1
- import { EasingFunction } from "../types";
2
- export declare type Direction = "start" | "end";
3
- export declare const steps: (steps: number, direction?: Direction) => EasingFunction;
@@ -1,3 +0,0 @@
1
- import { CustomEasing } from "../../../..";
2
- import { AnimationGeneratorFactory } from "../../types";
3
- export declare function createGeneratorEasing<Options extends {} = {}>(createGenerator: AnimationGeneratorFactory<Options>): (options?: Options) => CustomEasing;
@@ -1,3 +0,0 @@
1
- import { Easing } from "../../../dom/types";
2
- import { EasingFunction } from "../../types";
3
- export declare function getEasingFunction(definition: Easing | EasingFunction): EasingFunction;
@@ -1 +0,0 @@
1
- export declare function hasReachedTarget(origin: number, target: number, current: number): boolean;
@@ -1,7 +0,0 @@
1
- import { AnimationGenerator } from "../../types";
2
- export interface KeyframesMetadata {
3
- keyframes: number[];
4
- duration: number;
5
- overshootDuration: number;
6
- }
7
- export declare function pregenerateKeyframes(generator: AnimationGenerator): KeyframesMetadata;
@@ -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,2 +0,0 @@
1
- import { EasingFunction } from "../types";
2
- export declare function slowInterpolateNumbers(output: number[], input?: number[], easing?: EasingFunction | EasingFunction[]): (t: number) => number;
@@ -1,2 +0,0 @@
1
- export declare function fillOffset(offset: number[], remaining: number): void;
2
- export declare function defaultOffset(length: number): number[];
@@ -1,3 +0,0 @@
1
- import * as React from "react";
2
- import { AnimatedProps } from "./types";
3
- export declare function createAnimatedComponent<Props extends {}>(Component: string): React.ForwardRefExoticComponent<React.PropsWithoutRef<Props & AnimatedProps> & React.RefAttributes<Element>>;
@@ -1,3 +0,0 @@
1
- /// <reference types="react" />
2
- import { AnimationContextProps } from "./types";
3
- export declare const AnimationContext: import("react").Context<AnimationContextProps>;
@@ -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;