Skip to main content
The withAnimation function wraps callbacks to execute state changes within an animation context, allowing smooth transitions when UI state updates. 
withAnimation(animation?: Spring | InterpolatingSpring | EaseIn | EaseInOut | EaseOut | Bouncy | Snappy | Linear | AnimationComponent, body: () => void): Component

​
Parameters

  • animation (optional) - Animation configuration created with Spring(), InterpolatingSpring(), EaseIn(), EaseInOut(), EaseOut(), Bouncy(), Snappy(), or Linear() constructors, or an AnimationComponent
  • body - Function to execute within the animation context

​
Returns

Returns a Component that executes the body function within the animation context.

​
Usage

​
Basic animated state change

function AnimatedCounter() {
  const [count, setCount] = useState(0)

  const increment = () => {
    withAnimation(() => {
      setCount(count + 1)
    })
  }

  return VStack([
    Text(`Count: ${count}`),
    Button("Animate +1", increment)
  ])
}

​
With animation configuration

function CustomAnimatedView() {
  const [isExpanded, setIsExpanded] = useState(false)

  const toggleExpanded = () => {
    withAnimation(Spring({ response: 0.5 }), () => {
      setIsExpanded(!isExpanded)
    })
  }

  return VStack([
    Button(isExpanded ? "Collapse" : "Expand", toggleExpanded),
    isExpanded && VStack([
      Text("Expanded content"),
      Text("More details here")
    ])
  ])
}

​
Using animation constructors

function ComponentBasedAnimation() {
  const [offset, setOffset] = useState(0)

  const animateMove = () => {
    withAnimation(EaseInOut({ duration: 1.0 }), () => {
      setOffset(offset + 100)
    })
  }

  return VStack([
    Rectangle()
      .fill(Color("blue"))
      .frame({ width: 50, height: 50 })
      .offset({ x: offset, y: 0 }),
    Button("Move Right", animateMove)
  ])
}

​
Chaining animations

function ChainedAnimations() {
  const [scale, setScale] = useState(1.0)
  const [rotation, setRotation] = useState(0)

  const animateSequence = () => {
    // First animation
    withAnimation(EaseInOut({ duration: 0.3 }), () => {
      setScale(1.5)
    })

    // Second animation after delay
    setTimeout(() => {
      withAnimation(EaseInOut({ duration: 0.5 }), () => {
        setRotation(rotation + 180)
        setScale(1.0)
      })
    }, 300)
  }

  return VStack([
    Rectangle()
      .fill(Color("red"))
      .frame({ width: 100, height: 100 })
      .scaleEffect(scale)
      .rotationEffect(rotation),
    Button("Animate Sequence", animateSequence)
  ])
}

​
Animation Constructors

You can create animations using these constructor functions:

​
Spring Animations

  • Spring(options?) - Creates a spring animation
    • response - Spring response time (default: 0.5)
    • dampingFraction - Damping fraction (default: 1.0)
    • blendDuration - Blend duration (default: 0)
  • InterpolatingSpring(options) - Creates an interpolating spring animation
    • stiffness - Spring stiffness (required)
    • damping - Spring damping (required)
    • mass - Spring mass (required)
  • Bouncy(options?) - Creates a bouncy spring animation
    • duration - Animation duration
    • extraBounce - Extra bounce amount
  • Snappy(options?) - Creates a snappy spring animation
    • response - Spring response time
    • dampingFraction - Damping fraction
    • blendDuration - Blend duration

​
Easing Animations

  • EaseIn(options?) - Ease-in animation
    • duration - Animation duration
  • EaseOut(options?) - Ease-out animation
    • duration - Animation duration
  • EaseInOut(options?) - Ease-in-out animation
    • duration - Animation duration
  • Linear(options?) - Linear animation
    • duration - Animation duration

​
Animation Modifiers

All animation constructors return an AnimationComponent that supports chaining:
  • .delay(seconds) - Delays the animation start
  • .speed(multiplier) - Adjusts animation speed
  • .repeatCount(count) - Repeats the animation a specific number of times
  • .repeatForever(enabled) - Repeats the animation indefinitely

​
Notes

  • Animation behavior depends on the runtime implementation
  • Default implementation executes the callback immediately if no animation system is available
  • Animation options are passed through to the native animation system
  • Multiple state changes within the same withAnimation block are batched
  • The animation context applies to all state changes within the callback
  • Renderer-specific animation systems may support different configuration options