Animations Overview

Asset Studio supports per-item animations organized into three categories: enter, exit, and effect. Animations are driven by the timeline and controlled via the usePlayer hook.

Animation Categories

Category	Property	When It Plays
Enter	`enter`	When the item first appears on the timeline
Exit	`exit`	Before the item disappears from the timeline
Effect	`effect`	Continuously loops while the item is visible

Setting Animations

Animations are set as properties on any item:

tsx

const { updateItem } = useStudio()

updateItem(item.id, {
  enter: {
    animation: 'fade',
    duration: 0.6,   // seconds
    delay: 0,
    strength: 80,
  },
  exit: {
    animation: 'fade',
    duration: 0.4,   // seconds
    endDelay: 0,
    strength: 80,
  },
  effect: {
    animation: 'pulse',
    strength: 80,
  },
})

Removing an Animation

Set the property to undefined:

tsx

updateItem(item.id, { enter: undefined })

Animation Config Types

EnterAnimation

Property	Type	Description
`animation`	`string`	Animation name (see Enter Animations below).
`duration`	`number`	Duration in seconds.
`delay`	`number`	Delay before the animation starts, in seconds.
`strength`	`number`	Intensity of the animation (`0–200`).

ExitAnimation

Property	Type	Description
`animation`	`string`	Animation name (see Exit Animations below).
`duration`	`number`	Duration in seconds.
`endDelay`	`number`	Delay from the end of the timeline, in seconds.
`strength`	`number`	Intensity of the animation (`0–200`).

EffectAnimation

Property	Type	Description
`animation`	`string`	Animation name (see Effect Animations below).
`strength`	`number`	Intensity of the animation (`0–200`).

Enter Animations (`ENTER_ANIMATIONS`)

Value	Description
`fade`	Fades in from transparent to full opacity
`move-right`	Slides in from the left
`move-left`	Slides in from the right
`move-up`	Slides in from the bottom
`move-down`	Slides in from the top
`move-up-right`	Slides in from the bottom-left
`move-up-left`	Slides in from the bottom-right
`move-down-right`	Slides in from the top-left
`move-down-left`	Slides in from the top-right
`scale`	Scales up from a smaller size
`rise`	Rises upward while fading in

Exit Animations (`EXIT_ANIMATIONS`)

Value	Description
`fade`	Fades out to transparent
`move-right`	Slides out to the right
`move-left`	Slides out to the left
`move-up`	Slides out upward
`move-down`	Slides out downward
`move-up-right`	Slides out to the top-right
`move-up-left`	Slides out to the top-left
`move-down-right`	Slides out to the bottom-right
`move-down-left`	Slides out to the bottom-left
`scale`	Scales down to a smaller size
`fall`	Falls downward while fading out

Effect Animations (`EFFECT_ANIMATIONS`)

Value	Description
`pulse`	Continuously pulses scale up and down
`blink`	Blinks opacity on and off
`bounce`	Bounces vertically
`spin`	Rotates continuously

Using Animation Constants

The animation name lists are exported as constants you can use to build UI pickers:

tsx

import {
  ENTER_ANIMATIONS,
  EXIT_ANIMATIONS,
  EFFECT_ANIMATIONS,
} from '@asset-studio/core'

function AnimationPicker({ onSelect }) {
  return (
    <select onChange={e => onSelect(e.target.value)}>
      <option value="">None</option>
      {ENTER_ANIMATIONS.map(name => (
        <option key={name} value={name}>
          {name}
        </option>
      ))}
    </select>
  )
}

Playback

Animations play automatically when you use usePlayer to play the timeline:

tsx

const { play } = usePlayer()

// Start timeline — all enter/exit/effect animations play in sync
play()

Animations Overview ​

Animation Categories ​

Setting Animations ​

Removing an Animation ​

Animation Config Types ​

EnterAnimation ​

ExitAnimation ​

EffectAnimation ​

Enter Animations (ENTER_ANIMATIONS) ​

Exit Animations (EXIT_ANIMATIONS) ​

Effect Animations (EFFECT_ANIMATIONS) ​

Using Animation Constants ​

Playback ​

Related ​