1 | /// <reference types="react" />
|
2 | import * as react from 'react';
|
3 | import { SVGAttributes as SVGAttributes$1, CSSProperties, PropsWithoutRef, RefAttributes, ReactHTML, DetailedHTMLFactory, HTMLAttributes, useEffect, RefObject as RefObject$1 } from 'react';
|
4 | import * as react_jsx_runtime from 'react/jsx-runtime';
|
5 |
|
6 | type EasingFunction = (v: number) => number;
|
7 | type EasingModifier = (easing: EasingFunction) => EasingFunction;
|
8 | type BezierDefinition = [number, number, number, number];
|
9 | type 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 | */
|
19 | type Easing = EasingDefinition | EasingFunction;
|
20 |
|
21 | type GenericKeyframesTarget<V> = [null, ...V[]] | V[];
|
22 | /**
|
23 | * @public
|
24 | */
|
25 | type ResolvedKeyframesTarget = GenericKeyframesTarget<number> | GenericKeyframesTarget<string>;
|
26 | /**
|
27 | * @public
|
28 | */
|
29 | type KeyframesTarget = ResolvedKeyframesTarget | GenericKeyframesTarget<CustomValueType>;
|
30 | /**
|
31 | * @public
|
32 | */
|
33 | type ResolvedSingleTarget = string | number;
|
34 | /**
|
35 | * @public
|
36 | */
|
37 | type SingleTarget = ResolvedSingleTarget | CustomValueType;
|
38 | /**
|
39 | * @public
|
40 | */
|
41 | type ResolvedValueTarget = ResolvedSingleTarget | ResolvedKeyframesTarget;
|
42 | /**
|
43 | * @public
|
44 | */
|
45 | type ValueTarget = SingleTarget | KeyframesTarget;
|
46 | /**
|
47 | * Options for orchestrating the timing of animations.
|
48 | *
|
49 | * @public
|
50 | */
|
51 | interface 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 | }
|
216 | interface 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 | */
|
276 | interface 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 | */
|
382 | interface 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 | */
|
548 | interface 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 | */
|
719 | interface 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 | */
|
780 | interface Just {
|
781 | /**
|
782 | * @public
|
783 | */
|
784 | type: "just";
|
785 | }
|
786 | /**
|
787 | * @public
|
788 | */
|
789 | interface None {
|
790 | /**
|
791 | * Set `type` to `false` for an instant transition.
|
792 | *
|
793 | * @public
|
794 | */
|
795 | type: false;
|
796 | }
|
797 | /**
|
798 | * @public
|
799 | */
|
800 | type PermissiveTransitionDefinition = {
|
801 | [key: string]: any;
|
802 | };
|
803 | /**
|
804 | * @public
|
805 | */
|
806 | type TransitionDefinition = Tween | Spring | Keyframes | Inertia | Just | None | PermissiveTransitionDefinition;
|
807 | type TransitionMap = Orchestration & TransitionDefinition & {
|
808 | [key: string]: TransitionDefinition;
|
809 | };
|
810 | /**
|
811 | * Transition props
|
812 | *
|
813 | * @public
|
814 | */
|
815 | type Transition$1 = (Orchestration & Repeat & TransitionDefinition) | (Orchestration & Repeat & TransitionMap);
|
816 | type Omit$1<T, K extends keyof T> = Pick<T, Exclude<keyof T, K>>;
|
817 | type CSSPropertiesWithoutTransitionOrSingleTransforms = Omit$1<CSSProperties, "transition" | "rotate" | "scale" | "perspective">;
|
818 | type SVGTransformAttributes = {
|
819 | attrX?: number;
|
820 | attrY?: number;
|
821 | attrScale?: number;
|
822 | };
|
823 | type TargetProperties = CSSPropertiesWithoutTransitionOrSingleTransforms & SVGAttributes$1<SVGElement> & SVGTransformAttributes & TransformProperties & CustomStyles & SVGPathProperties;
|
824 | /**
|
825 | * @public
|
826 | */
|
827 | type MakeCustomValueType<T> = {
|
828 | [K in keyof T]: T[K] | CustomValueType;
|
829 | };
|
830 | /**
|
831 | * @public
|
832 | */
|
833 | type Target = MakeCustomValueType<TargetProperties>;
|
834 | /**
|
835 | * @public
|
836 | */
|
837 | type MakeKeyframes<T> = {
|
838 | [K in keyof T]: T[K] | T[K][] | [null, ...T[K][]];
|
839 | };
|
840 | /**
|
841 | * @public
|
842 | */
|
843 | type 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 | */
|
864 | type TargetAndTransition = TargetWithKeyframes & {
|
865 | transition?: Transition$1;
|
866 | transitionEnd?: Target;
|
867 | };
|
868 | type TargetResolver = (custom: any, current: Target, velocity: Target) => TargetAndTransition | string;
|
869 | /**
|
870 | * @public
|
871 | */
|
872 | type Variant = TargetAndTransition | TargetResolver;
|
873 | /**
|
874 | * @public
|
875 | */
|
876 | type Variants = {
|
877 | [key: string]: Variant;
|
878 | };
|
879 | /**
|
880 | * @public
|
881 | */
|
882 | interface 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 | */
|
890 | type 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 | */
|
895 | interface DriverControls {
|
896 | start: () => void;
|
897 | stop: () => void;
|
898 | now: () => number;
|
899 | }
|
900 | type Driver = (update: Update) => DriverControls;
|
901 |
|
902 | interface 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 |
|
1147 | interface ProgressTimeline {
|
1148 | currentTime: null | {
|
1149 | value: number;
|
1150 | };
|
1151 | cancel?: VoidFunction;
|
1152 | }
|
1153 |
|
1154 | type Process = (data: FrameData) => void;
|
1155 | type Schedule = (process: Process, keepAlive?: boolean, immediate?: boolean) => Process;
|
1156 | interface Step {
|
1157 | schedule: Schedule;
|
1158 | cancel: (process: Process) => void;
|
1159 | process: (data: FrameData) => void;
|
1160 | }
|
1161 | type StepId = "read" | "resolveKeyframes" | "update" | "preRender" | "render" | "postRender";
|
1162 | type Batcher = {
|
1163 | [key in StepId]: Schedule;
|
1164 | };
|
1165 | type Steps = {
|
1166 | [key in StepId]: Step;
|
1167 | };
|
1168 | interface FrameData {
|
1169 | delta: number;
|
1170 | timestamp: number;
|
1171 | isProcessing: boolean;
|
1172 | }
|
1173 |
|
1174 | interface Point {
|
1175 | x: number;
|
1176 | y: number;
|
1177 | }
|
1178 | interface Axis {
|
1179 | min: number;
|
1180 | max: number;
|
1181 | }
|
1182 | interface Box {
|
1183 | x: Axis;
|
1184 | y: Axis;
|
1185 | }
|
1186 | interface BoundingBox {
|
1187 | top: number;
|
1188 | right: number;
|
1189 | bottom: number;
|
1190 | left: number;
|
1191 | }
|
1192 | interface AxisDelta {
|
1193 | translate: number;
|
1194 | scale: number;
|
1195 | origin: number;
|
1196 | originPoint: number;
|
1197 | }
|
1198 | interface Delta {
|
1199 | x: AxisDelta;
|
1200 | y: AxisDelta;
|
1201 | }
|
1202 | type TransformPoint = (point: Point) => Point;
|
1203 |
|
1204 | type ReducedMotionConfig = "always" | "never" | "user";
|
1205 | /**
|
1206 | * @public
|
1207 | */
|
1208 | interface 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 | */
|
1243 | declare const MotionConfigContext: react.Context<MotionConfigContext>;
|
1244 |
|
1245 | declare 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 |
|
1262 | interface WithDepth {
|
1263 | depth: number;
|
1264 | }
|
1265 |
|
1266 | declare 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 |
|
1274 | interface SwitchLayoutGroup {
|
1275 | register?: (member: IProjectionNode) => void;
|
1276 | deregister?: (member: IProjectionNode) => void;
|
1277 | }
|
1278 | type 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 | };
|
1289 | type SwitchLayoutGroupContext = SwitchLayoutGroup & InitialPromotionConfig;
|
1290 | /**
|
1291 | * Internal, exported only for usage in Framer
|
1292 | */
|
1293 | declare const SwitchLayoutGroupContext: react.Context<SwitchLayoutGroupContext>;
|
1294 |
|
1295 | interface Measurements {
|
1296 | animationId: number;
|
1297 | measuredBox: Box;
|
1298 | layoutBox: Box;
|
1299 | latestValues: ResolvedValues;
|
1300 | source: number;
|
1301 | }
|
1302 | type Phase = "snapshot" | "measure";
|
1303 | interface ScrollMeasurements {
|
1304 | animationId: number;
|
1305 | phase: Phase;
|
1306 | isRoot: boolean;
|
1307 | offset: Point;
|
1308 | }
|
1309 | type LayoutEvents = "willUpdate" | "didUpdate" | "beforeMeasure" | "measure" | "projectionUpdate" | "animationStart" | "animationComplete";
|
1310 | interface 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 | }
|
1406 | interface 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 |
|
1422 | type AnimationType = "animate" | "whileHover" | "whileTap" | "whileDrag" | "whileFocus" | "whileInView" | "exit";
|
1423 |
|
1424 | type VisualElementAnimationOptions = {
|
1425 | delay?: number;
|
1426 | transitionOverride?: Transition$1;
|
1427 | custom?: any;
|
1428 | type?: AnimationType;
|
1429 | };
|
1430 |
|
1431 | interface 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 | }
|
1440 | interface 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 | */
|
1457 | interface 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 | */
|
1468 | declare 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 | */
|
1474 | declare 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 |
|
1741 | type UnresolvedKeyframes<T extends string | number> = Array<T | null>;
|
1742 | type ResolvedKeyframes<T extends string | number> = Array<T>;
|
1743 | type OnKeyframesResolved<T extends string | number> = (resolvedKeyframes: ResolvedKeyframes<T>, finalKeyframe: T) => void;
|
1744 | declare 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 |
|
1785 | interface AnimationPlaybackLifecycles<V> {
|
1786 | onUpdate?: (latest: V) => void;
|
1787 | onPlay?: () => void;
|
1788 | onComplete?: () => void;
|
1789 | onRepeat?: () => void;
|
1790 | onStop?: () => void;
|
1791 | }
|
1792 | interface 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 | }
|
1800 | interface ValueAnimationTransition<V = any> extends Transition, AnimationPlaybackLifecycles<V> {
|
1801 | }
|
1802 | type ResolveKeyframes<V extends string | number> = (keyframes: V[], onComplete: OnKeyframesResolved<V>, name?: string, motionValue?: any) => KeyframeResolver<V>;
|
1803 | interface 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 | }
|
1811 | interface AnimationScope<T = any> {
|
1812 | readonly current: T;
|
1813 | animations: AnimationPlaybackControls[];
|
1814 | }
|
1815 | type StyleTransitions = {
|
1816 | [K in keyof CSSStyleDeclarationWithTransform]?: Transition;
|
1817 | };
|
1818 | type SVGPathTransitions = {
|
1819 | [K in keyof SVGPathProperties]: Transition;
|
1820 | };
|
1821 | type SVGTransitions = {
|
1822 | [K in keyof SVGAttributes]: Transition;
|
1823 | };
|
1824 | type VariableTransitions = {
|
1825 | [key: `--${string}`]: Transition;
|
1826 | };
|
1827 | type AnimationOptionsWithValueOverrides<V = any> = StyleTransitions & SVGPathTransitions & SVGTransitions & VariableTransitions & ValueAnimationTransition<V>;
|
1828 | interface DynamicAnimationOptions extends Omit<AnimationOptionsWithValueOverrides, "delay"> {
|
1829 | delay?: number | DynamicOption<number>;
|
1830 | }
|
1831 | type ElementOrSelector = Element | Element[] | NodeListOf<Element> | string;
|
1832 | /**
|
1833 | * @public
|
1834 | */
|
1835 | interface 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 | }
|
1848 | type DynamicOption<T> = (i: number, total: number) => T;
|
1849 | interface 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 | }
|
1862 | type ValueKeyframe = string | number;
|
1863 | type UnresolvedValueKeyframe = ValueKeyframe | null;
|
1864 | type ValueKeyframesDefinition = ValueKeyframe | ValueKeyframe[] | UnresolvedValueKeyframe[];
|
1865 | type StyleKeyframesDefinition = {
|
1866 | [K in keyof CSSStyleDeclarationWithTransform]?: ValueKeyframesDefinition;
|
1867 | };
|
1868 | type SVGKeyframesDefinition = {
|
1869 | [K in keyof SVGAttributes]?: ValueKeyframesDefinition;
|
1870 | };
|
1871 | type VariableKeyframesDefinition = {
|
1872 | [key: `--${string}`]: ValueKeyframesDefinition;
|
1873 | };
|
1874 | type SVGPathKeyframesDefinition = {
|
1875 | [K in keyof SVGPathProperties]?: ValueKeyframesDefinition;
|
1876 | };
|
1877 | type DOMKeyframesDefinition = StyleKeyframesDefinition & SVGKeyframesDefinition & SVGPathKeyframesDefinition & VariableKeyframesDefinition;
|
1878 | interface VelocityOptions {
|
1879 | velocity?: number;
|
1880 | restSpeed?: number;
|
1881 | restDelta?: number;
|
1882 | }
|
1883 | type RepeatType = "loop" | "reverse" | "mirror";
|
1884 | interface AnimationPlaybackOptions {
|
1885 | repeat?: number;
|
1886 | repeatType?: RepeatType;
|
1887 | repeatDelay?: number;
|
1888 | }
|
1889 | interface DurationSpringOptions {
|
1890 | duration?: number;
|
1891 | bounce?: number;
|
1892 | }
|
1893 | interface SpringOptions extends DurationSpringOptions, VelocityOptions {
|
1894 | stiffness?: number;
|
1895 | damping?: number;
|
1896 | mass?: number;
|
1897 | }
|
1898 | interface DecayOptions extends VelocityOptions {
|
1899 | keyframes?: number[];
|
1900 | power?: number;
|
1901 | timeConstant?: number;
|
1902 | modifyTarget?: (v: number) => number;
|
1903 | }
|
1904 | interface InertiaOptions$1 extends DecayOptions {
|
1905 | bounceStiffness?: number;
|
1906 | bounceDamping?: number;
|
1907 | min?: number;
|
1908 | max?: number;
|
1909 | }
|
1910 | interface KeyframeOptions {
|
1911 | ease?: Easing | Easing[];
|
1912 | times?: number[];
|
1913 | }
|
1914 | type AnimationDefinition = VariantLabels | TargetAndTransition | TargetResolver;
|
1915 | /**
|
1916 | * @public
|
1917 | */
|
1918 | interface 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 | */
|
1976 | type Subscriber<T> = (v: T) => void;
|
1977 | /**
|
1978 | * @public
|
1979 | */
|
1980 | type PassiveEffect<T> = (v: T, safeSetter: (v: T) => void) => void;
|
1981 | interface MotionValueEventCallbacks<V> {
|
1982 | animationStart: () => void;
|
1983 | animationComplete: () => void;
|
1984 | animationCancel: () => void;
|
1985 | change: (latestValue: V) => void;
|
1986 | renderRequest: () => void;
|
1987 | }
|
1988 | interface ResolvedValues$1 {
|
1989 | [key: string]: string | number;
|
1990 | }
|
1991 | interface Owner {
|
1992 | current: HTMLElement | unknown;
|
1993 | getProps: () => {
|
1994 | onUpdate?: (latest: ResolvedValues$1) => void;
|
1995 | };
|
1996 | }
|
1997 | interface MotionValueOptions {
|
1998 | owner?: Owner;
|
1999 | }
|
2000 | /**
|
2001 | * `MotionValue` is used to track the state and velocity of motion values.
|
2002 | *
|
2003 | * @public
|
2004 | */
|
2005 | declare 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 | }
|
2158 | declare function motionValue<V>(init: V, options?: MotionValueOptions): MotionValue<V>;
|
2159 |
|
2160 | type 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 | */
|
2177 | interface 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 |
|
2239 | interface 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 | */
|
2264 | declare 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 | */
|
2309 | declare function useDragControls(): DragControls;
|
2310 |
|
2311 | type DragElastic = boolean | number | Partial<BoundingBox>;
|
2312 | /**
|
2313 | * @public
|
2314 | */
|
2315 | interface 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 | */
|
2392 | type InertiaOptions = Partial<Omit<Inertia, "velocity" | "type">>;
|
2393 | /**
|
2394 | * @public
|
2395 | */
|
2396 | interface 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 |