Animation and Transition
Scripting Animation & Transition System
Animation Class
The Animation class describes how values animate in time.
Factory Methods
Animation.default()
Creates a default system animation.
1static default(): Animation
Animation.linear(duration?)
1static linear(duration?: number | null): Animation
Constant-speed animation.
Animation.easeIn(duration?)
1static easeIn(duration?: number | null): Animation
Animation.easeOut(duration?)
1static easeOut(duration?: number | null): Animation
Animation.bouncy(options?)
1static bouncy(options?: {
2 duration?: number
3 extraBounce?: number
4}): Animation
Spring-like animation with additional bounce.
Animation.smooth(options?)
1static smooth(options?: {
2 duration?: number
3 extraBounce?: number
4}): Animation
Animation.snappy(options?)
1static snappy(options?: {
2 duration?: number
3 extraBounce?: number
4}): Animation
Animation.spring(options?)
Supports two mutually exclusive modes.
1static spring(options?: {
2 blendDuration?: number
3} & (
4 | {
5 duration?: number
6 bounce?: number
7 response?: never
8 dampingFraction?: never
9 }
10 | {
11 response?: number
12 dampingFraction?: number
13 duration?: never
14 bounce?: never
15 }
16)): Animation
Animation.interactiveSpring(options?)
1static interactiveSpring(options?: {
2 response?: number
3 dampingFraction?: number
4 blendDuration?: number
5}): Animation
Animation.interpolatingSpring(options?)
1static interpolatingSpring(options?: {
2 mass?: number
3 stiffness: number
4 damping: number
5 initialVelocity?: number
6} | {
7 duration?: number
8 bounce?: number
9 initialVelocity?: number
10 mass?: never
11 stiffness?: never
12 damping?: never
13}): Animation
Modifier Methods
.delay(time)
1delay(time: number): Animation
.repeatCount(count, autoreverses)
1repeatCount(count: number, autoreverses?: boolean): Animation
.repeatForever(autoreverses)
1repeatForever(autoreverses?: boolean): Animation
Transition Class
Transition describes how a view enters or leaves the hierarchy.
Instance Methods
.animation(animation)
Attach a specific animation to a transition.
1animation(animation?: Animation): Transition
.combined(other)
Combine transitions.
1combined(other: Transition): Transition
Static Transitions
Identity
Move
1Transition.move(edge: Edge)
Offset
1Transition.offset(position?: Point)
Push
1Transition.pushFrom(edge: Edge)
Opacity
Scale
1Transition.scale(scale?: number, anchor?: Point | KeywordPoint)
Slide
Fade
1Transition.fade(duration?: number)
Flip transitions
1Transition.flipFromLeft(duration?)
2Transition.flipFromRight(duration?)
3Transition.flipFromTop(duration?)
4Transition.flipFromBottom(duration?)
Asymmetric
1Transition.asymmetric(insertion: Transition, removal: Transition)
withAnimation
1function withAnimation(body: () => void): Promise<void>
2function withAnimation(animation: Animation, body: () => void): Promise<void>
3function withAnimation(
4 animation: Animation,
5 completionCriteria: "logicallyComplete" | "removed",
6 body: () => void
7): Promise<void>
Wraps a state update and animates any affected values.
Example:
1withAnimation(Animation.easeOut(0.3), () => {
2 visible.setValue(false)
3})
Correct Usage of the animation View Modifier
(Important Correction)
In Scripting, the animation prop is not:
1animation={anim} // incorrect
The correct format is:
1animation={{
2 animation: anim,
3 value: <observable or value>
4}}
Meaning:
| Field |
Description |
animation |
The Animation instance to use |
value |
The observable value whose changes should be animated |
This mirrors SwiftUI’s .animation(animation, value: value) modifier.
Correct Examples
Example: Animate size changes
1const size = useObservable(100)
2const anim = Animation.spring({ duration: 0.3, bounce: 0.3 })
3
4<Rectangle
5 frame={{ width: size.value, height: size.value }}
6 animation={{ animation: anim, value: size.value }}
7/>
8
9<Button
10 title="Toggle Size"
11 action={() => {
12 size.setValue(size.value === 100 ? 200 : 100)
13 }}
14/>
Example: Animate color changes
1const isOn = useObservable(false)
2
3<Text
4 color={isOn.value ? "red" : "blue"}
5 animation={{
6 animation: Animation.easeIn(0.25),
7 value: isOn.value
8 }}
9>
10 Changing color
11</Text>
Example: Animate layout changes
1const expanded = useObservable(false)
2
3<VStack
4 spacing={expanded.value ? 40 : 10}
5 animation={{
6 animation: Animation.smooth({ duration: 0.3 }),
7 value: expanded.value
8 }}
9>
Transition Usage Examples
Simple visibility toggle with transition
1const visible = useObservable(true)
2
3<VStack>
4 {visible.value &&
5 <Text
6 transition={Transition
7 .slide()
8 .combined(Transition.opacity())
9 }
10 >
11 Slide + Fade
12 </Text>
13 }
14
15 <Button
16 title="Toggle"
17 action={() => {
18 withAnimation(() => {
19 visible.setValue(!visible.value)
20 })
21 }}
22 />
23</VStack>
Combined Example: Animation + Transition
1const visible = useObservable(true)
2const anim = Animation.spring({ duration: 0.4, bounce: 0.25 })
3
4<VStack spacing={12}>
5 {visible.value &&
6 <Text
7 transition={Transition
8 .move("bottom")
9 .combined(Transition.opacity())
10 .animation(anim)
11 }
12 >
13 Animated panel
14 </Text>
15 }
16
17 <Button
18 title="Toggle"
19 action={() => {
20 withAnimation(anim, () => {
21 visible.setValue(!visible.value)
22 })
23 }}
24 />
25</VStack>
Summary
Key Points
useObservable drives UI updates.withAnimation animates state changes.Transition defines enter/exit effects.- Correct animation modifier usage:
1animation={{ animation: myAnimation, value: myValue }}
