Interface: PushInOutProps

Defined in: src/canvas/interfaces/transition-props.ts:32

Extends

• BaseTransitionProps.AnimationOptions

Properties

aliasToRemoveAfter?

> optional aliasToRemoveAfter?: string | string[]

Defined in: src/canvas/tickers/types/CommonTickerProps.ts:7

The alias to remove after the effect is done

Default

[]

Inherited from

AnimationOptions.aliasToRemoveAfter

autoplay?

> optional autoplay?: boolean

Defined in: node_modules/motion-dom/dist/index.d.ts:1860

Inherited from

AnimationOptions.autoplay

bounce?

> optional bounce?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1689

bounce determines the "bounciness" of a spring animation.

0 is no bounce, and 1 is extremely bouncy.

If duration is set, this defaults to 0.25.

Note: bounce and duration will be overridden if stiffness, damping or mass are set.

Inherited from

AnimationOptions.bounce

bounceDamping?

> optional bounceDamping?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1757

If min or max is set, this affects the damping of the bounce spring. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

Inherited from

AnimationOptions.bounceDamping

bounceStiffness?

> optional bounceStiffness?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1749

If min or max is set, this affects the stiffness of the bounce spring. Higher values will create more sudden movement. Set to 500 by default.

Inherited from

AnimationOptions.bounceStiffness

completeOnContinue?

> optional completeOnContinue?: boolean

Defined in: src/canvas/interfaces/transition-props.ts:13

If true, the transition will be completed before the next step. For example, if the transition is a dissolve transition, the "alpha" of the texture will be 1 before the next step.

Default

true

Inherited from

BaseTransitionProps.completeOnContinue

damping?

> optional damping?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1705

Strength of opposing force. If set to 0, spring will oscillate indefinitely. Set to 10 by default.

Inherited from

AnimationOptions.damping

delay?

> optional delay?: number | DynamicOption<number>

Defined in: node_modules/motion-dom/dist/index.d.ts:1943

Inherited from

AnimationOptions.delay

delayChildren?

> optional delayChildren?: number | DynamicOption<number>

Defined in: node_modules/motion-dom/dist/index.d.ts:1799

When using variants, children animations will start after this duration (in seconds). You can add the transition property to both the motion.div and the variant directly. Adding it to the variant generally offers more flexibility, as it allows you to customize the delay per visual state.

Inherited from

AnimationOptions.delayChildren

direction?

> optional direction?: "left" | "right" | "up" | "down"

Defined in: src/canvas/interfaces/transition-props.ts:37

The direction of the push effect.

Default

"right"

driver?

> optional driver?: Driver

Defined in: node_modules/motion-dom/dist/index.d.ts:1845

Inherited from

AnimationOptions.driver

duration?

> optional duration?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1859

The duration of the tween animation. Set to 0.3 by default, 0r 0.8 if animating a series of keyframes.

Inherited from

AnimationOptions.duration

ease?

> optional ease?: Easing | Easing[]

Defined in: node_modules/motion-dom/dist/index.d.ts:1830

Inherited from

AnimationOptions.ease

elapsed?

> optional elapsed?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1844

The duration of time already elapsed in the animation. Set to 0 by default.

Inherited from

AnimationOptions.elapsed

~~forceCompleteBeforeNext?~~

> optional forceCompleteBeforeNext?: boolean

Defined in: src/canvas/interfaces/transition-props.ts:7

Deprecated

Use completeOnContinue instead.

Inherited from

BaseTransitionProps.forceCompleteBeforeNext

from?

> optional from?: any

Defined in: node_modules/motion-dom/dist/index.d.ts:1862

Inherited from

AnimationOptions.from

inherit?

> optional inherit?: boolean

Defined in: node_modules/motion-dom/dist/index.d.ts:1869

If true, this transition will shallow-merge with its parent transition instead of replacing it. Inner keys win.

Inherited from

AnimationOptions.inherit

isSync?

> optional isSync?: boolean

Defined in: node_modules/motion-dom/dist/index.d.ts:1609

Inherited from

AnimationOptions.isSync

mass?

> optional mass?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1712

Mass of the moving object. Higher values will result in more lethargic movement. Set to 1 by default.

Inherited from

AnimationOptions.mass

max?

> optional max?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1769

Maximum constraint. If set, the value will "bump" against this value (or immediately snap to it, if the initial animation value exceeds this value).

Inherited from

AnimationOptions.max

min?

> optional min?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1763

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).

Inherited from

AnimationOptions.min

modifyTarget?

> optional modifyTarget?: (v) => number

Defined in: node_modules/motion-dom/dist/index.d.ts:1739

A function that receives the automatically-calculated target and returns a new one. Useful for snapping the target to a grid.

Parameters

v

number

Returns

number

Inherited from

AnimationOptions.modifyTarget

