index.d.ts 41 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798991001011021031041051061071081091101111121131141151161171181191201211221231241251261271281291301311321331341351361371381391401411421431441451461471481491501511521531541551561571581591601611621631641651661671681691701711721731741751761771781791801811821831841851861871881891901911921931941951961971981992002012022032042052062072082092102112122132142152162172182192202212222232242252262272282292302312322332342352362372382392402412422432442452462472482492502512522532542552562572582592602612622632642652662672682692702712722732742752762772782792802812822832842852862872882892902912922932942952962972982993003013023033043053063073083093103113123133143153163173183193203213223233243253263273283293303313323333343353363373383393403413423433443453463473483493503513523533543553563573583593603613623633643653663673683693703713723733743753763773783793803813823833843853863873883893903913923933943953963973983994004014024034044054064074084094104114124134144154164174184194204214224234244254264274284294304314324334344354364374384394404414424434444454464474484494504514524534544554564574584594604614624634644654664674684694704714724734744754764774784794804814824834844854864874884894904914924934944954964974984995005015025035045055065075085095105115125135145155165175185195205215225235245255265275285295305315325335345355365375385395405415425435445455465475485495505515525535545555565575585595605615625635645655665675685695705715725735745755765775785795805815825835845855865875885895905915925935945955965975985996006016026036046056066076086096106116126136146156166176186196206216226236246256266276286296306316326336346356366376386396406416426436446456466476486496506516526536546556566576586596606616626636646656666676686696706716726736746756766776786796806816826836846856866876886896906916926936946956966976986997007017027037047057067077087097107117127137147157167177187197207217227237247257267277287297307317327337347357367377387397407417427437447457467477487497507517527537547557567577587597607617627637647657667677687697707717727737747757767777787797807817827837847857867877887897907917927937947957967977987998008018028038048058068078088098108118128138148158168178188198208218228238248258268278288298308318328338348358368378388398408418428438448458468478488498508518528538548558568578588598608618628638648658668678688698708718728738748758768778788798808818828838848858868878888898908918928938948958968978988999009019029039049059069079089099109119129139149159169179189199209219229239249259269279289299309319329339349359369379389399409419429439449459469479489499509519529539549559569579589599609619629639649659669679689699709719729739749759769779789799809819829839849859869879889899909919929939949959969979989991000100110021003100410051006100710081009101010111012101310141015101610171018101910201021102210231024102510261027102810291030103110321033103410351036103710381039104010411042104310441045104610471048104910501051105210531054105510561057105810591060106110621063106410651066106710681069107010711072107310741075107610771078107910801081108210831084108510861087108810891090109110921093109410951096109710981099110011011102110311041105110611071108110911101111111211131114111511161117111811191120112111221123112411251126112711281129113011311132
  1. interface SVGAttributes {
  2. accentHeight?: number | string | undefined;
  3. accumulate?: "none" | "sum" | undefined;
  4. additive?: "replace" | "sum" | undefined;
  5. alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined;
  6. allowReorder?: "no" | "yes" | undefined;
  7. alphabetic?: number | string | undefined;
  8. amplitude?: number | string | undefined;
  9. arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
  10. ascent?: number | string | undefined;
  11. attributeName?: string | undefined;
  12. attributeType?: string | undefined;
  13. autoReverse?: boolean | undefined;
  14. azimuth?: number | string | undefined;
  15. baseFrequency?: number | string | undefined;
  16. baselineShift?: number | string | undefined;
  17. baseProfile?: number | string | undefined;
  18. bbox?: number | string | undefined;
  19. begin?: number | string | undefined;
  20. bias?: number | string | undefined;
  21. by?: number | string | undefined;
  22. calcMode?: number | string | undefined;
  23. capHeight?: number | string | undefined;
  24. clip?: number | string | undefined;
  25. clipPath?: string | undefined;
  26. clipPathUnits?: number | string | undefined;
  27. clipRule?: number | string | undefined;
  28. colorInterpolation?: number | string | undefined;
  29. colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
  30. colorProfile?: number | string | undefined;
  31. colorRendering?: number | string | undefined;
  32. contentScriptType?: number | string | undefined;
  33. contentStyleType?: number | string | undefined;
  34. cursor?: number | string | undefined;
  35. cx?: number | string | undefined;
  36. cy?: number | string | undefined;
  37. d?: string | undefined;
  38. decelerate?: number | string | undefined;
  39. descent?: number | string | undefined;
  40. diffuseConstant?: number | string | undefined;
  41. direction?: number | string | undefined;
  42. display?: number | string | undefined;
  43. divisor?: number | string | undefined;
  44. dominantBaseline?: number | string | undefined;
  45. dur?: number | string | undefined;
  46. dx?: number | string | undefined;
  47. dy?: number | string | undefined;
  48. edgeMode?: number | string | undefined;
  49. elevation?: number | string | undefined;
  50. enableBackground?: number | string | undefined;
  51. end?: number | string | undefined;
  52. exponent?: number | string | undefined;
  53. externalResourcesRequired?: boolean | undefined;
  54. fill?: string | undefined;
  55. fillOpacity?: number | string | undefined;
  56. fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
  57. filter?: string | undefined;
  58. filterRes?: number | string | undefined;
  59. filterUnits?: number | string | undefined;
  60. floodColor?: number | string | undefined;
  61. floodOpacity?: number | string | undefined;
  62. focusable?: boolean | "auto" | undefined;
  63. fontFamily?: string | undefined;
  64. fontSize?: number | string | undefined;
  65. fontSizeAdjust?: number | string | undefined;
  66. fontStretch?: number | string | undefined;
  67. fontStyle?: number | string | undefined;
  68. fontVariant?: number | string | undefined;
  69. fontWeight?: number | string | undefined;
  70. format?: number | string | undefined;
  71. fr?: number | string | undefined;
  72. from?: number | string | undefined;
  73. fx?: number | string | undefined;
  74. fy?: number | string | undefined;
  75. g1?: number | string | undefined;
  76. g2?: number | string | undefined;
  77. glyphName?: number | string | undefined;
  78. glyphOrientationHorizontal?: number | string | undefined;
  79. glyphOrientationVertical?: number | string | undefined;
  80. glyphRef?: number | string | undefined;
  81. gradientTransform?: string | undefined;
  82. gradientUnits?: string | undefined;
  83. hanging?: number | string | undefined;
  84. horizAdvX?: number | string | undefined;
  85. horizOriginX?: number | string | undefined;
  86. href?: string | undefined;
  87. ideographic?: number | string | undefined;
  88. imageRendering?: number | string | undefined;
  89. in2?: number | string | undefined;
  90. in?: string | undefined;
  91. intercept?: number | string | undefined;
  92. k1?: number | string | undefined;
  93. k2?: number | string | undefined;
  94. k3?: number | string | undefined;
  95. k4?: number | string | undefined;
  96. k?: number | string | undefined;
  97. kernelMatrix?: number | string | undefined;
  98. kernelUnitLength?: number | string | undefined;
  99. kerning?: number | string | undefined;
  100. keyPoints?: number | string | undefined;
  101. keySplines?: number | string | undefined;
  102. keyTimes?: number | string | undefined;
  103. lengthAdjust?: number | string | undefined;
  104. letterSpacing?: number | string | undefined;
  105. lightingColor?: number | string | undefined;
  106. limitingConeAngle?: number | string | undefined;
  107. local?: number | string | undefined;
  108. markerEnd?: string | undefined;
  109. markerHeight?: number | string | undefined;
  110. markerMid?: string | undefined;
  111. markerStart?: string | undefined;
  112. markerUnits?: number | string | undefined;
  113. markerWidth?: number | string | undefined;
  114. mask?: string | undefined;
  115. maskContentUnits?: number | string | undefined;
  116. maskUnits?: number | string | undefined;
  117. mathematical?: number | string | undefined;
  118. mode?: number | string | undefined;
  119. numOctaves?: number | string | undefined;
  120. offset?: number | string | undefined;
  121. opacity?: number | string | undefined;
  122. operator?: number | string | undefined;
  123. order?: number | string | undefined;
  124. orient?: number | string | undefined;
  125. orientation?: number | string | undefined;
  126. origin?: number | string | undefined;
  127. overflow?: number | string | undefined;
  128. overlinePosition?: number | string | undefined;
  129. overlineThickness?: number | string | undefined;
  130. paintOrder?: number | string | undefined;
  131. panose1?: number | string | undefined;
  132. path?: string | undefined;
  133. pathLength?: number | string | undefined;
  134. patternContentUnits?: string | undefined;
  135. patternTransform?: number | string | undefined;
  136. patternUnits?: string | undefined;
  137. pointerEvents?: number | string | undefined;
  138. points?: string | undefined;
  139. pointsAtX?: number | string | undefined;
  140. pointsAtY?: number | string | undefined;
  141. pointsAtZ?: number | string | undefined;
  142. preserveAlpha?: boolean | undefined;
  143. preserveAspectRatio?: string | undefined;
  144. primitiveUnits?: number | string | undefined;
  145. r?: number | string | undefined;
  146. radius?: number | string | undefined;
  147. refX?: number | string | undefined;
  148. refY?: number | string | undefined;
  149. renderingIntent?: number | string | undefined;
  150. repeatCount?: number | string | undefined;
  151. repeatDur?: number | string | undefined;
  152. requiredExtensions?: number | string | undefined;
  153. requiredFeatures?: number | string | undefined;
  154. restart?: number | string | undefined;
  155. result?: string | undefined;
  156. rotate?: number | string | undefined;
  157. rx?: number | string | undefined;
  158. ry?: number | string | undefined;
  159. scale?: number | string | undefined;
  160. seed?: number | string | undefined;
  161. shapeRendering?: number | string | undefined;
  162. slope?: number | string | undefined;
  163. spacing?: number | string | undefined;
  164. specularConstant?: number | string | undefined;
  165. specularExponent?: number | string | undefined;
  166. speed?: number | string | undefined;
  167. spreadMethod?: string | undefined;
  168. startOffset?: number | string | undefined;
  169. stdDeviation?: number | string | undefined;
  170. stemh?: number | string | undefined;
  171. stemv?: number | string | undefined;
  172. stitchTiles?: number | string | undefined;
  173. stopColor?: string | undefined;
  174. stopOpacity?: number | string | undefined;
  175. strikethroughPosition?: number | string | undefined;
  176. strikethroughThickness?: number | string | undefined;
  177. string?: number | string | undefined;
  178. stroke?: string | undefined;
  179. strokeDasharray?: string | number | undefined;
  180. strokeDashoffset?: string | number | undefined;
  181. strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
  182. strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
  183. strokeMiterlimit?: number | string | undefined;
  184. strokeOpacity?: number | string | undefined;
  185. strokeWidth?: number | string | undefined;
  186. surfaceScale?: number | string | undefined;
  187. systemLanguage?: number | string | undefined;
  188. tableValues?: number | string | undefined;
  189. targetX?: number | string | undefined;
  190. targetY?: number | string | undefined;
  191. textAnchor?: string | undefined;
  192. textDecoration?: number | string | undefined;
  193. textLength?: number | string | undefined;
  194. textRendering?: number | string | undefined;
  195. to?: number | string | undefined;
  196. transform?: string | undefined;
  197. u1?: number | string | undefined;
  198. u2?: number | string | undefined;
  199. underlinePosition?: number | string | undefined;
  200. underlineThickness?: number | string | undefined;
  201. unicode?: number | string | undefined;
  202. unicodeBidi?: number | string | undefined;
  203. unicodeRange?: number | string | undefined;
  204. unitsPerEm?: number | string | undefined;
  205. vAlphabetic?: number | string | undefined;
  206. values?: string | undefined;
  207. vectorEffect?: number | string | undefined;
  208. version?: string | undefined;
  209. vertAdvY?: number | string | undefined;
  210. vertOriginX?: number | string | undefined;
  211. vertOriginY?: number | string | undefined;
  212. vHanging?: number | string | undefined;
  213. vIdeographic?: number | string | undefined;
  214. viewBox?: string | undefined;
  215. viewTarget?: number | string | undefined;
  216. visibility?: number | string | undefined;
  217. vMathematical?: number | string | undefined;
  218. widths?: number | string | undefined;
  219. wordSpacing?: number | string | undefined;
  220. writingMode?: number | string | undefined;
  221. x1?: number | string | undefined;
  222. x2?: number | string | undefined;
  223. x?: number | string | undefined;
  224. xChannelSelector?: string | undefined;
  225. xHeight?: number | string | undefined;
  226. xlinkActuate?: string | undefined;
  227. xlinkArcrole?: string | undefined;
  228. xlinkHref?: string | undefined;
  229. xlinkRole?: string | undefined;
  230. xlinkShow?: string | undefined;
  231. xlinkTitle?: string | undefined;
  232. xlinkType?: string | undefined;
  233. xmlBase?: string | undefined;
  234. xmlLang?: string | undefined;
  235. xmlns?: string | undefined;
  236. xmlnsXlink?: string | undefined;
  237. xmlSpace?: string | undefined;
  238. y1?: number | string | undefined;
  239. y2?: number | string | undefined;
  240. y?: number | string | undefined;
  241. yChannelSelector?: string | undefined;
  242. z?: number | string | undefined;
  243. zoomAndPan?: string | undefined;
  244. }
  245. interface ProgressTimeline {
  246. currentTime: null | {
  247. value: number;
  248. };
  249. cancel?: VoidFunction;
  250. }
  251. /**
  252. * Methods to control an animation.
  253. */
  254. interface AnimationPlaybackControls {
  255. /**
  256. * The current time of the animation, in seconds.
  257. */
  258. time: number;
  259. /**
  260. * The playback speed of the animation.
  261. * 1 = normal speed, 2 = double speed, 0.5 = half speed.
  262. */
  263. speed: number;
  264. /**
  265. * The start time of the animation, in milliseconds.
  266. */
  267. startTime: number | null;
  268. /**
  269. * The state of the animation.
  270. *
  271. * This is currently for internal use only.
  272. */
  273. state?: AnimationPlayState;
  274. duration: number;
  275. /**
  276. * Stops the animation at its current state, and prevents it from
  277. * resuming when the animation is played again.
  278. */
  279. stop: () => void;
  280. /**
  281. * Plays the animation.
  282. */
  283. play: () => void;
  284. /**
  285. * Pauses the animation.
  286. */
  287. pause: () => void;
  288. /**
  289. * Completes the animation and applies the final state.
  290. */
  291. complete: () => void;
  292. /**
  293. * Cancels the animation and applies the initial state.
  294. */
  295. cancel: () => void;
  296. /**
  297. * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
  298. *
  299. * This is currently for internal use only.
  300. */
  301. attachTimeline?: (timeline: ProgressTimeline, fallback?: (animation: AnimationPlaybackControls) => VoidFunction) => VoidFunction;
  302. /**
  303. * Flattens the animation's easing curve to linear.
  304. *
  305. * This is currently for internal use only, and is used by scroll() to
  306. * ensure an animation is being scrubbed by progress rather than eased time.
  307. */
  308. flatten: () => void;
  309. finished: Promise<any>;
  310. }
  311. type AnimationPlaybackControlsWithThen = AnimationPlaybackControls & {
  312. then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
  313. };
  314. interface AnimationState<V> {
  315. value: V;
  316. done: boolean;
  317. }
  318. interface KeyframeGenerator<V> {
  319. calculatedDuration: null | number;
  320. next: (t: number) => AnimationState<V>;
  321. toString: () => string;
  322. }
  323. interface DOMValueAnimationOptions<V extends string | number = number> {
  324. element: HTMLElement | SVGElement;
  325. keyframes: ValueKeyframesDefinition;
  326. name: string;
  327. pseudoElement?: string;
  328. allowFlatten?: boolean;
  329. transition: ValueAnimationTransition<V>;
  330. }
  331. interface ValueAnimationOptions<V extends string | number = number> extends ValueAnimationTransition {
  332. keyframes: V[];
  333. name?: string;
  334. from?: V;
  335. isGenerator?: boolean;
  336. allowFlatten?: boolean;
  337. }
  338. type GeneratorFactoryFunction = (options: ValueAnimationOptions<any>) => KeyframeGenerator<any>;
  339. interface GeneratorFactory extends GeneratorFactoryFunction {
  340. applyToOptions: (options: Transition) => Transition;
  341. }
  342. type AnimationGeneratorType = GeneratorFactory | "decay" | "spring" | "keyframes" | "tween" | "inertia";
  343. interface AnimationPlaybackLifecycles<V> {
  344. onUpdate?: (latest: V) => void;
  345. onPlay?: () => void;
  346. onComplete?: () => void;
  347. onRepeat?: () => void;
  348. onStop?: () => void;
  349. }
  350. interface ValueAnimationTransition<V = any> extends Transition, AnimationPlaybackLifecycles<V> {
  351. }
  352. type RepeatType = "loop" | "reverse" | "mirror";
  353. interface AnimationPlaybackOptions {
  354. repeat?: number;
  355. repeatType?: RepeatType;
  356. repeatDelay?: number;
  357. }
  358. interface VelocityOptions {
  359. velocity?: number;
  360. restSpeed?: number;
  361. restDelta?: number;
  362. }
  363. interface DurationSpringOptions {
  364. duration?: number;
  365. visualDuration?: number;
  366. bounce?: number;
  367. }
  368. interface SpringOptions extends DurationSpringOptions, VelocityOptions {
  369. stiffness?: number;
  370. damping?: number;
  371. mass?: number;
  372. }
  373. interface DecayOptions extends VelocityOptions {
  374. keyframes?: number[];
  375. power?: number;
  376. timeConstant?: number;
  377. modifyTarget?: (v: number) => number;
  378. }
  379. type EasingFunction = (v: number) => number;
  380. type EasingModifier = (easing: EasingFunction) => EasingFunction;
  381. type BezierDefinition = readonly [number, number, number, number];
  382. type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
  383. /**
  384. * The easing function to use. Set as one of:
  385. *
  386. * - The name of an in-built easing function.
  387. * - An array of four numbers to define a cubic bezier curve.
  388. * - An easing function, that accepts and returns a progress value between `0` and `1`.
  389. *
  390. * @public
  391. */
  392. type Easing = EasingDefinition | EasingFunction;
  393. interface DriverControls {
  394. start: () => void;
  395. stop: () => void;
  396. now: () => number;
  397. }
  398. type Driver = (update: (timestamp: number) => void) => DriverControls;
  399. interface InertiaOptions extends DecayOptions {
  400. bounceStiffness?: number;
  401. bounceDamping?: number;
  402. min?: number;
  403. max?: number;
  404. }
  405. interface KeyframeOptions {
  406. ease?: Easing | Easing[];
  407. times?: number[];
  408. }
  409. interface Transition extends AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions, "keyframes">, KeyframeOptions {
  410. delay?: number;
  411. elapsed?: number;
  412. driver?: Driver;
  413. type?: AnimationGeneratorType;
  414. duration?: number;
  415. autoplay?: boolean;
  416. startTime?: number;
  417. }
  418. type SVGPathTransitions = {
  419. [K in keyof SVGPathProperties]: Transition;
  420. };
  421. type SVGTransitions = {
  422. [K in keyof SVGAttributes]: Transition;
  423. };
  424. type VariableTransitions = {
  425. [key: `--${string}`]: Transition;
  426. };
  427. type StyleTransitions = {
  428. [K in keyof CSSStyleDeclarationWithTransform]?: Transition;
  429. };
  430. type ValueKeyframe = string | number;
  431. type UnresolvedValueKeyframe = ValueKeyframe | null;
  432. type ResolvedValueKeyframe = ValueKeyframe | ValueKeyframe[];
  433. type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
  434. type StyleKeyframesDefinition = {
  435. [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
  436. };
  437. type SVGKeyframesDefinition = {
  438. [K in keyof SVGAttributes]?: ValueKeyframesDefinition;
  439. };
  440. type VariableKeyframesDefinition = {
  441. [key: `--${string}`]: ValueKeyframesDefinition;
  442. };
  443. type SVGPathKeyframesDefinition = {
  444. [K in keyof SVGPathProperties]?: ValueKeyframesDefinition;
  445. };
  446. type DOMKeyframesDefinition = StyleKeyframesDefinition & SVGKeyframesDefinition & SVGPathKeyframesDefinition & VariableKeyframesDefinition;
  447. interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition" | "x" | "y" | "z"> {
  448. x: number | string;
  449. y: number | string;
  450. z: number | string;
  451. rotateX: number | string;
  452. rotateY: number | string;
  453. rotateZ: number | string;
  454. scaleX: number;
  455. scaleY: number;
  456. scaleZ: number;
  457. skewX: number | string;
  458. skewY: number | string;
  459. }
  460. type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
  461. type DynamicOption<T> = (i: number, total: number) => T;
  462. interface AnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
  463. delay?: number | DynamicOption<number>;
  464. }
  465. interface TransformProperties {
  466. x?: string | number;
  467. y?: string | number;
  468. z?: string | number;
  469. translateX?: string | number;
  470. translateY?: string | number;
  471. translateZ?: string | number;
  472. rotate?: string | number;
  473. rotateX?: string | number;
  474. rotateY?: string | number;
  475. rotateZ?: string | number;
  476. scale?: string | number;
  477. scaleX?: string | number;
  478. scaleY?: string | number;
  479. scaleZ?: string | number;
  480. skew?: string | number;
  481. skewX?: string | number;
  482. skewY?: string | number;
  483. originX?: string | number;
  484. originY?: string | number;
  485. originZ?: string | number;
  486. perspective?: string | number;
  487. transformPerspective?: string | number;
  488. }
  489. interface SVGPathProperties {
  490. pathLength?: number;
  491. pathOffset?: number;
  492. pathSpacing?: number;
  493. }
  494. type AcceptedAnimations = AnimationPlaybackControls;
  495. type GroupedAnimations = AcceptedAnimations[];
  496. declare class GroupAnimation implements AnimationPlaybackControls {
  497. animations: GroupedAnimations;
  498. constructor(animations: Array<AcceptedAnimations | undefined>);
  499. get finished(): Promise<any[]>;
  500. /**
  501. * TODO: Filter out cancelled or stopped animations before returning
  502. */
  503. private getAll;
  504. private setAll;
  505. attachTimeline(timeline: any, fallback?: (animation: AnimationPlaybackControls) => VoidFunction): () => void;
  506. get time(): number;
  507. set time(time: number);
  508. get speed(): number;
  509. set speed(speed: number);
  510. get startTime(): any;
  511. get duration(): number;
  512. private runAll;
  513. flatten(): void;
  514. play(): void;
  515. pause(): void;
  516. stop: () => void;
  517. cancel(): void;
  518. complete(): void;
  519. }
  520. declare class GroupAnimationWithThen extends GroupAnimation implements AnimationPlaybackControlsWithThen {
  521. then(onResolve: VoidFunction, _onReject?: VoidFunction): Promise<void>;
  522. }
  523. interface NativeAnimationOptions<V extends string | number = number> extends DOMValueAnimationOptions<V> {
  524. pseudoElement?: string;
  525. }
  526. interface NativeControlsOptions {
  527. animation: Animation;
  528. }
  529. /**
  530. * NativeAnimation implements AnimationPlaybackControls for the browser's Web Animations API.
  531. */
  532. declare class NativeAnimation implements AnimationPlaybackControls {
  533. /**
  534. * The interfaced Web Animation API animation
  535. */
  536. private animation;
  537. private allowFlatten;
  538. private removeAnimation;
  539. private isPseudoElement;
  540. constructor(options: NativeAnimationOptions | NativeControlsOptions);
  541. play(): void;
  542. pause(): void;
  543. complete(): void;
  544. cancel(): void;
  545. stop(): void;
  546. /**
  547. * WAAPI doesn't natively have any interruption capabilities.
  548. *
  549. * In this method, we commit styles back to the DOM before cancelling
  550. * the animation.
  551. *
  552. * This is designed to be overridden by NativeAnimationExtended, which
  553. * will create a renderless JS animation and sample it twice to calculate
  554. * its current value, "previous" value, and therefore allow
  555. * Motion to also correctly calculate velocity for any subsequent animation
  556. * while deferring the commit until the next animation frame.
  557. */
  558. private commitStyles;
  559. get duration(): number;
  560. get time(): number;
  561. set time(newTime: number);
  562. /**
  563. * The playback speed of the animation.
  564. * 1 = normal speed, 2 = double speed, 0.5 = half speed.
  565. */
  566. get speed(): number;
  567. set speed(newSpeed: number);
  568. get state(): AnimationPlayState;
  569. get startTime(): number;
  570. get finished(): Promise<Animation>;
  571. flatten(): void;
  572. /**
  573. * Attaches a timeline to the animation, for instance the `ScrollTimeline`.
  574. */
  575. attachTimeline(timeline: ProgressTimeline): VoidFunction;
  576. /**
  577. * Allows the animation to be awaited.
  578. *
  579. * @deprecated Use `finished` instead.
  580. */
  581. then(onResolve: VoidFunction, onReject?: VoidFunction): Promise<void>;
  582. }
  583. declare function getValueTransition(transition: any, key: string): any;
  584. /**
  585. * Implement a practical max duration for keyframe generation
  586. * to prevent infinite loops
  587. */
  588. declare const maxGeneratorDuration = 20000;
  589. declare function calcGeneratorDuration(generator: KeyframeGenerator<unknown>): number;
  590. /**
  591. * Create a progress => progress easing function from a generator.
  592. */
  593. declare function createGeneratorEasing(options: Transition, scale: number | undefined, createGenerator: GeneratorFactory): {
  594. type: string;
  595. ease: (progress: number) => number;
  596. duration: number;
  597. };
  598. declare function isGenerator(type?: AnimationGeneratorType): type is GeneratorFactory;
  599. declare const cubicBezierAsString: ([a, b, c, d]: BezierDefinition) => string;
  600. declare function isWaapiSupportedEasing(easing?: Easing | Easing[]): boolean;
  601. declare function mapEasingToNativeEasing(easing: Easing | Easing[] | undefined, duration: number): undefined | string | string[];
  602. declare const supportedWaapiEasing: {
  603. linear: string;
  604. ease: string;
  605. easeIn: string;
  606. easeOut: string;
  607. easeInOut: string;
  608. circIn: string;
  609. circOut: string;
  610. backIn: string;
  611. backOut: string;
  612. };
  613. declare function startWaapiAnimation(element: Element, valueName: string, keyframes: ValueKeyframesDefinition, { delay, duration, repeat, repeatType, ease, times, }?: Transition, pseudoElement?: string | undefined): Animation;
  614. declare function attachTimeline(animation: Animation, timeline: any): void;
  615. declare const generateLinearEasing: (easing: EasingFunction, duration: number, resolution?: number) => string;
  616. declare const frame: Batcher;
  617. declare const cancelFrame: (process: Process) => void;
  618. declare const frameData: FrameData;
  619. declare const frameSteps: Steps;
  620. type Process = (data: FrameData) => void;
  621. type Schedule = (process: Process, keepAlive?: boolean, immediate?: boolean) => Process;
  622. interface Step {
  623. schedule: Schedule;
  624. cancel: (process: Process) => void;
  625. process: (data: FrameData) => void;
  626. }
  627. type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
  628. type CancelProcess = (process: Process) => void;
  629. type Batcher = {
  630. [key in StepId]: Schedule;
  631. };
  632. type Steps = {
  633. [key in StepId]: Step;
  634. };
  635. interface FrameData {
  636. delta: number;
  637. timestamp: number;
  638. isProcessing: boolean;
  639. }
  640. declare function createRenderBatcher(scheduleNextBatch: (callback: Function) => void, allowKeepAlive: boolean): {
  641. schedule: Batcher;
  642. cancel: (process: Process) => void;
  643. state: FrameData;
  644. steps: Steps;
  645. };
  646. declare const microtask: Batcher;
  647. declare const cancelMicrotask: (process: Process) => void;
  648. /**
  649. * An eventloop-synchronous alternative to performance.now().
  650. *
  651. * Ensures that time measurements remain consistent within a synchronous context.
  652. * Usually calling performance.now() twice within the same synchronous context
  653. * will return different values which isn't useful for animations when we're usually
  654. * trying to sync animations to the same frame.
  655. */
  656. declare const time: {
  657. now: () => number;
  658. set: (newTime: number) => void;
  659. };
  660. declare const isDragging: {
  661. x: boolean;
  662. y: boolean;
  663. };
  664. declare function isDragActive(): boolean;
  665. declare function setDragLock(axis: boolean | "x" | "y" | "lockDirection"): (() => void) | null;
  666. type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
  667. interface WithQuerySelectorAll {
  668. querySelectorAll: Element["querySelectorAll"];
  669. }
  670. interface AnimationScope<T = any> {
  671. readonly current: T;
  672. animations: any[];
  673. }
  674. interface SelectorCache {
  675. [key: string]: NodeListOf<Element>;
  676. }
  677. declare function resolveElements(elementOrSelector: ElementOrSelector, scope?: AnimationScope, selectorCache?: SelectorCache): Element[];
  678. /**
  679. * Options for the hover gesture.
  680. *
  681. * @public
  682. */
  683. interface EventOptions {
  684. /**
  685. * Use passive event listeners. Doing so allows the browser to optimize
  686. * scrolling performance by not allowing the use of `preventDefault()`.
  687. *
  688. * @default true
  689. */
  690. passive?: boolean;
  691. /**
  692. * Remove the event listener after the first event.
  693. *
  694. * @default false
  695. */
  696. once?: boolean;
  697. }
  698. /**
  699. * A function to be called when a hover gesture starts.
  700. *
  701. * This function can optionally return a function that will be called
  702. * when the hover gesture ends.
  703. *
  704. * @public
  705. */
  706. type OnHoverStartEvent = (element: Element, event: PointerEvent) => void | OnHoverEndEvent;
  707. /**
  708. * A function to be called when a hover gesture ends.
  709. *
  710. * @public
  711. */
  712. type OnHoverEndEvent = (event: PointerEvent) => void;
  713. /**
  714. * Create a hover gesture. hover() is different to .addEventListener("pointerenter")
  715. * in that it has an easier syntax, filters out polyfilled touch events, interoperates
  716. * with drag gestures, and automatically removes the "pointerennd" event listener when the hover ends.
  717. *
  718. * @public
  719. */
  720. declare function hover(elementOrSelector: ElementOrSelector, onHoverStart: OnHoverStartEvent, options?: EventOptions): VoidFunction;
  721. interface PressGestureInfo {
  722. success: boolean;
  723. }
  724. type OnPressEndEvent = (event: PointerEvent, info: PressGestureInfo) => void;
  725. type OnPressStartEvent = (element: Element, event: PointerEvent) => OnPressEndEvent | void;
  726. interface PointerEventOptions extends EventOptions {
  727. useGlobalTarget?: boolean;
  728. }
  729. /**
  730. * Create a press gesture.
  731. *
  732. * Press is different to `"pointerdown"`, `"pointerup"` in that it
  733. * automatically filters out secondary pointer events like right
  734. * click and multitouch.
  735. *
  736. * It also adds accessibility support for keyboards, where
  737. * an element with a press gesture will receive focus and
  738. * trigger on Enter `"keydown"` and `"keyup"` events.
  739. *
  740. * This is different to a browser's `"click"` event, which does
  741. * respond to keyboards but only for the `"click"` itself, rather
  742. * than the press start and end/cancel. The element also needs
  743. * to be focusable for this to work, whereas a press gesture will
  744. * make an element focusable by default.
  745. *
  746. * @public
  747. */
  748. declare function press(targetOrSelector: ElementOrSelector, onPressStart: OnPressStartEvent, options?: PointerEventOptions): VoidFunction;
  749. /**
  750. * Recursively traverse up the tree to check whether the provided child node
  751. * is the parent or a descendant of it.
  752. *
  753. * @param parent - Element to find
  754. * @param child - Element to test against parent
  755. */
  756. declare const isNodeOrChild: (parent: Element | null, child?: Element | null) => boolean;
  757. declare const isPrimaryPointer: (event: PointerEvent) => boolean;
  758. declare const stepsOrder: StepId[];
  759. type StepNames = (typeof stepsOrder)[number];
  760. interface Summary {
  761. min: number;
  762. max: number;
  763. avg: number;
  764. }
  765. type FrameloopStatNames = "rate" | StepNames;
  766. interface Stats<T> {
  767. frameloop: {
  768. [key in FrameloopStatNames]: T;
  769. };
  770. animations: {
  771. mainThread: T;
  772. waapi: T;
  773. layout: T;
  774. };
  775. layoutProjection: {
  776. nodes: T;
  777. calculatedTargetDeltas: T;
  778. calculatedProjections: T;
  779. };
  780. }
  781. type StatsBuffer = number[];
  782. type FrameStats = Stats<number>;
  783. type StatsRecording = Stats<StatsBuffer>;
  784. type StatsSummary = Stats<Summary>;
  785. declare function reportStats(): StatsSummary;
  786. declare function recordStats(): typeof reportStats;
  787. declare const activeAnimations: {
  788. layout: number;
  789. mainThread: number;
  790. waapi: number;
  791. };
  792. type InactiveStatsBuffer = {
  793. value: null;
  794. addProjectionMetrics: null;
  795. };
  796. type ActiveStatsBuffer = {
  797. value: StatsRecording;
  798. addProjectionMetrics: (metrics: {
  799. nodes: number;
  800. calculatedTargetDeltas: number;
  801. calculatedProjections: number;
  802. }) => void;
  803. };
  804. declare const statsBuffer: InactiveStatsBuffer | ActiveStatsBuffer;
  805. declare const isBezierDefinition: (easing: Easing | Easing[]) => easing is BezierDefinition;
  806. /**
  807. * Add the ability for test suites to manually set support flags
  808. * to better test more environments.
  809. */
  810. declare const supportsFlags: Record<string, boolean | undefined>;
  811. declare const supportsLinearEasing: () => boolean;
  812. declare global {
  813. interface Window {
  814. ScrollTimeline: ScrollTimeline;
  815. }
  816. }
  817. declare class ScrollTimeline implements ProgressTimeline {
  818. constructor(options: ScrollOptions);
  819. currentTime: null | {
  820. value: number;
  821. };
  822. cancel?: VoidFunction;
  823. }
  824. declare const supportsScrollTimeline: () => boolean;
  825. type Transformer<T> = (v: T) => T;
  826. /**
  827. * @public
  828. */
  829. type Subscriber<T> = (v: T) => void;
  830. /**
  831. * @public
  832. */
  833. type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
  834. type StartAnimation = (complete: () => void) => AnimationPlaybackControlsWithThen | undefined;
  835. interface MotionValueEventCallbacks<V> {
  836. animationStart: () => void;
  837. animationComplete: () => void;
  838. animationCancel: () => void;
  839. change: (latestValue: V) => void;
  840. renderRequest: () => void;
  841. }
  842. interface ResolvedValues {
  843. [key: string]: string | number;
  844. }
  845. interface Owner {
  846. current: HTMLElement | unknown;
  847. getProps: () => {
  848. onUpdate?: (latest: ResolvedValues) => void;
  849. transformTemplate?: (transform: TransformProperties, generatedTransform: string) => string;
  850. };
  851. }
  852. interface MotionValueOptions {
  853. owner?: Owner;
  854. }
  855. declare const collectMotionValues: {
  856. current: MotionValue[] | undefined;
  857. };
  858. /**
  859. * `MotionValue` is used to track the state and velocity of motion values.
  860. *
  861. * @public
  862. */
  863. declare class MotionValue<V = any> {
  864. /**
  865. * This will be replaced by the build step with the latest version number.
  866. * When MotionValues are provided to motion components, warn if versions are mixed.
  867. */
  868. version: string;
  869. /**
  870. * If a MotionValue has an owner, it was created internally within Motion
  871. * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
  872. */
  873. owner?: Owner;
  874. /**
  875. * The current state of the `MotionValue`.
  876. */
  877. private current;
  878. /**
  879. * The previous state of the `MotionValue`.
  880. */
  881. private prev;
  882. /**
  883. * The previous state of the `MotionValue` at the end of the previous frame.
  884. */
  885. private prevFrameValue;
  886. /**
  887. * The last time the `MotionValue` was updated.
  888. */
  889. updatedAt: number;
  890. /**
  891. * The time `prevFrameValue` was updated.
  892. */
  893. prevUpdatedAt: number | undefined;
  894. private stopPassiveEffect?;
  895. /**
  896. * A reference to the currently-controlling animation.
  897. */
  898. animation?: AnimationPlaybackControlsWithThen;
  899. /**
  900. * Tracks whether this value should be removed
  901. */
  902. liveStyle?: boolean;
  903. /**
  904. * @param init - The initiating value
  905. * @param config - Optional configuration options
  906. *
  907. * - `transformer`: A function to transform incoming values with.
  908. */
  909. constructor(init: V, options?: MotionValueOptions);
  910. setCurrent(current: V): void;
  911. setPrevFrameValue(prevFrameValue?: V | undefined): void;
  912. /**
  913. * Adds a function that will be notified when the `MotionValue` is updated.
  914. *
  915. * It returns a function that, when called, will cancel the subscription.
  916. *
  917. * When calling `onChange` inside a React component, it should be wrapped with the
  918. * `useEffect` hook. As it returns an unsubscribe function, this should be returned
  919. * from the `useEffect` function to ensure you don't add duplicate subscribers..
  920. *
  921. * ```jsx
  922. * export const MyComponent = () => {
  923. * const x = useMotionValue(0)
  924. * const y = useMotionValue(0)
  925. * const opacity = useMotionValue(1)
  926. *
  927. * useEffect(() => {
  928. * function updateOpacity() {
  929. * const maxXY = Math.max(x.get(), y.get())
  930. * const newOpacity = transform(maxXY, [0, 100], [1, 0])
  931. * opacity.set(newOpacity)
  932. * }
  933. *
  934. * const unsubscribeX = x.on("change", updateOpacity)
  935. * const unsubscribeY = y.on("change", updateOpacity)
  936. *
  937. * return () => {
  938. * unsubscribeX()
  939. * unsubscribeY()
  940. * }
  941. * }, [])
  942. *
  943. * return <motion.div style={{ x }} />
  944. * }
  945. * ```
  946. *
  947. * @param subscriber - A function that receives the latest value.
  948. * @returns A function that, when called, will cancel this subscription.
  949. *
  950. * @deprecated
  951. */
  952. onChange(subscription: Subscriber<V>): () => void;
  953. /**
  954. * An object containing a SubscriptionManager for each active event.
  955. */
  956. private events;
  957. on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
  958. clearListeners(): void;
  959. /**
  960. * Attaches a passive effect to the `MotionValue`.
  961. */
  962. attach(passiveEffect: PassiveEffect<V>, stopPassiveEffect: VoidFunction): void;
  963. /**
  964. * Sets the state of the `MotionValue`.
  965. *
  966. * @remarks
  967. *
  968. * ```jsx
  969. * const x = useMotionValue(0)
  970. * x.set(10)
  971. * ```
  972. *
  973. * @param latest - Latest value to set.
  974. * @param render - Whether to notify render subscribers. Defaults to `true`
  975. *
  976. * @public
  977. */
  978. set(v: V, render?: boolean): void;
  979. setWithVelocity(prev: V, current: V, delta: number): void;
  980. /**
  981. * Set the state of the `MotionValue`, stopping any active animations,
  982. * effects, and resets velocity to `0`.
  983. */
  984. jump(v: V, endAnimation?: boolean): void;
  985. updateAndNotify: (v: V, render?: boolean) => void;
  986. /**
  987. * Returns the latest state of `MotionValue`
  988. *
  989. * @returns - The latest state of `MotionValue`
  990. *
  991. * @public
  992. */
  993. get(): NonNullable<V>;
  994. /**
  995. * @public
  996. */
  997. getPrevious(): V | undefined;
  998. /**
  999. * Returns the latest velocity of `MotionValue`
  1000. *
  1001. * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
  1002. *
  1003. * @public
  1004. */
  1005. getVelocity(): number;
  1006. hasAnimated: boolean;
  1007. /**
  1008. * Registers a new animation to control this `MotionValue`. Only one
  1009. * animation can drive a `MotionValue` at one time.
  1010. *
  1011. * ```jsx
  1012. * value.start()
  1013. * ```
  1014. *
  1015. * @param animation - A function that starts the provided animation
  1016. */
  1017. start(startAnimation: StartAnimation): Promise<void>;
  1018. /**
  1019. * Stop the currently active animation.
  1020. *
  1021. * @public
  1022. */
  1023. stop(): void;
  1024. /**
  1025. * Returns `true` if this value is currently animating.
  1026. *
  1027. * @public
  1028. */
  1029. isAnimating(): boolean;
  1030. private clearAnimation;
  1031. /**
  1032. * Destroy and clean up subscribers to this `MotionValue`.
  1033. *
  1034. * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
  1035. * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
  1036. * created a `MotionValue` via the `motionValue` function.
  1037. *
  1038. * @public
  1039. */
  1040. destroy(): void;
  1041. }
  1042. declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
  1043. type ViewTransitionAnimationDefinition = {
  1044. keyframes: DOMKeyframesDefinition;
  1045. options: AnimationOptions;
  1046. };
  1047. type ViewTransitionTarget = {
  1048. layout?: ViewTransitionAnimationDefinition;
  1049. enter?: ViewTransitionAnimationDefinition;
  1050. exit?: ViewTransitionAnimationDefinition;
  1051. new?: ViewTransitionAnimationDefinition;
  1052. old?: ViewTransitionAnimationDefinition;
  1053. };
  1054. interface ViewTransitionOptions extends AnimationOptions {
  1055. interrupt?: "wait" | "immediate";
  1056. }
  1057. type Target = string | Element;
  1058. declare class ViewTransitionBuilder {
  1059. private currentTarget;
  1060. targets: Map<Target, ViewTransitionTarget>;
  1061. update: () => void | Promise<void>;
  1062. options: ViewTransitionOptions;
  1063. notifyReady: (value: GroupAnimation) => void;
  1064. private readyPromise;
  1065. constructor(update: () => void | Promise<void>, options?: ViewTransitionOptions);
  1066. get(selector: Target): this;
  1067. layout(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
  1068. new(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
  1069. old(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
  1070. enter(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
  1071. exit(keyframes: DOMKeyframesDefinition, options?: AnimationOptions): this;
  1072. crossfade(options?: AnimationOptions): this;
  1073. updateTarget(target: "enter" | "exit" | "layout" | "new" | "old", keyframes: DOMKeyframesDefinition, options?: AnimationOptions): void;
  1074. then(resolve: () => void, reject?: () => void): Promise<void>;
  1075. }
  1076. declare function animateView(update: () => void | Promise<void>, defaultOptions?: ViewTransitionOptions): ViewTransitionBuilder;
  1077. /**
  1078. * @deprecated
  1079. *
  1080. * Import as `frame` instead.
  1081. */
  1082. declare const sync: Batcher;
  1083. /**
  1084. * @deprecated
  1085. *
  1086. * Use cancelFrame(callback) instead.
  1087. */
  1088. declare const cancelSync: Record<string, (process: Process) => void>;
  1089. export { type AcceptedAnimations, type ActiveStatsBuffer, type AnimationGeneratorType, type AnimationOptions, type AnimationOptionsWithValueOverrides, type AnimationPlaybackControls, type AnimationPlaybackControlsWithThen, type AnimationPlaybackLifecycles, type AnimationPlaybackOptions, type AnimationScope, type AnimationState, type Batcher, type BezierDefinition, type CSSStyleDeclarationWithTransform, type CancelProcess, type DOMKeyframesDefinition, type DOMValueAnimationOptions, type DecayOptions, type Driver, type DriverControls, type DurationSpringOptions, type DynamicOption, type Easing, type EasingDefinition, type EasingFunction, type EasingModifier, type ElementOrSelector, type EventOptions, type FrameData, type FrameStats, type GeneratorFactory, type GeneratorFactoryFunction, GroupAnimation, GroupAnimationWithThen, type GroupedAnimations, type InactiveStatsBuffer, type InertiaOptions, type KeyframeGenerator, type KeyframeOptions, MotionValue, type MotionValueEventCallbacks, type MotionValueOptions, NativeAnimation, type NativeAnimationOptions, type NativeControlsOptions, type OnHoverEndEvent, type OnHoverStartEvent, type OnPressEndEvent, type OnPressStartEvent, type Owner, type PassiveEffect, type PointerEventOptions, type PressGestureInfo, type Process, type ProgressTimeline, type RepeatType, type ResolvedValueKeyframe, type SVGAttributes, type SVGKeyframesDefinition, type SVGPathKeyframesDefinition, type SVGPathProperties, type SVGPathTransitions, type SVGTransitions, type Schedule, type SelectorCache, type SpringOptions, type StartAnimation, type Stats, type StatsBuffer, type StatsRecording, type StatsSummary, type Step, type StepId, type Steps, type StyleKeyframesDefinition, type StyleTransitions, type Subscriber, type Summary, type Target, type TransformProperties, type Transformer, type Transition, type UnresolvedValueKeyframe, type ValueAnimationOptions, type ValueAnimationTransition, type ValueKeyframe, type ValueKeyframesDefinition, type VariableKeyframesDefinition, type VariableTransitions, type VelocityOptions, type ViewTransitionAnimationDefinition, ViewTransitionBuilder, type ViewTransitionOptions, type ViewTransitionTarget, type WithQuerySelectorAll, activeAnimations, animateView, attachTimeline, calcGeneratorDuration, cancelFrame, cancelMicrotask, cancelSync, collectMotionValues, createGeneratorEasing, createRenderBatcher, cubicBezierAsString, frame, frameData, frameSteps, generateLinearEasing, getValueTransition, hover, isBezierDefinition, isDragActive, isDragging, isGenerator, isNodeOrChild, isPrimaryPointer, isWaapiSupportedEasing, mapEasingToNativeEasing, maxGeneratorDuration, microtask, motionValue, press, recordStats, resolveElements, setDragLock, startWaapiAnimation, statsBuffer, supportedWaapiEasing, supportsFlags, supportsLinearEasing, supportsScrollTimeline, sync, time };