UNPKG

183 kBTypeScriptView Raw
1/// <reference types="react" />
2import * as react from 'react';
3import { SVGAttributes as SVGAttributes$1, CSSProperties, PropsWithoutRef, RefAttributes, ReactHTML, DetailedHTMLFactory, HTMLAttributes, useEffect, RefObject as RefObject$1 } from 'react';
4import * as react_jsx_runtime from 'react/jsx-runtime';
5
6type EasingFunction = (v: number) => number;
7type EasingModifier = (easing: EasingFunction) => EasingFunction;
8type BezierDefinition = [number, number, number, number];
9type EasingDefinition = BezierDefinition | "linear" | "easeIn" | "easeOut" | "easeInOut" | "circIn" | "circOut" | "circInOut" | "backIn" | "backOut" | "backInOut" | "anticipate";
10/**
11 * The easing function to use. Set as one of:
12 *
13 * - The name of an in-built easing function.
14 * - An array of four numbers to define a cubic bezier curve.
15 * - An easing function, that accepts and returns a progress value between `0` and `1`.
16 *
17 * @public
18 */
19type Easing = EasingDefinition | EasingFunction;
20
21type GenericKeyframesTarget<V> = [null, ...V[]] | V[];
22/**
23 * @public
24 */
25type ResolvedKeyframesTarget = GenericKeyframesTarget<number> | GenericKeyframesTarget<string>;
26/**
27 * @public
28 */
29type KeyframesTarget = ResolvedKeyframesTarget | GenericKeyframesTarget<CustomValueType>;
30/**
31 * @public
32 */
33type ResolvedSingleTarget = string | number;
34/**
35 * @public
36 */
37type SingleTarget = ResolvedSingleTarget | CustomValueType;
38/**
39 * @public
40 */
41type ResolvedValueTarget = ResolvedSingleTarget | ResolvedKeyframesTarget;
42/**
43 * @public
44 */
45type ValueTarget = SingleTarget | KeyframesTarget;
46/**
47 * Options for orchestrating the timing of animations.
48 *
49 * @public
50 */
51interface Orchestration {
52 /**
53 * Delay the animation by this duration (in seconds). Defaults to `0`.
54 *
55 * @remarks
56 * ```javascript
57 * const transition = {
58 * delay: 0.2
59 * }
60 * ```
61 *
62 * @public
63 */
64 delay?: number;
65 /**
66 * Describes the relationship between the transition and its children. Set
67 * to `false` by default.
68 *
69 * @remarks
70 * When using variants, the transition can be scheduled in relation to its
71 * children with either `"beforeChildren"` to finish this transition before
72 * starting children transitions, `"afterChildren"` to finish children
73 * transitions before starting this transition.
74 *
75 * ```jsx
76 * const list = {
77 * hidden: {
78 * opacity: 0,
79 * transition: { when: "afterChildren" }
80 * }
81 * }
82 *
83 * const item = {
84 * hidden: {
85 * opacity: 0,
86 * transition: { duration: 2 }
87 * }
88 * }
89 *
90 * return (
91 * <motion.ul variants={list} animate="hidden">
92 * <motion.li variants={item} />
93 * <motion.li variants={item} />
94 * </motion.ul>
95 * )
96 * ```
97 *
98 * @public
99 */
100 when?: false | "beforeChildren" | "afterChildren" | string;
101 /**
102 * When using variants, children animations will start after this duration
103 * (in seconds). You can add the `transition` property to both the `Frame` and the `variant` directly. Adding it to the `variant` generally offers more flexibility, as it allows you to customize the delay per visual state.
104 *
105 * ```jsx
106 * const container = {
107 * hidden: { opacity: 0 },
108 * show: {
109 * opacity: 1,
110 * transition: {
111 * delayChildren: 0.5
112 * }
113 * }
114 * }
115 *
116 * const item = {
117 * hidden: { opacity: 0 },
118 * show: { opacity: 1 }
119 * }
120 *
121 * return (
122 * <motion.ul
123 * variants={container}
124 * initial="hidden"
125 * animate="show"
126 * >
127 * <motion.li variants={item} />
128 * <motion.li variants={item} />
129 * </motion.ul>
130 * )
131 * ```
132 *
133 * @public
134 */
135 delayChildren?: number;
136 /**
137 * When using variants, animations of child components can be staggered by this
138 * duration (in seconds).
139 *
140 * For instance, if `staggerChildren` is `0.01`, the first child will be
141 * delayed by `0` seconds, the second by `0.01`, the third by `0.02` and so
142 * on.
143 *
144 * The calculated stagger delay will be added to `delayChildren`.
145 *
146 * ```jsx
147 * const container = {
148 * hidden: { opacity: 0 },
149 * show: {
150 * opacity: 1,
151 * transition: {
152 * staggerChildren: 0.5
153 * }
154 * }
155 * }
156 *
157 * const item = {
158 * hidden: { opacity: 0 },
159 * show: { opacity: 1 }
160 * }
161 *
162 * return (
163 * <motion.ol
164 * variants={container}
165 * initial="hidden"
166 * animate="show"
167 * >
168 * <motion.li variants={item} />
169 * <motion.li variants={item} />
170 * </motion.ol>
171 * )
172 * ```
173 *
174 * @public
175 */
176 staggerChildren?: number;
177 /**
178 * The direction in which to stagger children.
179 *
180 * A value of `1` staggers from the first to the last while `-1`
181 * staggers from the last to the first.
182 *
183 * ```jsx
184 * const container = {
185 * hidden: { opacity: 0 },
186 * show: {
187 * opacity: 1,
188 * transition: {
189 * staggerChildren: 0.5,
190 * staggerDirection: -1
191 * }
192 * }
193 * }
194 *
195 * const item = {
196 * hidden: { opacity: 0 },
197 * show: { opacity: 1 }
198 * }
199 *
200 * return (
201 * <motion.ul
202 * variants={container}
203 * initial="hidden"
204 * animate="show"
205 * >
206 * <motion.li variants={item} size={50} />
207 * <motion.li variants={item} size={50} />
208 * </motion.ul>
209 * )
210 * ```
211 *
212 * @public
213 */
214 staggerDirection?: number;
215}
216interface Repeat {
217 /**
218 * The number of times to repeat the transition. Set to `Infinity` for perpetual repeating.
219 *
220 * Without setting `repeatType`, this will loop the animation.
221 *
222 * ```jsx
223 * <motion.div
224 * animate={{ rotate: 180 }}
225 * transition={{ repeat: Infinity, duration: 2 }}
226 * />
227 * ```
228 *
229 * @public
230 */
231 repeat?: number;
232 /**
233 * How to repeat the animation. This can be either:
234 *
235 * "loop": Repeats the animation from the start
236 *
237 * "reverse": Alternates between forward and backwards playback
238 *
239 * "mirror": Switches `from` and `to` alternately
240 *
241 * ```jsx
242 * <motion.div
243 * animate={{ rotate: 180 }}
244 * transition={{
245 * repeat: 1,
246 * repeatType: "reverse",
247 * duration: 2
248 * }}
249 * />
250 * ```
251 *
252 * @public
253 */
254 repeatType?: "loop" | "reverse" | "mirror";
255 /**
256 * When repeating an animation, `repeatDelay` will set the
257 * duration of the time to wait, in seconds, between each repetition.
258 *
259 * ```jsx
260 * <motion.div
261 * animate={{ rotate: 180 }}
262 * transition={{ repeat: Infinity, repeatDelay: 1 }}
263 * />
264 * ```
265 *
266 * @public
267 */
268 repeatDelay?: number;
269}
270/**
271 * An animation that animates between two or more values over a specific duration of time.
272 * This is the default animation for non-physical values like `color` and `opacity`.
273 *
274 * @public
275 */
276interface Tween extends Repeat {
277 /**
278 * Set `type` to `"tween"` to use a duration-based tween animation.
279 * If any non-orchestration `transition` values are set without a `type` property,
280 * this is used as the default animation.
281 *
282 * ```jsx
283 * <motion.path
284 * animate={{ pathLength: 1 }}
285 * transition={{ duration: 2, type: "tween" }}
286 * />
287 * ```
288 *
289 * @public
290 */
291 type?: "tween";
292 /**
293 * The duration of the tween animation. Set to `0.3` by default, 0r `0.8` if animating a series of keyframes.
294 *
295 * ```jsx
296 * const variants = {
297 * visible: {
298 * opacity: 1,
299 * transition: { duration: 2 }
300 * }
301 * }
302 * ```
303 *
304 * @public
305 */
306 duration?: number;
307 /**
308 * The easing function to use. Set as one of the below.
309 *
310 * - The name of an existing easing function.
311 *
312 * - An array of four numbers to define a cubic bezier curve.
313 *
314 * - An easing function, that accepts and returns a value `0-1`.
315 *
316 * If the animating value is set as an array of multiple values for a keyframes
317 * animation, `ease` can be set as an array of easing functions to set different easings between
318 * each of those values.
319 *
320 *
321 * ```jsx
322 * <motion.div
323 * animate={{ opacity: 0 }}
324 * transition={{ ease: [0.17, 0.67, 0.83, 0.67] }}
325 * />
326 * ```
327 *
328 * @public
329 */
330 ease?: Easing | Easing[];
331 /**
332 * When animating keyframes, `times` can be used to determine where in the animation each keyframe is reached.
333 * Each value in `times` is a value between `0` and `1`, representing `duration`.
334 *
335 * There must be the same number of `times` as there are keyframes.
336 * Defaults to an array of evenly-spread durations.
337 *
338 * ```jsx
339 * <motion.div
340 * animate={{ scale: [0, 1, 0.5, 1] }}
341 * transition={{ times: [0, 0.1, 0.9, 1] }}
342 * />
343 * ```
344 *
345 * @public
346 */
347 times?: number[];
348 /**
349 * When animating keyframes, `easings` can be used to define easing functions between each keyframe. This array should be one item fewer than the number of keyframes, as these easings apply to the transitions between the keyframes.
350 *
351 * ```jsx
352 * <motion.div
353 * animate={{ backgroundColor: ["#0f0", "#00f", "#f00"] }}
354 * transition={{ easings: ["easeIn", "easeOut"] }}
355 * />
356 * ```
357 *
358 * @public
359 */
360 easings?: Easing[];
361 /**
362 * The value to animate from.
363 * By default, this is the current state of the animating value.
364 *
365 * ```jsx
366 * <motion.div
367 * animate={{ rotate: 180 }}
368 * transition={{ from: 90, duration: 2 }}
369 * />
370 * ```
371 *
372 * @public
373 */
374 from?: number | string;
375}
376/**
377 * An animation that simulates spring physics for realistic motion.
378 * This is the default animation for physical values like `x`, `y`, `scale` and `rotate`.
379 *
380 * @public
381 */
382interface Spring extends Repeat {
383 /**
384 * Set `type` to `"spring"` to animate using spring physics for natural
385 * movement. Type is set to `"spring"` by default.
386 *
387 * ```jsx
388 * <motion.div
389 * animate={{ rotate: 180 }}
390 * transition={{ type: 'spring' }}
391 * />
392 * ```
393 *
394 * @public
395 */
396 type: "spring";
397 /**
398 * Stiffness of the spring. Higher values will create more sudden movement.
399 * Set to `100` by default.
400 *
401 * ```jsx
402 * <motion.section
403 * animate={{ rotate: 180 }}
404 * transition={{ type: 'spring', stiffness: 50 }}
405 * />
406 * ```
407 *
408 * @public
409 */
410 stiffness?: number;
411 /**
412 * Strength of opposing force. If set to 0, spring will oscillate
413 * indefinitely. Set to `10` by default.
414 *
415 * ```jsx
416 * <motion.a
417 * animate={{ rotate: 180 }}
418 * transition={{ type: 'spring', damping: 300 }}
419 * />
420 * ```
421 *
422 * @public
423 */
424 damping?: number;
425 /**
426 * Mass of the moving object. Higher values will result in more lethargic
427 * movement. Set to `1` by default.
428 *
429 * ```jsx
430 * <motion.feTurbulence
431 * animate={{ baseFrequency: 0.5 } as any}
432 * transition={{ type: "spring", mass: 0.5 }}
433 * />
434 * ```
435 *
436 * @public
437 */
438 mass?: number;
439 /**
440 * The duration of the animation, defined in seconds. Spring animations can be a maximum of 10 seconds.
441 *
442 * If `bounce` is set, this defaults to `0.8`.
443 *
444 * Note: `duration` and `bounce` will be overridden if `stiffness`, `damping` or `mass` are set.
445 *
446 * ```jsx
447 * <motion.div
448 * animate={{ x: 100 }}
449 * transition={{ type: "spring", duration: 0.8 }}
450 * />
451 * ```
452 *
453 * @public
454 */
455 duration?: number;
456 /**
457 * `bounce` determines the "bounciness" of a spring animation.
458 *
459 * `0` is no bounce, and `1` is extremely bouncy.
460 *
461 * If `duration` is set, this defaults to `0.25`.
462 *
463 * Note: `bounce` and `duration` will be overridden if `stiffness`, `damping` or `mass` are set.
464 *
465 * ```jsx
466 * <motion.div
467 * animate={{ x: 100 }}
468 * transition={{ type: "spring", bounce: 0.25 }}
469 * />
470 * ```
471 *
472 * @public
473 */
474 bounce?: number;
475 /**
476 * End animation if absolute speed (in units per second) drops below this
477 * value and delta is smaller than `restDelta`. Set to `0.01` by default.
478 *
479 * ```jsx
480 * <motion.div
481 * animate={{ rotate: 180 }}
482 * transition={{ type: 'spring', restSpeed: 0.5 }}
483 * />
484 * ```
485 *
486 * @public
487 */
488 restSpeed?: number;
489 /**
490 * End animation if distance is below this value and speed is below
491 * `restSpeed`. When animation ends, spring gets “snapped” to. Set to
492 * `0.01` by default.
493 *
494 * ```jsx
495 * <motion.div
496 * animate={{ rotate: 180 }}
497 * transition={{ type: 'spring', restDelta: 0.5 }}
498 * />
499 * ```
500 *
501 * @public
502 */
503 restDelta?: number;
504 /**
505 * The value to animate from.
506 * By default, this is the initial state of the animating value.
507 *
508 * ```jsx
509 * <motion.div
510 * animate={{ rotate: 180 }}
511 * transition={{ type: 'spring', from: 90 }}
512 * />
513 * ```
514 *
515 * @public
516 */
517 from?: number | string;
518 /**
519 * The initial velocity of the spring. By default this is the current velocity of the component.
520 *
521 * ```jsx
522 * <motion.div
523 * animate={{ rotate: 180 }}
524 * transition={{ type: 'spring', velocity: 2 }}
525 * />
526 * ```
527 *
528 * @public
529 */
530 velocity?: number;
531}
532/**
533 * An animation that decelerates a value based on its initial velocity,
534 * usually used to implement inertial scrolling.
535 *
536 * Optionally, `min` and `max` boundaries can be defined, and inertia
537 * will snap to these with a spring animation.
538 *
539 * This animation will automatically precalculate a target value,
540 * which can be modified with the `modifyTarget` property.
541 *
542 * This allows you to add snap-to-grid or similar functionality.
543 *
544 * Inertia is also the animation used for `dragTransition`, and can be configured via that prop.
545 *
546 * @public
547 */
548interface Inertia {
549 /**
550 * Set `type` to animate using the inertia animation. Set to `"tween"` by
551 * default. This can be used for natural deceleration, like momentum scrolling.
552 *
553 * ```jsx
554 * <motion.div
555 * animate={{ rotate: 180 }}
556 * transition={{ type: "inertia", velocity: 50 }}
557 * />
558 * ```
559 *
560 * @public
561 */
562 type: "inertia";
563 /**
564 * A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.
565 *
566 * ```jsx
567 * <motion.div
568 * drag
569 * dragTransition={{
570 * power: 0,
571 * // Snap calculated target to nearest 50 pixels
572 * modifyTarget: target => Math.round(target / 50) * 50
573 * }}
574 * />
575 * ```
576 *
577 * @public
578 */
579 modifyTarget?(v: number): number;
580 /**
581 * If `min` or `max` is set, this affects the stiffness of the bounce
582 * spring. Higher values will create more sudden movement. Set to `500` by
583 * default.
584 *
585 * ```jsx
586 * <motion.div
587 * drag
588 * dragTransition={{
589 * min: 0,
590 * max: 100,
591 * bounceStiffness: 100
592 * }}
593 * />
594 * ```
595 *
596 * @public
597 */
598 bounceStiffness?: number;
599 /**
600 * If `min` or `max` is set, this affects the damping of the bounce spring.
601 * If set to `0`, spring will oscillate indefinitely. Set to `10` by
602 * default.
603 *
604 * ```jsx
605 * <motion.div
606 * drag
607 * dragTransition={{
608 * min: 0,
609 * max: 100,
610 * bounceDamping: 8
611 * }}
612 * />
613 * ```
614 *
615 * @public
616 */
617 bounceDamping?: number;
618 /**
619 * A higher power value equals a further target. Set to `0.8` by default.
620 *
621 * ```jsx
622 * <motion.div
623 * drag
624 * dragTransition={{ power: 0.2 }}
625 * />
626 * ```
627 *
628 * @public
629 */
630 power?: number;
631 /**
632 * Adjusting the time constant will change the duration of the
633 * deceleration, thereby affecting its feel. Set to `700` by default.
634 *
635 * ```jsx
636 * <motion.div
637 * drag
638 * dragTransition={{ timeConstant: 200 }}
639 * />
640 * ```
641 *
642 * @public
643 */
644 timeConstant?: number;
645 /**
646 * End the animation if the distance to the animation target is below this value, and the absolute speed is below `restSpeed`.
647 * When the animation ends, the value gets snapped to the animation target. Set to `0.01` by default.
648 * Generally the default values provide smooth animation endings, only in rare cases should you need to customize these.
649 *
650 * ```jsx
651 * <motion.div
652 * drag
653 * dragTransition={{ restDelta: 10 }}
654 * />
655 * ```
656 *
657 * @public
658 */
659 restDelta?: number;
660 /**
661 * Minimum constraint. If set, the value will "bump" against this value (or immediately spring to it if the animation starts as less than this value).
662 *
663 * ```jsx
664 * <motion.div
665 * drag
666 * dragTransition={{ min: 0, max: 100 }}
667 * />
668 * ```
669 *
670 * @public
671 */
672 min?: number;
673 /**
674 * Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).
675 *
676 * ```jsx
677 * <motion.div
678 * drag
679 * dragTransition={{ min: 0, max: 100 }}
680 * />
681 * ```
682 *
683 * @public
684 */
685 max?: number;
686 /**
687 * The value to animate from. By default, this is the current state of the animating value.
688 *
689 * ```jsx
690 * <Frame
691 * drag
692 * dragTransition={{ from: 50 }}
693 * />
694 * ```
695 *
696 * @public
697 */
698 from?: number | string;
699 /**
700 * The initial velocity of the animation.
701 * By default this is the current velocity of the component.
702 *
703 * ```jsx
704 * <motion.div
705 * animate={{ rotate: 180 }}
706 * transition={{ type: 'inertia', velocity: 200 }}
707 * />
708 * ```
709 *
710 * @public
711 */
712 velocity?: number;
713}
714/**
715 * Keyframes tweens between multiple `values`.
716 *
717 * These tweens can be arranged using the `duration`, `easings`, and `times` properties.
718 */
719interface Keyframes {
720 /**
721 * Set `type` to `"keyframes"` to animate using the keyframes animation.
722 * Set to `"tween"` by default. This can be used to animate between a series of values.
723 *
724 * @public
725 */
726 type: "keyframes";
727 /**
728 * An array of numbers between 0 and 1, where `1` represents the `total` duration.
729 *
730 * Each value represents at which point during the animation each item in the animation target should be hit, so the array should be the same length as `values`.
731 *
732 * Defaults to an array of evenly-spread durations.
733 *
734 * @public
735 */
736 times?: number[];
737 /**
738 * An array of easing functions for each generated tween, or a single easing function applied to all tweens.
739 *
740 * This array should be one item less than `values`, as these easings apply to the transitions *between* the `values`.
741 *
742 * ```jsx
743 * const transition = {
744 * backgroundColor: {
745 * type: 'keyframes',
746 * easings: ['circIn', 'circOut']
747 * }
748 * }
749 * ```
750 *
751 * @public
752 */
753 ease?: Easing | Easing[];
754 /**
755 * The total duration of the animation. Set to `0.3` by default.
756 *
757 * ```jsx
758 * const transition = {
759 * type: "keyframes",
760 * duration: 2
761 * }
762 *
763 * <Frame
764 * animate={{ opacity: 0 }}
765 * transition={transition}
766 * />
767 * ```
768 *
769 * @public
770 */
771 duration?: number;
772 /**
773 * @public
774 */
775 repeatDelay?: number;
776}
777/**
778 * @public
779 */
780interface Just {
781 /**
782 * @public
783 */
784 type: "just";
785}
786/**
787 * @public
788 */
789interface None {
790 /**
791 * Set `type` to `false` for an instant transition.
792 *
793 * @public
794 */
795 type: false;
796}
797/**
798 * @public
799 */
800type PermissiveTransitionDefinition = {
801 [key: string]: any;
802};
803/**
804 * @public
805 */
806type TransitionDefinition = Tween | Spring | Keyframes | Inertia | Just | None | PermissiveTransitionDefinition;
807type TransitionMap = Orchestration & TransitionDefinition & {
808 [key: string]: TransitionDefinition;
809};
810/**
811 * Transition props
812 *
813 * @public
814 */
815type Transition$1 = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap);
816type Omit$1<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
817type CSSPropertiesWithoutTransitionOrSingleTransforms = Omit$1<CSSProperties, "transition" | "rotate" | "scale" | "perspective">;
818type SVGTransformAttributes = {
819 attrX?: number;
820 attrY?: number;
821 attrScale?: number;
822};
823type TargetProperties = CSSPropertiesWithoutTransitionOrSingleTransforms & SVGAttributes$1<SVGElement> & SVGTransformAttributes & TransformProperties & CustomStyles & SVGPathProperties;
824/**
825 * @public
826 */
827type MakeCustomValueType<T> = {
828 [K in keyof T]: T[K] | CustomValueType;
829};
830/**
831 * @public
832 */
833type Target = MakeCustomValueType<TargetProperties>;
834/**
835 * @public
836 */
837type MakeKeyframes<T> = {
838 [K in keyof T]: T[K] | T[K][] | [null, ...T[K][]];
839};
840/**
841 * @public
842 */
843type TargetWithKeyframes = MakeKeyframes<Target>;
844/**
845 * An object that specifies values to animate to. Each value may be set either as
846 * a single value, or an array of values.
847 *
848 * It may also option contain these properties:
849 *
850 * - `transition`: Specifies transitions for all or individual values.
851 * - `transitionEnd`: Specifies values to set when the animation finishes.
852 *
853 * ```jsx
854 * const target = {
855 * x: "0%",
856 * opacity: 0,
857 * transition: { duration: 1 },
858 * transitionEnd: { display: "none" }
859 * }
860 * ```
861 *
862 * @public
863 */
864type TargetAndTransition = TargetWithKeyframes & {
865 transition?: Transition$1;
866 transitionEnd?: Target;
867};
868type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string;
869/**
870 * @public
871 */
872type Variant = TargetAndTransition | TargetResolver;
873/**
874 * @public
875 */
876type Variants = {
877 [key: string]: Variant;
878};
879/**
880 * @public
881 */
882interface CustomValueType {
883 mix: (from: any, to: any) => (p: number) => number | string;
884 toValue: () => number | string;
885}
886
887/**
888 * An update function. It accepts a timestamp used to advance the animation.
889 */
890type Update = (timestamp: number) => void;
891/**
892 * Drivers accept a update function and call it at an interval. This interval
893 * could be a synchronous loop, a setInterval, or tied to the device's framerate.
894 */
895interface DriverControls {
896 start: () => void;
897 stop: () => void;
898 now: () => number;
899}
900type Driver = (update: Update) => DriverControls;
901
902interface SVGAttributes {
903 accentHeight?: number | string | undefined;
904 accumulate?: "none" | "sum" | undefined;
905 additive?: "replace" | "sum" | undefined;
906 alignmentBaseline?: "auto" | "baseline" | "before-edge" | "text-before-edge" | "middle" | "central" | "after-edge" | "text-after-edge" | "ideographic" | "alphabetic" | "hanging" | "mathematical" | "inherit" | undefined;
907 allowReorder?: "no" | "yes" | undefined;
908 alphabetic?: number | string | undefined;
909 amplitude?: number | string | undefined;
910 arabicForm?: "initial" | "medial" | "terminal" | "isolated" | undefined;
911 ascent?: number | string | undefined;
912 attributeName?: string | undefined;
913 attributeType?: string | undefined;
914 autoReverse?: boolean | undefined;
915 azimuth?: number | string | undefined;
916 baseFrequency?: number | string | undefined;
917 baselineShift?: number | string | undefined;
918 baseProfile?: number | string | undefined;
919 bbox?: number | string | undefined;
920 begin?: number | string | undefined;
921 bias?: number | string | undefined;
922 by?: number | string | undefined;
923 calcMode?: number | string | undefined;
924 capHeight?: number | string | undefined;
925 clip?: number | string | undefined;
926 clipPath?: string | undefined;
927 clipPathUnits?: number | string | undefined;
928 clipRule?: number | string | undefined;
929 colorInterpolation?: number | string | undefined;
930 colorInterpolationFilters?: "auto" | "sRGB" | "linearRGB" | "inherit" | undefined;
931 colorProfile?: number | string | undefined;
932 colorRendering?: number | string | undefined;
933 contentScriptType?: number | string | undefined;
934 contentStyleType?: number | string | undefined;
935 cursor?: number | string | undefined;
936 cx?: number | string | undefined;
937 cy?: number | string | undefined;
938 d?: string | undefined;
939 decelerate?: number | string | undefined;
940 descent?: number | string | undefined;
941 diffuseConstant?: number | string | undefined;
942 direction?: number | string | undefined;
943 display?: number | string | undefined;
944 divisor?: number | string | undefined;
945 dominantBaseline?: number | string | undefined;
946 dur?: number | string | undefined;
947 dx?: number | string | undefined;
948 dy?: number | string | undefined;
949 edgeMode?: number | string | undefined;
950 elevation?: number | string | undefined;
951 enableBackground?: number | string | undefined;
952 end?: number | string | undefined;
953 exponent?: number | string | undefined;
954 externalResourcesRequired?: boolean | undefined;
955 fill?: string | undefined;
956 fillOpacity?: number | string | undefined;
957 fillRule?: "nonzero" | "evenodd" | "inherit" | undefined;
958 filter?: string | undefined;
959 filterRes?: number | string | undefined;
960 filterUnits?: number | string | undefined;
961 floodColor?: number | string | undefined;
962 floodOpacity?: number | string | undefined;
963 focusable?: boolean | "auto" | undefined;
964 fontFamily?: string | undefined;
965 fontSize?: number | string | undefined;
966 fontSizeAdjust?: number | string | undefined;
967 fontStretch?: number | string | undefined;
968 fontStyle?: number | string | undefined;
969 fontVariant?: number | string | undefined;
970 fontWeight?: number | string | undefined;
971 format?: number | string | undefined;
972 fr?: number | string | undefined;
973 from?: number | string | undefined;
974 fx?: number | string | undefined;
975 fy?: number | string | undefined;
976 g1?: number | string | undefined;
977 g2?: number | string | undefined;
978 glyphName?: number | string | undefined;
979 glyphOrientationHorizontal?: number | string | undefined;
980 glyphOrientationVertical?: number | string | undefined;
981 glyphRef?: number | string | undefined;
982 gradientTransform?: string | undefined;
983 gradientUnits?: string | undefined;
984 hanging?: number | string | undefined;
985 horizAdvX?: number | string | undefined;
986 horizOriginX?: number | string | undefined;
987 href?: string | undefined;
988 ideographic?: number | string | undefined;
989 imageRendering?: number | string | undefined;
990 in2?: number | string | undefined;
991 in?: string | undefined;
992 intercept?: number | string | undefined;
993 k1?: number | string | undefined;
994 k2?: number | string | undefined;
995 k3?: number | string | undefined;
996 k4?: number | string | undefined;
997 k?: number | string | undefined;
998 kernelMatrix?: number | string | undefined;
999 kernelUnitLength?: number | string | undefined;
1000 kerning?: number | string | undefined;
1001 keyPoints?: number | string | undefined;
1002 keySplines?: number | string | undefined;
1003 keyTimes?: number | string | undefined;
1004 lengthAdjust?: number | string | undefined;
1005 letterSpacing?: number | string | undefined;
1006 lightingColor?: number | string | undefined;
1007 limitingConeAngle?: number | string | undefined;
1008 local?: number | string | undefined;
1009 markerEnd?: string | undefined;
1010 markerHeight?: number | string | undefined;
1011 markerMid?: string | undefined;
1012 markerStart?: string | undefined;
1013 markerUnits?: number | string | undefined;
1014 markerWidth?: number | string | undefined;
1015 mask?: string | undefined;
1016 maskContentUnits?: number | string | undefined;
1017 maskUnits?: number | string | undefined;
1018 mathematical?: number | string | undefined;
1019 mode?: number | string | undefined;
1020 numOctaves?: number | string | undefined;
1021 offset?: number | string | undefined;
1022 opacity?: number | string | undefined;
1023 operator?: number | string | undefined;
1024 order?: number | string | undefined;
1025 orient?: number | string | undefined;
1026 orientation?: number | string | undefined;
1027 origin?: number | string | undefined;
1028 overflow?: number | string | undefined;
1029 overlinePosition?: number | string | undefined;
1030 overlineThickness?: number | string | undefined;
1031 paintOrder?: number | string | undefined;
1032 panose1?: number | string | undefined;
1033 path?: string | undefined;
1034 pathLength?: number | string | undefined;
1035 patternContentUnits?: string | undefined;
1036 patternTransform?: number | string | undefined;
1037 patternUnits?: string | undefined;
1038 pointerEvents?: number | string | undefined;
1039 points?: string | undefined;
1040 pointsAtX?: number | string | undefined;
1041 pointsAtY?: number | string | undefined;
1042 pointsAtZ?: number | string | undefined;
1043 preserveAlpha?: boolean | undefined;
1044 preserveAspectRatio?: string | undefined;
1045 primitiveUnits?: number | string | undefined;
1046 r?: number | string | undefined;
1047 radius?: number | string | undefined;
1048 refX?: number | string | undefined;
1049 refY?: number | string | undefined;
1050 renderingIntent?: number | string | undefined;
1051 repeatCount?: number | string | undefined;
1052 repeatDur?: number | string | undefined;
1053 requiredExtensions?: number | string | undefined;
1054 requiredFeatures?: number | string | undefined;
1055 restart?: number | string | undefined;
1056 result?: string | undefined;
1057 rotate?: number | string | undefined;
1058 rx?: number | string | undefined;
1059 ry?: number | string | undefined;
1060 scale?: number | string | undefined;
1061 seed?: number | string | undefined;
1062 shapeRendering?: number | string | undefined;
1063 slope?: number | string | undefined;
1064 spacing?: number | string | undefined;
1065 specularConstant?: number | string | undefined;
1066 specularExponent?: number | string | undefined;
1067 speed?: number | string | undefined;
1068 spreadMethod?: string | undefined;
1069 startOffset?: number | string | undefined;
1070 stdDeviation?: number | string | undefined;
1071 stemh?: number | string | undefined;
1072 stemv?: number | string | undefined;
1073 stitchTiles?: number | string | undefined;
1074 stopColor?: string | undefined;
1075 stopOpacity?: number | string | undefined;
1076 strikethroughPosition?: number | string | undefined;
1077 strikethroughThickness?: number | string | undefined;
1078 string?: number | string | undefined;
1079 stroke?: string | undefined;
1080 strokeDasharray?: string | number | undefined;
1081 strokeDashoffset?: string | number | undefined;
1082 strokeLinecap?: "butt" | "round" | "square" | "inherit" | undefined;
1083 strokeLinejoin?: "miter" | "round" | "bevel" | "inherit" | undefined;
1084 strokeMiterlimit?: number | string | undefined;
1085 strokeOpacity?: number | string | undefined;
1086 strokeWidth?: number | string | undefined;
1087 surfaceScale?: number | string | undefined;
1088 systemLanguage?: number | string | undefined;
1089 tableValues?: number | string | undefined;
1090 targetX?: number | string | undefined;
1091 targetY?: number | string | undefined;
1092 textAnchor?: string | undefined;
1093 textDecoration?: number | string | undefined;
1094 textLength?: number | string | undefined;
1095 textRendering?: number | string | undefined;
1096 to?: number | string | undefined;
1097 transform?: string | undefined;
1098 u1?: number | string | undefined;
1099 u2?: number | string | undefined;
1100 underlinePosition?: number | string | undefined;
1101 underlineThickness?: number | string | undefined;
1102 unicode?: number | string | undefined;
1103 unicodeBidi?: number | string | undefined;
1104 unicodeRange?: number | string | undefined;
1105 unitsPerEm?: number | string | undefined;
1106 vAlphabetic?: number | string | undefined;
1107 values?: string | undefined;
1108 vectorEffect?: number | string | undefined;
1109 version?: string | undefined;
1110 vertAdvY?: number | string | undefined;
1111 vertOriginX?: number | string | undefined;
1112 vertOriginY?: number | string | undefined;
1113 vHanging?: number | string | undefined;
1114 vIdeographic?: number | string | undefined;
1115 viewBox?: string | undefined;
1116 viewTarget?: number | string | undefined;
1117 visibility?: number | string | undefined;
1118 vMathematical?: number | string | undefined;
1119 widths?: number | string | undefined;
1120 wordSpacing?: number | string | undefined;
1121 writingMode?: number | string | undefined;
1122 x1?: number | string | undefined;
1123 x2?: number | string | undefined;
1124 x?: number | string | undefined;
1125 xChannelSelector?: string | undefined;
1126 xHeight?: number | string | undefined;
1127 xlinkActuate?: string | undefined;
1128 xlinkArcrole?: string | undefined;
1129 xlinkHref?: string | undefined;
1130 xlinkRole?: string | undefined;
1131 xlinkShow?: string | undefined;
1132 xlinkTitle?: string | undefined;
1133 xlinkType?: string | undefined;
1134 xmlBase?: string | undefined;
1135 xmlLang?: string | undefined;
1136 xmlns?: string | undefined;
1137 xmlnsXlink?: string | undefined;
1138 xmlSpace?: string | undefined;
1139 y1?: number | string | undefined;
1140 y2?: number | string | undefined;
1141 y?: number | string | undefined;
1142 yChannelSelector?: string | undefined;
1143 z?: number | string | undefined;
1144 zoomAndPan?: string | undefined;
1145}
1146
1147interface ProgressTimeline {
1148 currentTime: null | {
1149 value: number;
1150 };
1151 cancel?: VoidFunction;
1152}
1153
1154type Process = (data: FrameData) => void;
1155type Schedule = (process: Process, keepAlive?: boolean, immediate?: boolean) => Process;
1156interface Step {
1157 schedule: Schedule;
1158 cancel: (process: Process) => void;
1159 process: (data: FrameData) => void;
1160}
1161type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
1162type Batcher = {
1163 [key in StepId]: Schedule;
1164};
1165type Steps = {
1166 [key in StepId]: Step;
1167};
1168interface FrameData {
1169 delta: number;
1170 timestamp: number;
1171 isProcessing: boolean;
1172}
1173
1174interface Point {
1175 x: number;
1176 y: number;
1177}
1178interface Axis {
1179 min: number;
1180 max: number;
1181}
1182interface Box {
1183 x: Axis;
1184 y: Axis;
1185}
1186interface BoundingBox {
1187 top: number;
1188 right: number;
1189 bottom: number;
1190 left: number;
1191}
1192interface AxisDelta {
1193 translate: number;
1194 scale: number;
1195 origin: number;
1196 originPoint: number;
1197}
1198interface Delta {
1199 x: AxisDelta;
1200 y: AxisDelta;
1201}
1202type TransformPoint = (point: Point) => Point;
1203
1204type ReducedMotionConfig = "always" | "never" | "user";
1205/**
1206 * @public
1207 */
1208interface MotionConfigContext {
1209 /**
1210 * Internal, exported only for usage in Framer
1211 */
1212 transformPagePoint: TransformPoint;
1213 /**
1214 * Internal. Determines whether this is a static context ie the Framer canvas. If so,
1215 * it'll disable all dynamic functionality.
1216 */
1217 isStatic: boolean;
1218 /**
1219 * Defines a new default transition for the entire tree.
1220 *
1221 * @public
1222 */
1223 transition?: Transition$1;
1224 /**
1225 * If true, will respect the device prefersReducedMotion setting by switching
1226 * transform animations off.
1227 *
1228 * @public
1229 */
1230 reducedMotion?: ReducedMotionConfig;
1231 /**
1232 * A custom `nonce` attribute used when wanting to enforce a Content Security Policy (CSP).
1233 * For more details see:
1234 * https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Content-Security-Policy/style-src#unsafe_inline_styles
1235 *
1236 * @public
1237 */
1238 nonce?: string;
1239}
1240/**
1241 * @public
1242 */
1243declare const MotionConfigContext: react.Context<MotionConfigContext>;
1244
1245declare class NodeStack {
1246 lead?: IProjectionNode;
1247 prevLead?: IProjectionNode;
1248 members: IProjectionNode[];
1249 add(node: IProjectionNode): void;
1250 remove(node: IProjectionNode): void;
1251 relegate(node: IProjectionNode): boolean;
1252 promote(node: IProjectionNode, preserveFollowOpacity?: boolean): void;
1253 exitAnimationComplete(): void;
1254 scheduleRender(): void;
1255 /**
1256 * Clear any leads that have been removed this render to prevent them from being
1257 * used in future animations and to prevent memory leaks
1258 */
1259 removeLeadSnapshot(): void;
1260}
1261
1262interface WithDepth {
1263 depth: number;
1264}
1265
1266declare class FlatTree {
1267 private children;
1268 private isDirty;
1269 add(child: WithDepth): void;
1270 remove(child: WithDepth): void;
1271 forEach(callback: (child: WithDepth) => void): void;
1272}
1273
1274interface SwitchLayoutGroup {
1275 register?: (member: IProjectionNode) => void;
1276 deregister?: (member: IProjectionNode) => void;
1277}
1278type InitialPromotionConfig = {
1279 /**
1280 * The initial transition to use when the elements in this group mount (and automatically promoted).
1281 * Subsequent updates should provide a transition in the promote method.
1282 */
1283 transition?: Transition$1;
1284 /**
1285 * If the follow tree should preserve its opacity when the lead is promoted on mount
1286 */
1287 shouldPreserveFollowOpacity?: (member: IProjectionNode) => boolean;
1288};
1289type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
1290/**
1291 * Internal, exported only for usage in Framer
1292 */
1293declare const SwitchLayoutGroupContext: react.Context<SwitchLayoutGroupContext>;
1294
1295interface Measurements {
1296 animationId: number;
1297 measuredBox: Box;
1298 layoutBox: Box;
1299 latestValues: ResolvedValues;
1300 source: number;
1301}
1302type Phase = "snapshot" | "measure";
1303interface ScrollMeasurements {
1304 animationId: number;
1305 phase: Phase;
1306 isRoot: boolean;
1307 offset: Point;
1308}
1309type LayoutEvents = "willUpdate" | "didUpdate" | "beforeMeasure" | "measure" | "projectionUpdate" | "animationStart" | "animationComplete";
1310interface IProjectionNode<I = unknown> {
1311 id: number;
1312 animationId: number;
1313 parent?: IProjectionNode;
1314 relativeParent?: IProjectionNode;
1315 root?: IProjectionNode;
1316 children: Set<IProjectionNode>;
1317 path: IProjectionNode[];
1318 nodes?: FlatTree;
1319 depth: number;
1320 instance: I;
1321 mount: (node: I, isLayoutDirty?: boolean) => void;
1322 unmount: () => void;
1323 options: ProjectionNodeOptions;
1324 setOptions(options: ProjectionNodeOptions): void;
1325 layout?: Measurements;
1326 snapshot?: Measurements;
1327 target?: Box;
1328 relativeTarget?: Box;
1329 relativeTargetOrigin?: Box;
1330 targetDelta?: Delta;
1331 targetWithTransforms?: Box;
1332 scroll?: ScrollMeasurements;
1333 treeScale?: Point;
1334 projectionDelta?: Delta;
1335 projectionDeltaWithTransform?: Delta;
1336 latestValues: ResolvedValues;
1337 isLayoutDirty: boolean;
1338 isProjectionDirty: boolean;
1339 isSharedProjectionDirty: boolean;
1340 isTransformDirty: boolean;
1341 resolvedRelativeTargetAt?: number;
1342 shouldResetTransform: boolean;
1343 prevTransformTemplateValue: string | undefined;
1344 isUpdateBlocked(): boolean;
1345 updateManuallyBlocked: boolean;
1346 updateBlockedByResize: boolean;
1347 blockUpdate(): void;
1348 unblockUpdate(): void;
1349 isUpdating: boolean;
1350 needsReset: boolean;
1351 startUpdate(): void;
1352 willUpdate(notifyListeners?: boolean): void;
1353 didUpdate(): void;
1354 measure(removeTransform?: boolean): Measurements;
1355 measurePageBox(): Box;
1356 updateLayout(): void;
1357 updateSnapshot(): void;
1358 clearSnapshot(): void;
1359 updateScroll(phase?: Phase): void;
1360 scheduleUpdateProjection(): void;
1361 scheduleCheckAfterUnmount(): void;
1362 checkUpdateFailed(): void;
1363 sharedNodes: Map<string, NodeStack>;
1364 registerSharedNode(id: string, node: IProjectionNode): void;
1365 getStack(): NodeStack | undefined;
1366 isVisible: boolean;
1367 hide(): void;
1368 show(): void;
1369 scheduleRender(notifyAll?: boolean): void;
1370 getClosestProjectingParent(): IProjectionNode | undefined;
1371 setTargetDelta(delta: Delta): void;
1372 resetTransform(): void;
1373 resetSkewAndRotation(): void;
1374 applyTransform(box: Box, transformOnly?: boolean): Box;
1375 resolveTargetDelta(force?: boolean): void;
1376 calcProjection(): void;
1377 getProjectionStyles(styleProp?: MotionStyle): MotionStyle | undefined;
1378 clearMeasurements(): void;
1379 resetTree(): void;
1380 isProjecting(): boolean;
1381 animationValues?: ResolvedValues;
1382 currentAnimation?: AnimationPlaybackControls;
1383 isTreeAnimating?: boolean;
1384 isAnimationBlocked?: boolean;
1385 isTreeAnimationBlocked: () => boolean;
1386 setAnimationOrigin(delta: Delta): void;
1387 startAnimation(transition: Transition$1): void;
1388 finishAnimation(): void;
1389 hasCheckedOptimisedAppear: boolean;
1390 isLead(): boolean;
1391 promote(options?: {
1392 needsReset?: boolean;
1393 transition?: Transition$1;
1394 preserveFollowOpacity?: boolean;
1395 }): void;
1396 relegate(): boolean;
1397 resumeFrom?: IProjectionNode;
1398 resumingFrom?: IProjectionNode;
1399 isPresent?: boolean;
1400 addEventListener(name: LayoutEvents, handler: any): VoidFunction;
1401 notifyListeners(name: LayoutEvents, ...args: any): void;
1402 hasListeners(name: LayoutEvents): boolean;
1403 hasTreeAnimated: boolean;
1404 preserveOpacity?: boolean;
1405}
1406interface ProjectionNodeOptions {
1407 animate?: boolean;
1408 layoutScroll?: boolean;
1409 layoutRoot?: boolean;
1410 alwaysMeasureLayout?: boolean;
1411 scheduleRender?: VoidFunction;
1412 onExitComplete?: VoidFunction;
1413 animationType?: "size" | "position" | "both" | "preserve-aspect";
1414 layoutId?: string;
1415 layout?: boolean | string;
1416 visualElement?: VisualElement;
1417 crossfade?: boolean;
1418 transition?: Transition$1;
1419 initialPromotionConfig?: InitialPromotionConfig;
1420}
1421
1422type AnimationType = "animate" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "exit";
1423
1424type VisualElementAnimationOptions = {
1425 delay?: number;
1426 transitionOverride?: Transition$1;
1427 custom?: any;
1428 type?: AnimationType;
1429};
1430
1431interface AnimationState$1 {
1432 animateChanges: (type?: AnimationType) => Promise<any>;
1433 setActive: (type: AnimationType, isActive: boolean, options?: VisualElementAnimationOptions) => Promise<any>;
1434 setAnimateFunction: (fn: any) => void;
1435 getState: () => {
1436 [key: string]: AnimationTypeState;
1437 };
1438 reset: () => void;
1439}
1440interface AnimationTypeState {
1441 isActive: boolean;
1442 protectedKeys: {
1443 [key: string]: true;
1444 };
1445 needsAnimating: {
1446 [key: string]: boolean;
1447 };
1448 prevResolvedValues: {
1449 [key: string]: any;
1450 };
1451 prevProp?: VariantLabels | TargetAndTransition;
1452}
1453
1454/**
1455 * @public
1456 */
1457interface PresenceContextProps {
1458 id: string;
1459 isPresent: boolean;
1460 register: (id: string | number) => () => void;
1461 onExitComplete?: (id: string | number) => void;
1462 initial?: false | VariantLabels;
1463 custom?: any;
1464}
1465/**
1466 * @public
1467 */
1468declare const PresenceContext: react.Context<PresenceContextProps | null>;
1469
1470/**
1471 * A VisualElement is an imperative abstraction around UI elements such as
1472 * HTMLElement, SVGElement, Three.Object3D etc.
1473 */
1474declare abstract class VisualElement<Instance = unknown, RenderState = unknown, Options extends {} = {}> {
1475 /**
1476 * VisualElements are arranged in trees mirroring that of the React tree.
1477 * Each type of VisualElement has a unique name, to detect when we're crossing
1478 * type boundaries within that tree.
1479 */
1480 abstract type: string;
1481 /**
1482 * An `Array.sort` compatible function that will compare two Instances and
1483 * compare their respective positions within the tree.
1484 */
1485 abstract sortInstanceNodePosition(a: Instance, b: Instance): number;
1486 /**
1487 * Measure the viewport-relative bounding box of the Instance.
1488 */
1489 abstract measureInstanceViewportBox(instance: Instance, props: MotionProps & Partial<MotionConfigContext>): Box;
1490 /**
1491 * When a value has been removed from all animation props we need to
1492 * pick a target to animate back to. For instance, for HTMLElements
1493 * we can look in the style prop.
1494 */
1495 abstract getBaseTargetFromProps(props: MotionProps, key: string): string | number | undefined | MotionValue;
1496 /**
1497 * When we first animate to a value we need to animate it *from* a value.
1498 * Often this have been specified via the initial prop but it might be
1499 * that the value needs to be read from the Instance.
1500 */
1501 abstract readValueFromInstance(instance: Instance, key: string, options: Options): string | number | null | undefined;
1502 /**
1503 * When a value has been removed from the VisualElement we use this to remove
1504 * it from the inherting class' unique render state.
1505 */
1506 abstract removeValueFromRenderState(key: string, renderState: RenderState): void;
1507 /**
1508 * Run before a React or VisualElement render, builds the latest motion
1509 * values into an Instance-specific format. For example, HTMLVisualElement
1510 * will use this step to build `style` and `var` values.
1511 */
1512 abstract build(renderState: RenderState, latestValues: ResolvedValues, options: Options, props: MotionProps): void;
1513 /**
1514 * Apply the built values to the Instance. For example, HTMLElements will have
1515 * styles applied via `setProperty` and the style attribute, whereas SVGElements
1516 * will have values applied to attributes.
1517 */
1518 abstract renderInstance(instance: Instance, renderState: RenderState, styleProp?: MotionStyle, projection?: IProjectionNode): void;
1519 resolveKeyframes: <T extends string | number>(keyframes: UnresolvedKeyframes<T>, onComplete: (resolvedKeyframes: ResolvedKeyframes<T>) => void, name: string, value: MotionValue<T>) => KeyframeResolver<T>;
1520 /**
1521 * If the component child is provided as a motion value, handle subscriptions
1522 * with the renderer-specific VisualElement.
1523 */
1524 handleChildMotionValue?(): void;
1525 /**
1526 * This method takes React props and returns found MotionValues. For example, HTML
1527 * MotionValues will be found within the style prop, whereas for Three.js within attribute arrays.
1528 *
1529 * This isn't an abstract method as it needs calling in the constructor, but it is
1530 * intended to be one.
1531 */
1532 scrapeMotionValuesFromProps(_props: MotionProps, _prevProps: MotionProps, _visualElement: VisualElement): {
1533 [key: string]: MotionValue | string | number;
1534 };
1535 /**
1536 * A reference to the current underlying Instance, e.g. a HTMLElement
1537 * or Three.Mesh etc.
1538 */
1539 current: Instance | null;
1540 /**
1541 * A reference to the parent VisualElement (if exists).
1542 */
1543 parent: VisualElement | undefined;
1544 /**
1545 * A set containing references to this VisualElement's children.
1546 */
1547 children: Set<VisualElement<unknown, unknown, {}>>;
1548 /**
1549 * The depth of this VisualElement within the overall VisualElement tree.
1550 */
1551 depth: number;
1552 /**
1553 * The current render state of this VisualElement. Defined by inherting VisualElements.
1554 */
1555 renderState: RenderState;
1556 /**
1557 * An object containing the latest static values for each of this VisualElement's
1558 * MotionValues.
1559 */
1560 latestValues: ResolvedValues;
1561 /**
1562 * Determine what role this visual element should take in the variant tree.
1563 */
1564 isVariantNode: boolean;
1565 isControllingVariants: boolean;
1566 /**
1567 * If this component is part of the variant tree, it should track
1568 * any children that are also part of the tree. This is essentially
1569 * a shadow tree to simplify logic around how to stagger over children.
1570 */
1571 variantChildren?: Set<VisualElement>;
1572 /**
1573 * Decides whether this VisualElement should animate in reduced motion
1574 * mode.
1575 *
1576 * TODO: This is currently set on every individual VisualElement but feels
1577 * like it could be set globally.
1578 */
1579 shouldReduceMotion: boolean | null;
1580 /**
1581 * Normally, if a component is controlled by a parent's variants, it can
1582 * rely on that ancestor to trigger animations further down the tree.
1583 * However, if a component is created after its parent is mounted, the parent
1584 * won't trigger that mount animation so the child needs to.
1585 *
1586 * TODO: This might be better replaced with a method isParentMounted
1587 */
1588 manuallyAnimateOnMount: boolean;
1589 /**
1590 * This can be set by AnimatePresence to force components that mount
1591 * at the same time as it to mount as if they have initial={false} set.
1592 */
1593 blockInitialAnimation: boolean;
1594 /**
1595 * A reference to this VisualElement's projection node, used in layout animations.
1596 */
1597 projection?: IProjectionNode;
1598 /**
1599 * A map of all motion values attached to this visual element. Motion
1600 * values are source of truth for any given animated value. A motion
1601 * value might be provided externally by the component via props.
1602 */
1603 values: Map<string, MotionValue<any>>;
1604 /**
1605 * The AnimationState, this is hydrated by the animation Feature.
1606 */
1607 animationState?: AnimationState$1;
1608 KeyframeResolver: typeof KeyframeResolver;
1609 /**
1610 * The options used to create this VisualElement. The Options type is defined
1611 * by the inheriting VisualElement and is passed straight through to the render functions.
1612 */
1613 readonly options: Options;
1614 /**
1615 * A reference to the latest props provided to the VisualElement's host React component.
1616 */
1617 props: MotionProps;
1618 prevProps?: MotionProps;
1619 presenceContext: PresenceContextProps | null;
1620 prevPresenceContext?: PresenceContextProps | null;
1621 /**
1622 * Cleanup functions for active features (hover/tap/exit etc)
1623 */
1624 private features;
1625 /**
1626 * A map of every subscription that binds the provided or generated
1627 * motion values onChange listeners to this visual element.
1628 */
1629 private valueSubscriptions;
1630 /**
1631 * A reference to the ReducedMotionConfig passed to the VisualElement's host React component.
1632 */
1633 private reducedMotionConfig;
1634 /**
1635 * On mount, this will be hydrated with a callback to disconnect
1636 * this visual element from its parent on unmount.
1637 */
1638 private removeFromVariantTree;
1639 /**
1640 * A reference to the previously-provided motion values as returned
1641 * from scrapeMotionValuesFromProps. We use the keys in here to determine
1642 * if any motion values need to be removed after props are updated.
1643 */
1644 private prevMotionValues;
1645 /**
1646 * When values are removed from all animation props we need to search
1647 * for a fallback value to animate to. These values are tracked in baseTarget.
1648 */
1649 private baseTarget;
1650 /**
1651 * Create an object of the values we initially animated from (if initial prop present).
1652 */
1653 private initialValues;
1654 /**
1655 * An object containing a SubscriptionManager for each active event.
1656 */
1657 private events;
1658 /**
1659 * An object containing an unsubscribe function for each prop event subscription.
1660 * For example, every "Update" event can have multiple subscribers via
1661 * VisualElement.on(), but only one of those can be defined via the onUpdate prop.
1662 */
1663 private propEventSubscriptions;
1664 constructor({ parent, props, presenceContext, reducedMotionConfig, blockInitialAnimation, visualState, }: VisualElementOptions<Instance, RenderState>, options?: Options);
1665 mount(instance: Instance): void;
1666 unmount(): void;
1667 private bindToMotionValue;
1668 sortNodePosition(other: VisualElement<Instance>): number;
1669 updateFeatures(): void;
1670 notifyUpdate: () => void;
1671 triggerBuild(): void;
1672 render: () => void;
1673 scheduleRender: () => Process;
1674 /**
1675 * Measure the current viewport box with or without transforms.
1676 * Only measures axis-aligned boxes, rotate and skew must be manually
1677 * removed with a re-render to work.
1678 */
1679 measureViewportBox(): Box;
1680 getStaticValue(key: string): string | number;
1681 setStaticValue(key: string, value: string | number): void;
1682 /**
1683 * Update the provided props. Ensure any newly-added motion values are
1684 * added to our map, old ones removed, and listeners updated.
1685 */
1686 update(props: MotionProps, presenceContext: PresenceContextProps | null): void;
1687 getProps(): MotionProps;
1688 /**
1689 * Returns the variant definition with a given name.
1690 */
1691 getVariant(name: string): Variant | undefined;
1692 /**
1693 * Returns the defined default transition on this component.
1694 */
1695 getDefaultTransition(): Transition$1 | undefined;
1696 getTransformPagePoint(): any;
1697 getClosestVariantNode(): VisualElement | undefined;
1698 getVariantContext(startAtParent?: boolean): undefined | VariantStateContext;
1699 /**
1700 * Add a child visual element to our set of children.
1701 */
1702 addVariantChild(child: VisualElement): (() => boolean) | undefined;
1703 /**
1704 * Add a motion value and bind it to this visual element.
1705 */
1706 addValue(key: string, value: MotionValue): void;
1707 /**
1708 * Remove a motion value and unbind any active subscriptions.
1709 */
1710 removeValue(key: string): void;
1711 /**
1712 * Check whether we have a motion value for this key
1713 */
1714 hasValue(key: string): boolean;
1715 /**
1716 * Get a motion value for this key. If called with a default
1717 * value, we'll create one if none exists.
1718 */
1719 getValue(key: string): MotionValue | undefined;
1720 getValue(key: string, defaultValue: string | number | null): MotionValue;
1721 /**
1722 * If we're trying to animate to a previously unencountered value,
1723 * we need to check for it in our state and as a last resort read it
1724 * directly from the instance (which might have performance implications).
1725 */
1726 readValue(key: string, target?: string | number | null): any;
1727 /**
1728 * Set the base target to later animate back to. This is currently
1729 * only hydrated on creation and when we first read a value.
1730 */
1731 setBaseTarget(key: string, value: string | number): void;
1732 /**
1733 * Find the base target for a value thats been removed from all animation
1734 * props.
1735 */
1736 getBaseTarget(key: string): ResolvedValues[string] | undefined | null;
1737 on<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, callback: VisualElementEventCallbacks[EventName]): VoidFunction;
1738 notify<EventName extends keyof VisualElementEventCallbacks>(eventName: EventName, ...args: any): void;
1739}
1740
1741type UnresolvedKeyframes<T extends string | number> = Array<T | null>;
1742type ResolvedKeyframes<T extends string | number> = Array<T>;
1743type OnKeyframesResolved<T extends string | number> = (resolvedKeyframes: ResolvedKeyframes<T>, finalKeyframe: T) => void;
1744declare class KeyframeResolver<T extends string | number = any> {
1745 name?: string;
1746 element?: VisualElement<any>;
1747 finalKeyframe?: T;
1748 suspendedScrollY?: number;
1749 protected unresolvedKeyframes: UnresolvedKeyframes<string | number>;
1750 private motionValue?;
1751 private onComplete;
1752 /**
1753 * Track whether this resolver has completed. Once complete, it never
1754 * needs to attempt keyframe resolution again.
1755 */
1756 private isComplete;
1757 /**
1758 * Track whether this resolver is async. If it is, it'll be added to the
1759 * resolver queue and flushed in the next frame. Resolvers that aren't going
1760 * to trigger read/write thrashing don't need to be async.
1761 */
1762 private isAsync;
1763 /**
1764 * Track whether this resolver needs to perform a measurement
1765 * to resolve its keyframes.
1766 */
1767 needsMeasurement: boolean;
1768 /**
1769 * Track whether this resolver is currently scheduled to resolve
1770 * to allow it to be cancelled and resumed externally.
1771 */
1772 isScheduled: boolean;
1773 constructor(unresolvedKeyframes: UnresolvedKeyframes<string | number>, onComplete: OnKeyframesResolved<T>, name?: string, motionValue?: MotionValue<T>, element?: VisualElement<any>, isAsync?: boolean);
1774 scheduleResolve(): void;
1775 readKeyframes(): void;
1776 setFinalKeyframe(): void;
1777 measureInitialState(): void;
1778 renderEndStyles(): void;
1779 measureEndState(): void;
1780 complete(): void;
1781 cancel(): void;
1782 resume(): void;
1783}
1784
1785interface AnimationPlaybackLifecycles<V> {
1786 onUpdate?: (latest: V) => void;
1787 onPlay?: () => void;
1788 onComplete?: () => void;
1789 onRepeat?: () => void;
1790 onStop?: () => void;
1791}
1792interface Transition extends AnimationPlaybackOptions, Omit<SpringOptions, "keyframes">, Omit<InertiaOptions$1, "keyframes">, KeyframeOptions {
1793 delay?: number;
1794 elapsed?: number;
1795 driver?: Driver;
1796 type?: "decay" | "spring" | "keyframes" | "tween" | "inertia";
1797 duration?: number;
1798 autoplay?: boolean;
1799}
1800interface ValueAnimationTransition<V = any> extends Transition, AnimationPlaybackLifecycles<V> {
1801}
1802type ResolveKeyframes<V extends string | number> = (keyframes: V[], onComplete: OnKeyframesResolved<V>, name?: string, motionValue?: any) => KeyframeResolver<V>;
1803interface ValueAnimationOptions<V extends string | number = number> extends ValueAnimationTransition {
1804 keyframes: V[];
1805 KeyframeResolver?: typeof KeyframeResolver;
1806 name?: string;
1807 motionValue?: MotionValue<V>;
1808 from?: V;
1809 isGenerator?: boolean;
1810}
1811interface AnimationScope<T = any> {
1812 readonly current: T;
1813 animations: AnimationPlaybackControls[];
1814}
1815type StyleTransitions = {
1816 [K in keyof CSSStyleDeclarationWithTransform]?: Transition;
1817};
1818type SVGPathTransitions = {
1819 [K in keyof SVGPathProperties]: Transition;
1820};
1821type SVGTransitions = {
1822 [K in keyof SVGAttributes]: Transition;
1823};
1824type VariableTransitions = {
1825 [key: `--${string}`]: Transition;
1826};
1827type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
1828interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
1829 delay?: number | DynamicOption<number>;
1830}
1831type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
1832/**
1833 * @public
1834 */
1835interface AnimationPlaybackControls {
1836 time: number;
1837 speed: number;
1838 state?: AnimationPlayState;
1839 duration: number;
1840 stop: () => void;
1841 play: () => void;
1842 pause: () => void;
1843 complete: () => void;
1844 cancel: () => void;
1845 then: (onResolve: VoidFunction, onReject?: VoidFunction) => Promise<void>;
1846 attachTimeline?: (timeline: ProgressTimeline) => VoidFunction;
1847}
1848type DynamicOption<T> = (i: number, total: number) => T;
1849interface CSSStyleDeclarationWithTransform extends Omit<CSSStyleDeclaration, "direction" | "transition" | "x" | "y" | "z"> {
1850 x: number | string;
1851 y: number | string;
1852 z: number | string;
1853 rotateX: number | string;
1854 rotateY: number | string;
1855 rotateZ: number | string;
1856 scaleX: number;
1857 scaleY: number;
1858 scaleZ: number;
1859 skewX: number | string;
1860 skewY: number | string;
1861}
1862type ValueKeyframe = string | number;
1863type UnresolvedValueKeyframe = ValueKeyframe | null;
1864type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
1865type StyleKeyframesDefinition = {
1866 [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
1867};
1868type SVGKeyframesDefinition = {
1869 [K in keyof SVGAttributes]?: ValueKeyframesDefinition;
1870};
1871type VariableKeyframesDefinition = {
1872 [key: `--${string}`]: ValueKeyframesDefinition;
1873};
1874type SVGPathKeyframesDefinition = {
1875 [K in keyof SVGPathProperties]?: ValueKeyframesDefinition;
1876};
1877type DOMKeyframesDefinition = StyleKeyframesDefinition & SVGKeyframesDefinition & SVGPathKeyframesDefinition & VariableKeyframesDefinition;
1878interface VelocityOptions {
1879 velocity?: number;
1880 restSpeed?: number;
1881 restDelta?: number;
1882}
1883type RepeatType = "loop" | "reverse" | "mirror";
1884interface AnimationPlaybackOptions {
1885 repeat?: number;
1886 repeatType?: RepeatType;
1887 repeatDelay?: number;
1888}
1889interface DurationSpringOptions {
1890 duration?: number;
1891 bounce?: number;
1892}
1893interface SpringOptions extends DurationSpringOptions, VelocityOptions {
1894 stiffness?: number;
1895 damping?: number;
1896 mass?: number;
1897}
1898interface DecayOptions extends VelocityOptions {
1899 keyframes?: number[];
1900 power?: number;
1901 timeConstant?: number;
1902 modifyTarget?: (v: number) => number;
1903}
1904interface InertiaOptions$1 extends DecayOptions {
1905 bounceStiffness?: number;
1906 bounceDamping?: number;
1907 min?: number;
1908 max?: number;
1909}
1910interface KeyframeOptions {
1911 ease?: Easing | Easing[];
1912 times?: number[];
1913}
1914type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
1915/**
1916 * @public
1917 */
1918interface AnimationControls {
1919 /**
1920 * Starts an animation on all linked components.
1921 *
1922 * @remarks
1923 *
1924 * ```jsx
1925 * controls.start("variantLabel")
1926 * controls.start({
1927 * x: 0,
1928 * transition: { duration: 1 }
1929 * })
1930 * ```
1931 *
1932 * @param definition - Properties or variant label to animate to
1933 * @param transition - Optional `transtion` to apply to a variant
1934 * @returns - A `Promise` that resolves when all animations have completed.
1935 *
1936 * @public
1937 */
1938 start(definition: AnimationDefinition, transitionOverride?: Transition): Promise<any>;
1939 /**
1940 * Instantly set to a set of properties or a variant.
1941 *
1942 * ```jsx
1943 * // With properties
1944 * controls.set({ opacity: 0 })
1945 *
1946 * // With variants
1947 * controls.set("hidden")
1948 * ```
1949 *
1950 * @privateRemarks
1951 * We could perform a similar trick to `.start` where this can be called before mount
1952 * and we maintain a list of of pending actions that get applied on mount. But the
1953 * expectation of `set` is that it happens synchronously and this would be difficult
1954 * to do before any children have even attached themselves. It's also poor practise
1955 * and we should discourage render-synchronous `.start` calls rather than lean into this.
1956 *
1957 * @public
1958 */
1959 set(definition: AnimationDefinition): void;
1960 /**
1961 * Stops animations on all linked components.
1962 *
1963 * ```jsx
1964 * controls.stop()
1965 * ```
1966 *
1967 * @public
1968 */
1969 stop(): void;
1970 mount(): () => void;
1971}
1972
1973/**
1974 * @public
1975 */
1976type Subscriber<T> = (v: T) => void;
1977/**
1978 * @public
1979 */
1980type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
1981interface MotionValueEventCallbacks<V> {
1982 animationStart: () => void;
1983 animationComplete: () => void;
1984 animationCancel: () => void;
1985 change: (latestValue: V) => void;
1986 renderRequest: () => void;
1987}
1988interface ResolvedValues$1 {
1989 [key: string]: string | number;
1990}
1991interface Owner {
1992 current: HTMLElement | unknown;
1993 getProps: () => {
1994 onUpdate?: (latest: ResolvedValues$1) => void;
1995 };
1996}
1997interface MotionValueOptions {
1998 owner?: Owner;
1999}
2000/**
2001 * `MotionValue` is used to track the state and velocity of motion values.
2002 *
2003 * @public
2004 */
2005declare class MotionValue<V = any> {
2006 /**
2007 * This will be replaced by the build step with the latest version number.
2008 * When MotionValues are provided to motion components, warn if versions are mixed.
2009 */
2010 version: string;
2011 /**
2012 * If a MotionValue has an owner, it was created internally within Framer Motion
2013 * and therefore has no external listeners. It is therefore safe to animate via WAAPI.
2014 */
2015 owner?: Owner;
2016 /**
2017 * The current state of the `MotionValue`.
2018 */
2019 private current;
2020 /**
2021 * The previous state of the `MotionValue`.
2022 */
2023 private prev;
2024 /**
2025 * The previous state of the `MotionValue` at the end of the previous frame.
2026 */
2027 private prevFrameValue;
2028 /**
2029 * The last time the `MotionValue` was updated.
2030 */
2031 private updatedAt;
2032 /**
2033 * The time `prevFrameValue` was updated.
2034 */
2035 private prevUpdatedAt;
2036 private stopPassiveEffect?;
2037 /**
2038 * A reference to the currently-controlling animation.
2039 */
2040 animation?: AnimationPlaybackControls;
2041 setCurrent(current: V): void;
2042 setPrevFrameValue(prevFrameValue?: V | undefined): void;
2043 /**
2044 * Adds a function that will be notified when the `MotionValue` is updated.
2045 *
2046 * It returns a function that, when called, will cancel the subscription.
2047 *
2048 * When calling `onChange` inside a React component, it should be wrapped with the
2049 * `useEffect` hook. As it returns an unsubscribe function, this should be returned
2050 * from the `useEffect` function to ensure you don't add duplicate subscribers..
2051 *
2052 * ```jsx
2053 * export const MyComponent = () => {
2054 * const x = useMotionValue(0)
2055 * const y = useMotionValue(0)
2056 * const opacity = useMotionValue(1)
2057 *
2058 * useEffect(() => {
2059 * function updateOpacity() {
2060 * const maxXY = Math.max(x.get(), y.get())
2061 * const newOpacity = transform(maxXY, [0, 100], [1, 0])
2062 * opacity.set(newOpacity)
2063 * }
2064 *
2065 * const unsubscribeX = x.on("change", updateOpacity)
2066 * const unsubscribeY = y.on("change", updateOpacity)
2067 *
2068 * return () => {
2069 * unsubscribeX()
2070 * unsubscribeY()
2071 * }
2072 * }, [])
2073 *
2074 * return <motion.div style={{ x }} />
2075 * }
2076 * ```
2077 *
2078 * @param subscriber - A function that receives the latest value.
2079 * @returns A function that, when called, will cancel this subscription.
2080 *
2081 * @deprecated
2082 */
2083 onChange(subscription: Subscriber<V>): () => void;
2084 /**
2085 * An object containing a SubscriptionManager for each active event.
2086 */
2087 private events;
2088 on<EventName extends keyof MotionValueEventCallbacks<V>>(eventName: EventName, callback: MotionValueEventCallbacks<V>[EventName]): VoidFunction;
2089 clearListeners(): void;
2090 /**
2091 * Sets the state of the `MotionValue`.
2092 *
2093 * @remarks
2094 *
2095 * ```jsx
2096 * const x = useMotionValue(0)
2097 * x.set(10)
2098 * ```
2099 *
2100 * @param latest - Latest value to set.
2101 * @param render - Whether to notify render subscribers. Defaults to `true`
2102 *
2103 * @public
2104 */
2105 set(v: V, render?: boolean): void;
2106 setWithVelocity(prev: V, current: V, delta: number): void;
2107 /**
2108 * Set the state of the `MotionValue`, stopping any active animations,
2109 * effects, and resets velocity to `0`.
2110 */
2111 jump(v: V, endAnimation?: boolean): void;
2112 updateAndNotify: (v: V, render?: boolean) => void;
2113 /**
2114 * Returns the latest state of `MotionValue`
2115 *
2116 * @returns - The latest state of `MotionValue`
2117 *
2118 * @public
2119 */
2120 get(): NonNullable<V>;
2121 /**
2122 * @public
2123 */
2124 getPrevious(): V | undefined;
2125 /**
2126 * Returns the latest velocity of `MotionValue`
2127 *
2128 * @returns - The latest velocity of `MotionValue`. Returns `0` if the state is non-numerical.
2129 *
2130 * @public
2131 */
2132 getVelocity(): number;
2133 hasAnimated: boolean;
2134 /**
2135 * Stop the currently active animation.
2136 *
2137 * @public
2138 */
2139 stop(): void;
2140 /**
2141 * Returns `true` if this value is currently animating.
2142 *
2143 * @public
2144 */
2145 isAnimating(): boolean;
2146 private clearAnimation;
2147 /**
2148 * Destroy and clean up subscribers to this `MotionValue`.
2149 *
2150 * The `MotionValue` hooks like `useMotionValue` and `useTransform` automatically
2151 * handle the lifecycle of the returned `MotionValue`, so this method is only necessary if you've manually
2152 * created a `MotionValue` via the `motionValue` function.
2153 *
2154 * @public
2155 */
2156 destroy(): void;
2157}
2158declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
2159
2160type RefObject<T> = {
2161 current: T | null;
2162};
2163
2164/**
2165 * Passed in to pan event handlers like `onPan` the `PanInfo` object contains
2166 * information about the current state of the tap gesture such as its
2167 * `point`, `delta`, `offset` and `velocity`.
2168 *
2169 * ```jsx
2170 * <motion.div onPan={(event, info) => {
2171 * console.log(info.point.x, info.point.y)
2172 * }} />
2173 * ```
2174 *
2175 * @public
2176 */
2177interface PanInfo {
2178 /**
2179 * Contains `x` and `y` values for the current pan position relative
2180 * to the device or page.
2181 *
2182 * ```jsx
2183 * function onPan(event, info) {
2184 * console.log(info.point.x, info.point.y)
2185 * }
2186 *
2187 * <motion.div onPan={onPan} />
2188 * ```
2189 *
2190 * @public
2191 */
2192 point: Point;
2193 /**
2194 * Contains `x` and `y` values for the distance moved since
2195 * the last event.
2196 *
2197 * ```jsx
2198 * function onPan(event, info) {
2199 * console.log(info.delta.x, info.delta.y)
2200 * }
2201 *
2202 * <motion.div onPan={onPan} />
2203 * ```
2204 *
2205 * @public
2206 */
2207 delta: Point;
2208 /**
2209 * Contains `x` and `y` values for the distance moved from
2210 * the first pan event.
2211 *
2212 * ```jsx
2213 * function onPan(event, info) {
2214 * console.log(info.offset.x, info.offset.y)
2215 * }
2216 *
2217 * <motion.div onPan={onPan} />
2218 * ```
2219 *
2220 * @public
2221 */
2222 offset: Point;
2223 /**
2224 * Contains `x` and `y` values for the current velocity of the pointer, in px/ms.
2225 *
2226 * ```jsx
2227 * function onPan(event, info) {
2228 * console.log(info.velocity.x, info.velocity.y)
2229 * }
2230 *
2231 * <motion.div onPan={onPan} />
2232 * ```
2233 *
2234 * @public
2235 */
2236 velocity: Point;
2237}
2238
2239interface DragControlOptions {
2240 snapToCursor?: boolean;
2241 cursorProgress?: Point;
2242}
2243
2244/**
2245 * Can manually trigger a drag gesture on one or more `drag`-enabled `motion` components.
2246 *
2247 * ```jsx
2248 * const dragControls = useDragControls()
2249 *
2250 * function startDrag(event) {
2251 * dragControls.start(event, { snapToCursor: true })
2252 * }
2253 *
2254 * return (
2255 * <>
2256 * <div onPointerDown={startDrag} />
2257 * <motion.div drag="x" dragControls={dragControls} />
2258 * </>
2259 * )
2260 * ```
2261 *
2262 * @public
2263 */
2264declare class DragControls {
2265 private componentControls;
2266 /**
2267 * Start a drag gesture on every `motion` component that has this set of drag controls
2268 * passed into it via the `dragControls` prop.
2269 *
2270 * ```jsx
2271 * dragControls.start(e, {
2272 * snapToCursor: true
2273 * })
2274 * ```
2275 *
2276 * @param event - PointerEvent
2277 * @param options - Options
2278 *
2279 * @public
2280 */
2281 start(event: react.PointerEvent | PointerEvent, options?: DragControlOptions): void;
2282}
2283/**
2284 * Usually, dragging is initiated by pressing down on a `motion` component with a `drag` prop
2285 * and moving it. For some use-cases, for instance clicking at an arbitrary point on a video scrubber, we
2286 * might want to initiate that dragging from a different component than the draggable one.
2287 *
2288 * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
2289 * the draggable component's `dragControls` prop. It exposes a `start` method
2290 * that can start dragging from pointer events on other components.
2291 *
2292 * ```jsx
2293 * const dragControls = useDragControls()
2294 *
2295 * function startDrag(event) {
2296 * dragControls.start(event, { snapToCursor: true })
2297 * }
2298 *
2299 * return (
2300 * <>
2301 * <div onPointerDown={startDrag} />
2302 * <motion.div drag="x" dragControls={dragControls} />
2303 * </>
2304 * )
2305 * ```
2306 *
2307 * @public
2308 */
2309declare function useDragControls(): DragControls;
2310
2311type DragElastic = boolean | number | Partial<BoundingBox>;
2312/**
2313 * @public
2314 */
2315interface DragHandlers {
2316 /**
2317 * Callback function that fires when dragging starts.
2318 *
2319 * ```jsx
2320 * <motion.div
2321 * drag
2322 * onDragStart={
2323 * (event, info) => console.log(info.point.x, info.point.y)
2324 * }
2325 * />
2326 * ```
2327 *
2328 * @public
2329 */
2330 onDragStart?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
2331 /**
2332 * Callback function that fires when dragging ends.
2333 *
2334 * ```jsx
2335 * <motion.div
2336 * drag
2337 * onDragEnd={
2338 * (event, info) => console.log(info.point.x, info.point.y)
2339 * }
2340 * />
2341 * ```
2342 *
2343 * @public
2344 */
2345 onDragEnd?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
2346 /**
2347 * Callback function that fires when the component is dragged.
2348 *
2349 * ```jsx
2350 * <motion.div
2351 * drag
2352 * onDrag={
2353 * (event, info) => console.log(info.point.x, info.point.y)
2354 * }
2355 * />
2356 * ```
2357 *
2358 * @public
2359 */
2360 onDrag?(event: MouseEvent | TouchEvent | PointerEvent, info: PanInfo): void;
2361 /**
2362 * Callback function that fires a drag direction is determined.
2363 *
2364 * ```jsx
2365 * <motion.div
2366 * drag
2367 * dragDirectionLock
2368 * onDirectionLock={axis => console.log(axis)}
2369 * />
2370 * ```
2371 *
2372 * @public
2373 */
2374 onDirectionLock?(axis: "x" | "y"): void;
2375 /**
2376 * Callback function that fires when drag momentum/bounce transition finishes.
2377 *
2378 * ```jsx
2379 * <motion.div
2380 * drag
2381 * onDragTransitionEnd={() => console.log('Drag transition complete')}
2382 * />
2383 * ```
2384 *
2385 * @public
2386 */
2387 onDragTransitionEnd?(): void;
2388}
2389/**
2390 * @public
2391 */
2392type InertiaOptions = Partial<Omit<Inertia, "velocity" | "type">>;
2393/**
2394 * @public
2395 */
2396interface DraggableProps extends DragHandlers {
2397 /**
2398 * Enable dragging for this element. Set to `false` by default.
2399 * Set `true` to drag in both directions.
2400 * Set `"x"` or `"y"` to only drag in a specific direction.
2401 *
2402 * ```jsx
2403 * <motion.div drag="x" />
2404 * ```
2405 */
2406 drag?: boolean | "x" | "y";
2407 /**
2408 * Properties or variant label to animate to while the drag gesture is recognised.
2409 *
2410 * ```jsx
2411 * <motion.div whileDrag={{ scale: 1.2 }} />
2412 * ```
2413 */
2414 whileDrag?: VariantLabels | TargetAndTransition;
2415 /**
2416 * If `true`, this will lock dragging to the initially-detected direction. Defaults to `false`.
2417 *
2418 * ```jsx
2419 * <motion.div drag dragDirectionLock />
2420 * ```
2421 */
2422 dragDirectionLock?: boolean;
2423 /**
2424 * Allows drag gesture propagation to child components. Set to `false` by
2425 * default.
2426 *
2427 * ```jsx
2428 * <motion.div drag="x" dragPropagation />
2429 * ```
2430 */
2431 dragPropagation?: boolean;
2432 /**
2433 * Applies constraints on the permitted draggable area.
2434 *
2435 * It can accept an object of optional `top`, `left`, `right`, and `bottom` values, measured in pixels.
2436 * This will define a distance the named edge of the draggable component.
2437 *
2438 * Alternatively, it can accept a `ref` to another component created with React's `useRef` hook.
2439 * This `ref` should be passed both to the draggable component's `dragConstraints` prop, and the `ref`
2440 * of the component you want to use as constraints.
2441 *
2442 * ```jsx
2443 * // In pixels
2444 * <motion.div
2445 * drag="x"
2446 * dragConstraints={{ left: 0, right: 300 }}
2447 * />
2448 *
2449 * // As a ref to another component
2450 * const MyComponent = () => {
2451 * const constraintsRef = useRef(null)
2452 *
2453 * return (
2454 * <motion.div ref={constraintsRef}>
2455 * <motion.div drag dragConstraints={constraintsRef} />
2456 * </motion.div>
2457 * )
2458 * }
2459 * ```
2460 */
2461 dragConstraints?: false | Partial<BoundingBox> | RefObject<Element>;
2462 /**
2463 * The degree of movement allowed outside constraints. 0 = no movement, 1 =
2464 * full movement.
2465 *
2466 * Set to `0.5` by default. Can also be set as `false` to disable movement.
2467 *
2468 * By passing an object of `top`/`right`/`bottom`/`left`, individual values can be set
2469 * per constraint. Any missing values will be set to `0`.
2470 *
2471 * ```jsx
2472 * <motion.div
2473 * drag
2474 * dragConstraints={{ left: 0, right: 300 }}
2475 * dragElastic={0.2}
2476 * />
2477 * ```
2478 */
2479 dragElastic?: DragElastic;
2480 /**
2481 * Apply momentum from the pan gesture to the component when dragging
2482 * finishes. Set to `true` by default.
2483 *
2484 * ```jsx
2485 * <motion.div
2486 * drag
2487 * dragConstraints={{ left: 0, right: 300 }}
2488 * dragMomentum={false}
2489 * />
2490 * ```
2491 */
2492 dragMomentum?: boolean;
2493 /**
2494 * Allows you to change dragging inertia parameters.
2495 * When releasing a draggable Frame, an animation with type `inertia` starts. The animation is based on your dragging velocity. This property allows you to customize it.
2496 * See {@link https://framer.com/api/animation/#inertia | Inertia} for all properties you can use.
2497 *
2498 * ```jsx
2499 * <motion.div
2500 * drag
2501 * dragTransition={{ bounceStiffness: 600, bounceDamping: 10 }}
2502 * />
2503 * ```
2504 */
2505 dragTransition?: InertiaOptions;
2506 /**
2507 * Usually, dragging is initiated by pressing down on a component and moving it. For some
2508 * use-cases, for instance clicking at an arbitrary point on a video scrubber, we
2509 * might want to initiate dragging from a different component than the draggable one.
2510 *
2511 * By creating a `dragControls` using the `useDragControls` hook, we can pass this into
2512 * the draggable component's `dragControls` prop. It exposes a `start` method
2513 * that can start dragging from pointer events on other components.
2514 *
2515 * ```jsx
2516 * const dragControls = useDragControls()
2517 *
2518 * function startDrag(event) {
2519 * dragControls.start(event, { snapToCursor: true })
2520 * }
2521 *
2522 * return (
2523 * <>
2524 * <div onPointerDown={startDrag} />
2525 * <motion.div drag="x" dragControls={dragControls} />
2526 * </>
2527 * )
2528 * ```
2529 */
2530 dragControls?: DragControls;
2531 /**
2532 * If true, element will snap back to its origin when dragging ends.
2533 *
2534 * Enabling this is the equivalent of setting all `dragConstraints` axes to `0`
2535 * with `dragElastic={1}`, but when used together `dragConstraints` can define
2536 * a wider draggable area and `dragSnapToOrigin` will ensure the element
2537 * animates back to its origin on release.
2538 */
2539 dragSnapToOrigin?: boolean;
2540 /**
2541 * By default, if `drag` is defined on a component then an event listener will be attached
2542 * to automatically initiate dragging when a user presses down on it.
2543 *
2544 * By setting `dragListener` to `false`, this event listener will not be created.
2545 *
2546 * ```jsx
2547 * const dragControls = useDragControls()
2548 *
2549 * function startDrag(event) {
2550 * dragControls.start(event, { snapToCursor: true })
2551 * }
2552 *
2553 * return (
2554