power?

> optional power?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1726

A higher power value equals a further target. Set to 0.8 by default.

Inherited from

AnimationOptions.power

reduceMotion?

> optional reduceMotion?: boolean

Defined in: node_modules/motion-dom/dist/index.d.ts:1953

Whether to reduce motion for transform/layout animations.

• true: Skip transform/layout animations (instant transition)
• false: Always animate transforms/layout
• undefined: Use device preference (default behavior)

Inherited from

AnimationOptions.reduceMotion

repeat?

> optional repeat?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1620

The number of times to repeat the transition. Set to Infinity for perpetual repeating.

Without setting repeatType, this will loop the animation.

Inherited from

AnimationOptions.repeat

repeatDelay?

> optional repeatDelay?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1639

When repeating an animation, repeatDelay will set the duration of the time to wait, in seconds, between each repetition.

Inherited from

AnimationOptions.repeatDelay

repeatType?

> optional repeatType?: RepeatType

Defined in: node_modules/motion-dom/dist/index.d.ts:1632

How to repeat the animation. This can be either:

"loop": Repeats the animation from the start

"reverse": Alternates between forward and backwards playback

"mirror": Switches from and to alternately

Inherited from

AnimationOptions.repeatType

restDelta?

> optional restDelta?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1657

End animation if distance is below this value and speed is below restSpeed. When animation ends, spring gets "snapped" to. Set to 0.01 by default.

Inherited from

AnimationOptions.restDelta

restSpeed?

> optional restSpeed?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1649

End animation if absolute speed (in units per second) drops below this value and delta is smaller than restDelta. Set to 0.01 by default.

Inherited from

AnimationOptions.restSpeed

~~staggerChildren?~~

> optional staggerChildren?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1812

When using variants, animations of child components can be staggered by this duration (in seconds).

For instance, if staggerChildren is 0.01, the first child will be delayed by 0 seconds, the second by 0.01, the third by 0.02 and so on.

The calculated stagger delay will be added to delayChildren.

Deprecated

• Use delayChildren: stagger(interval) instead.

Inherited from

AnimationOptions.staggerChildren

~~staggerDirection?~~

> optional staggerDirection?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1821

The direction in which to stagger children.

A value of 1 staggers from the first to the last while -1 staggers from the last to the first.

Deprecated

• Use delayChildren: stagger(interval, { from: "last" }) instead.

Inherited from

AnimationOptions.staggerDirection

startTime?

> optional startTime?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1861

Inherited from

AnimationOptions.startTime

stiffness?

> optional stiffness?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1698

Stiffness of the spring. Higher values will create more sudden movement. Set to 100 by default.

Inherited from

AnimationOptions.stiffness

tickerAliasToResume?

> optional tickerAliasToResume?: string | string[]

Defined in: src/canvas/tickers/types/CommonTickerProps.ts:17

The alias to resume after the effect is done

Default

[]

Inherited from

AnimationOptions.tickerAliasToResume

tickerIdToResume?

> optional tickerIdToResume?: string | string[]

Defined in: src/canvas/tickers/types/CommonTickerProps.ts:22

The id of the ticker to resume after the effect is done

Default

[]

Inherited from

AnimationOptions.tickerIdToResume

timeConstant?

> optional timeConstant?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1733

Adjusting the time constant will change the duration of the deceleration, thereby affecting its feel. Set to 700 by default.

Inherited from

AnimationOptions.timeConstant

times?

> optional times?: number[]

Defined in: node_modules/motion-dom/dist/index.d.ts:1831

Inherited from

AnimationOptions.times

type?

> optional type?: AnimationGeneratorType

Defined in: node_modules/motion-dom/dist/index.d.ts:1853

Type of animation to use.

• "tween": Duration-based animation with ease curve
• "spring": Physics or duration-based spring animation
• false: Use an instant animation

Inherited from

AnimationOptions.type

velocity?

> optional velocity?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1642

Inherited from

AnimationOptions.velocity

visualDuration?

> optional visualDuration?: number

Defined in: node_modules/motion-dom/dist/index.d.ts:1677

If visualDuration is set, this will override duration.

The visual duration is a time, set in seconds, that the animation will take to visually appear to reach its target.

In other words, the bulk of the transition will occur before this time, and the "bouncy bit" will mostly happen after.

This makes it easier to edit a spring, as well as visually coordinate it with other time-based animations.

Inherited from

AnimationOptions.visualDuration

when?

> optional when?: string | false

Defined in: node_modules/motion-dom/dist/index.d.ts:1790

Describes the relationship between the transition and its children. Set to false by default.

Remarks

When using variants, the transition can be scheduled in relation to its children with either "beforeChildren" to finish this transition before starting children transitions, "afterChildren" to finish children transitions before starting this transition.

Inherited from

AnimationOptions.when