Interface: GlitchEffectProps
Defined in: src/canvas/interfaces/effect-props.ts:163
Shared options for the generic, repeated articulated-animation effects (BounceEffectProps, HopEffectProps, WiggleEffectProps, NodEffectProps, SwayEffectProps): a number of cycles, each one shrinking towards rest by decay.
Extends
Properties
aliasToRemoveAfter?
> optional aliasToRemoveAfter?: string | string[]
Defined in: src/tickers/types/CommonTickerProps.ts:6
An array of strings containing the aliases of the canvas components to remove after the animation completes.
Default
[]Inherited from
DecayingEffectProps.aliasToRemoveAfter
autoplay?
> optional autoplay?: boolean
Defined in: node_modules/motion-dom/dist/index.d.ts:2239
Inherited from
bounce?
> optional bounce?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2062
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
bounceDamping?
> optional bounceDamping?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2136
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
DecayingEffectProps.bounceDamping
bounceStiffness?
> optional bounceStiffness?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2128
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
DecayingEffectProps.bounceStiffness
bursts?
> optional bursts?: number
Defined in: src/canvas/interfaces/effect-props.ts:173
The number of glitch bursts.
Default
3completeOnContinue?
> optional completeOnContinue?: boolean
Defined in: src/canvas/interfaces/transition-props.ts:11
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
trueInherited from
DecayingEffectProps.completeOnContinue
damping?
> optional damping?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2082
Strength of opposing force. If set to 0, spring will oscillate
indefinitely. Set to 10 by default.
Default
10
@publicInherited from
decay?
> optional decay?: number
Defined in: src/canvas/interfaces/effect-props.ts:35
How much each successive cycle shrinks relative to the previous one (1 = no decay/constant
amplitude, 0 = the second cycle onward has no amplitude at all).
Default
0.5Inherited from
delay?
> optional delay?: number | DynamicOption<number>
Defined in: node_modules/motion-dom/dist/index.d.ts:2370
Inherited from
delayChildren?
> optional delayChildren?: number | DynamicOption<number>
Defined in: node_modules/motion-dom/dist/index.d.ts:2178
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
DecayingEffectProps.delayChildren
direction?
> optional direction?: number
Defined in: src/canvas/interfaces/effect-props.ts:183
The angle (in degrees) slices are displaced along.
Default
0driver?
> optional driver?: Driver
Defined in: node_modules/motion-dom/dist/index.d.ts:2224
Inherited from
duration?
> optional duration?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2238
The duration of the tween animation. Set to 0.3 by default, 0r 0.8 if animating a series of keyframes.
Inherited from
ease?
> optional ease?: Easing | Easing[]
Defined in: node_modules/motion-dom/dist/index.d.ts:2209
Inherited from
elapsed?
> optional elapsed?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2223
The duration of time already elapsed in the animation. Set to 0 by
default.
Inherited from
from?
> optional from?: any
Defined in: node_modules/motion-dom/dist/index.d.ts:2241
Inherited from
inherit?
> optional inherit?: boolean
Defined in: node_modules/motion-dom/dist/index.d.ts:2248
If true, this transition will shallow-merge with its parent transition instead of replacing it. Inner keys win.
Inherited from
isSync?
> optional isSync?: boolean
Defined in: node_modules/motion-dom/dist/index.d.ts:1982
Inherited from
mass?
> optional mass?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2091
Mass of the moving object. Higher values will result in more lethargic
movement. Set to 1 by default.
Default
1
@publicInherited from
max?
> optional max?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2148
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
min?
> optional min?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2142
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
modifyTarget?
> optional modifyTarget?: (v) => number
Defined in: node_modules/motion-dom/dist/index.d.ts:2118
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
DecayingEffectProps.modifyTarget
path?
> optional path?: MotionPath | MotionPath & ValueTransition
Defined in: node_modules/motion-dom/dist/index.d.ts:2267
The path the element travels between its old and new x/y positions.
Slot in a path factory (e.g. arc()) to swap the default
straight-line interpolation for something curved.
Can be used in keyframe animations (transition.path) and layout
animations (transition.layout.path), including with useAnimate.
Inherited from
power?
> optional power?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2105
A higher power value equals a further target. Set to 0.8 by default.
Inherited from
reduceMotion?
> optional reduceMotion?: boolean
Defined in: node_modules/motion-dom/dist/index.d.ts:2380
Whether to reduce motion for transform/layout animations.
true: Skip transform/layout animations (instant transition)false: Always animate transforms/layoutundefined: Use device preference (default behavior)
Inherited from
DecayingEffectProps.reduceMotion
repeat?
> optional repeat?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:1993
The number of times to repeat the transition. Set to Infinity for perpetual repeating.
Without setting repeatType, this will loop the animation.
Inherited from
repeatDelay?
> optional repeatDelay?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2012
When repeating an animation, repeatDelay will set the
duration of the time to wait, in seconds, between each repetition.
Inherited from
DecayingEffectProps.repeatDelay
repeatType?
> optional repeatType?: RepeatType
Defined in: node_modules/motion-dom/dist/index.d.ts:2005
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
DecayingEffectProps.repeatType
restDelta?
> optional restDelta?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2030
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
restSpeed?
> optional restSpeed?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2022
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
rgbSplit?
> optional rgbSplit?: number
Defined in: src/canvas/interfaces/effect-props.ts:189
The peak red/blue channel separation (pixels) layered on top of the slice displacement,
following the same jittery envelope. 0 disables it.
Default
6skipAnimations?
> optional skipAnimations?: boolean
Defined in: node_modules/motion-dom/dist/index.d.ts:2256
If true, the animation skips straight to its final value instead of
tweening. Used by MotionConfig's skipAnimations to opt entire
subtrees out of animation (e.g. for E2E screenshot stability).
Inherited from
DecayingEffectProps.skipAnimations
slices?
> optional slices?: number
Defined in: src/canvas/interfaces/effect-props.ts:178
The number of glitch slices.
Default
8staggerChildren?
> optional staggerChildren?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2191
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
DecayingEffectProps.staggerChildren
staggerDirection?
> optional staggerDirection?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2200
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
DecayingEffectProps.staggerDirection
startTime?
> optional startTime?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2240
Inherited from
stiffness?
> optional stiffness?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2073
Stiffness of the spring. Higher values will create more sudden movement.
Set to 100 by default.
Default
100
@publicInherited from
strength?
> optional strength?: number
Defined in: src/canvas/interfaces/effect-props.ts:168
The peak slice-displacement amount (pixels) of the first, largest burst.
Default
40tickerAliasToResume?
> optional tickerAliasToResume?: string | string[]
Defined in: src/tickers/types/CommonTickerProps.ts:16
If you want to resume tickers that were previously paused, provide the aliases of the canvas components whose tickers should be resumed.
Default
[]Inherited from
DecayingEffectProps.tickerAliasToResume
tickerIdToResume?
> optional tickerIdToResume?: string | string[]
Defined in: src/tickers/types/CommonTickerProps.ts:21
A string containing the ticker ID to resume after the animation completes.
Default
[]Inherited from
DecayingEffectProps.tickerIdToResume
timeConstant?
> optional timeConstant?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2112
Adjusting the time constant will change the duration of the
deceleration, thereby affecting its feel. Set to 700 by default.
Inherited from
DecayingEffectProps.timeConstant
times?
> optional times?: number[]
Defined in: node_modules/motion-dom/dist/index.d.ts:2210
Inherited from
type?
> optional type?: AnimationGeneratorType
Defined in: node_modules/motion-dom/dist/index.d.ts:2232
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
velocity?
> optional velocity?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2015
Inherited from
visualDuration?
> optional visualDuration?: number
Defined in: node_modules/motion-dom/dist/index.d.ts:2050
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
DecayingEffectProps.visualDuration
when?
> optional when?: string | false
Defined in: node_modules/motion-dom/dist/index.d.ts:2169
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.