AnimatedSprite

A simple way to display an animation depicted by a list of textures.

I recommend using spritesheets created by TexturePacker (they have a great tutorial on it). If you don’t want to use spritesheets, you can simply just pass in an array of your desired textures.

PIXI.AnimatedSprite description from PixiJS

source

An AnimatedSprite is a simple way to display an animation depicted by a list of textures.

Type-Safety Limitation with Subclasses

If you are extending PIXI.AnimatedSprite with your own subclass, you MUST provide the instance prop with your custom instance.

Due to TypeScript’s limitations with generic types, if you don’t provide an instance, a base PIXI.AnimatedSprite will be created and unsafely cast to your subclass type. This will cause runtime errors when trying to access subclass-specific properties or methods.

Correct Usage with Subclasses:

class MyAnimatedSprite extends PIXI.AnimatedSprite {
  myCustomMethod() { ... }
}

const sprite = new MyAnimatedSprite(textures)
<AnimatedSprite instance={sprite} />

This limitation is documented in issue #49. When using the base PIXI.AnimatedSprite type (the default), this is not a concern.

Usage

<script>
  import * as PIXI from 'pixi.js'
  import { AnimatedSprite } from 'svelte-pixi'
</script>

<AnimatedSprite
  x={360}
  y={200}
  textures={[
    PIXI.Texture.from('adventurer-idle-00.png'),
    PIXI.Texture.from('adventurer-idle-01.png'),
    PIXI.Texture.from('adventurer-idle-02.png'),
  ]}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
/>

<script>
  import * as PIXI from 'pixi.js'
  import { AnimatedSprite } from 'svelte-pixi/svelte-4'
</script>

<AnimatedSprite
  x={360}
  y={200}
  textures={[
    PIXI.Texture.from('adventurer-idle-00.png'),
    PIXI.Texture.from('adventurer-idle-01.png'),
    PIXI.Texture.from('adventurer-idle-02.png'),
  ]}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
/>

Multiple Animations

Svelte 5
Svelte 4 (deprecated)

<script>
  import { AnimatedSprite } from 'svelte-pixi'
  import { Assets } from 'pixi.js'

  // loaded from parent <AssetsLoader />
  const spritesheet = Assets.get('/assets/adventurer-spritesheet.json')
  let textures = spritesheet.animations['adventurer-idle']

  function changeAnimation() {
    // pick an an animation from the spritesheet at random
    const keys = Object.keys(spritesheet.animations)
    const randomIndex = Math.floor(Math.random() * keys.length)
    textures = spritesheet.animations[keys[randomIndex]]
  }

</script>

<AnimatedSprite
  {textures}
  x={360}
  y={200}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
  onloop={changeAnimation}
/>

<script>
  import { AnimatedSprite } from 'svelte-pixi/svelte-4'
  import { Assets } from 'pixi.js'

  // loaded from parent <AssetsLoader />
  const spritesheet = Assets.get('/assets/adventurer-spritesheet.json')
  let textures = spritesheet.animations['adventurer-idle']

  function changeAnimation() {
    // pick an an animation from the spritesheet at random
    const keys = Object.keys(spritesheet.animations)
    const randomIndex = Math.floor(Math.random() * keys.length)
    textures = spritesheet.animations[keys[randomIndex]]
  }

</script>

<AnimatedSprite
  {textures}
  x={360}
  y={200}
  playing
  animationSpeed={0.1}
  anchor={0.5}
  scale={3}
  on:loop={changeAnimation}
/>

API

Svelte 5
Svelte 4 (deprecated)

Props

* denotes required

Name	Description
textures*	`PIXI.Texture<PIXI.TextureSource<any>>[]PIXI.FrameObject[]` The array of textures or frame objects used for the animation sequence. Can be set to either an array of Textures or an array of FrameObjects with custom timing.
accessible	`boolean` Flag for if the object is accessible. If true AccessibilityManager will overlay a shadow div with attributes set
accessibleChildren	`boolean` Setting to false will prevent any children inside this container to be accessible. Defaults to true.
accessibleHint	`nullstring` Sets the aria-label attribute of the shadow div
accessiblePointerEvents	`"visible""auto""none""visiblePainted""visibleFill""visibleStroke""painted""fill""stroke""all""inherit"` Specify the pointer-events the accessible div will use Defaults to auto.
accessibleTitle	`nullstring` Sets the title attribute of the shadow div If accessibleTitle AND accessibleHint has not been this will default to 'container [tabIndex]'
accessibleType	`"object""label""a""abbr""address""area""article""aside""audio""b""base""bdi""bdo""blockquote""body""br""button""canvas""caption""cite""code""col""colgroup""data""datalist""dd""del""details""dfn""dialog""div""dl""dt""em""embed""fieldset""figcaption""figure""footer""form""h1""h2""h3""h4""h5""h6""head""header""hgroup""hr""html""i""iframe""img""input""ins""kbd""legend""li""link""main""map""mark""menu""meta""meter""nav""noscript""ol""optgroup""option""output""p""picture""pre""progress""q""rp""rt""ruby""s""samp""script""search""section""select""slot""small""source""span""strong""style""sub""summary""sup""table""tbody""td""template""textarea""tfoot""th""thead""time""title""tr""track""u""ul""var""video""wbr"` Specify the type of div the accessible layer is. Screen readers treat the element differently depending on this type. Defaults to button.
alpha	`number`
anchor	`number[number, number]{ x: number; y: number }PIXI.Point` The anchor sets the origin point of the sprite. The default value is taken from the {@link Texture} and passed to the constructor. The default is `(0,0)`, this means the sprite's origin is the top left. Setting the anchor to `(0.5,0.5)` means the sprite's origin is centered. Setting the anchor to `(1,1)` would mean the sprite's origin point will be the bottom right corner. If you pass only single parameter, it will set both x and y to the same value as shown in the example below.
angle	`number` The angle of the object in degrees. [!NOTE] 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
animationSpeed	`number` The speed that the AnimatedSprite will play at. Higher is faster, lower is slower.
autoUpdate	`boolean` Controls whether the animation automatically updates using the shared ticker. When enabled, the animation will update on each frame. When disabled, you must manually call update() to advance the animation.
blendMode	`"none""inherit""normal""add""multiply""screen""darken""lighten""erase""color-dodge""color-burn""linear-burn""linear-dodge""linear-light""hard-light""soft-light""pin-light""difference""exclusion""overlay""saturation""color""luminosity""normal-npm""add-npm""screen-npm""subtract""divide""vivid-light""hard-mix""negation""min""max"`
boundsArea	`PIXI.Rectangle` An optional bounds area for this container. Setting this rectangle will stop the renderer from recursively measuring the bounds of each children and instead use this single boundArea. [!IMPORTANT] This is great for optimisation! If for example you have a 1000 spinning particles and you know they all sit within a specific bounds, then setting it will mean the renderer will not need to measure the 1000 children to find the bounds. Instead it will just use the bounds you set.
cacheAsBitmap	`boolean` Legacy property for backwards compatibility with PixiJS v7 and below. Use `cacheAsTexture` instead.
cacheAsTexture	`PIXI.CacheAsTextureOptionsboolean`
cullable	`boolean` Controls whether this object should be culled when out of view. When true, the object will not be rendered if its bounds are outside the visible area.
cullableChildren	`boolean` Controls whether children of this container can be culled. When false, skips recursive culling checks for better performance.
cullArea	`PIXI.Rectangle` Custom shape used for culling calculations instead of object bounds. Defined in local space coordinates relative to the object. [!NOTE] Setting this to a custom Rectangle allows you to define a specific area for culling, which can improve performance by avoiding expensive bounds calculations.
cursor	`"progress""auto""none""default""context-menu""help""pointer""wait""cell""crosshair""text""vertical-text""alias""copy""move""no-drop""not-allowed""e-resize""n-resize""ne-resize""nw-resize""s-resize""se-resize""sw-resize""w-resize""ns-resize""ew-resize""nesw-resize""col-resize""nwse-resize""row-resize""all-scroll""zoom-in""zoom-out""grab""grabbing"string & {}` The cursor style to display when the mouse pointer is hovering over the object. Accepts any valid CSS cursor value or custom cursor URL.
effects	`PIXI.Effect[]` todo Needs docs
eventMode	`"auto""none""passive""static""dynamic"` Enable interaction events for the Container. Touch, pointer and mouse events are supported.
filterArea	`PIXI.Rectangle` The area the filter is applied to. This is used as an optimization to define a specific region for filter effects instead of calculating the display object bounds each frame. [!NOTE] Setting this to a custom Rectangle allows you to define a specific area for filter effects, which can improve performance by avoiding expensive bounds calculations.
filters	`readonly PIXI.Filter[]` Sets the filters for the displayObject. Filters are visual effects that can be applied to any display object and its children. [!IMPORTANT] This is a WebGL/WebGPU only feature and will be ignored by the canvas renderer.
height	`number` The height of the Container, [!NOTE] Changing the height will adjust the scale.y property of the container while maintaining its aspect ratio. [!NOTE] If you want to set both width and height at the same time, use {@link Container#setSize} as it is more optimized by not recalculating the local bounds twice.
hitArea	`nullPIXI.IHitArea` Defines a custom hit area for pointer interaction testing. When set, this shape will be used for hit testing instead of the container's standard bounds.
instance	`T` The PIXI.AnimatedSprite instance. Can be set or bound to. WARNING: Type-safety limitation - If you are using a subclass of PIXI.AnimatedSprite, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.AnimatedSprite will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods. Example: `class MyAnimatedSprite extends PIXI.AnimatedSprite { myMethod() { ... } } const sprite = new MyAnimatedSprite(textures) <!-- Correct: always provide instance for subclasses --> <AnimatedSprite instance={sprite} />`
interactive	`boolean` Whether this object should fire UI events. This is an alias for `eventMode` set to `'static'` or `'passive'`. Setting this to true will enable interaction events like `pointerdown`, `click`, etc. Setting it to false will disable all interaction events on this object.
interactiveChildren	`boolean` Controls whether children of this container can receive pointer events. Setting this to false allows PixiJS to skip hit testing on all children, improving performance for containers with many non-interactive children.
isRenderGroup	`boolean`
label	`string` The instance label of the object.
loop	`boolean` Whether or not the animation repeats after playing. When true, the animation will restart from the beginning after reaching the last frame. When false, the animation will stop on the last frame.
mask	`numberPIXI.Container<PIXI.ContainerChild>Partial<PIXI.MaskOptionsAndMask>`
name	`string` The instance name of the object.
onadded	`() => void` Called when the instance is added to its parent or stage
onclick	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `click` event. Fired when a pointer device (mouse, touch, etc.) completes a click action.
oncomplete	`() => void` Alias for onComplete
onComplete	`() => void` User-assigned function to call when an AnimatedSprite finishes playing. This function is called when the animation reaches the end and stops playing. If the animation is set to loop, this function will not be called.
oncreate	`(instance: T) => void` Called on creation of the component. You can use this to do any setup on the instance directly
onframechange	`(currentFrame: number) => void` Alias for onFrameChange
onFrameChange	`(currentFrame: number) => void` User-assigned function to call when an AnimatedSprite changes which texture is being rendered. This function is called every time the current frame changes during playback. It receives the current frame index as an argument.
onglobalmousemove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `globalmousemove` event. Fired when the mouse moves anywhere, regardless of whether the pointer is over this object. The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.
onglobalpointermove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `globalpointermove` event. Fired when the pointer moves anywhere, regardless of whether the pointer is over this object. The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.
onglobaltouchmove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `globaltouchmove` event. Fired when a touch interaction moves anywhere, regardless of whether the pointer is over this object. The object must have `eventMode` set to 'static' or 'dynamic' to receive this event.
onloop	`() => void` Alias for onLoop
onLoop	`() => void` User-assigned function to call when `loop` is true, and an AnimatedSprite is played and loops around to start again.
onmousedown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mousedown` event. Fired when a mouse button is pressed while the pointer is over the object.
onmouseenter	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseenter` event. Fired when the mouse pointer enters the bounds of the object. Does not bubble.
onmouseleave	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseleave` event. Fired when the pointer leaves the bounds of the display object. Does not bubble.
onmousemove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mousemove` event. Fired when the pointer moves while over the display object.
onmouseout	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseout` event. Fired when the pointer moves out of the bounds of the display object.
onmouseover	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseover` event. Fired when the pointer moves onto the bounds of the display object.
onmouseup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseup` event. Fired when a mouse button is released over the display object.
onmouseupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `mouseupoutside` event. Fired when a mouse button is released outside the display object that initially registered a mousedown.
onpointercancel	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointercancel` event. Fired when a pointer device interaction is canceled or lost.
onpointerdown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerdown` event. Fired when a pointer device button (mouse, touch, pen, etc.) is pressed.
onpointerenter	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerenter` event. Fired when a pointer device enters the bounds of the display object. Does not bubble.
onpointerleave	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerleave` event. Fired when a pointer device leaves the bounds of the display object. Does not bubble.
onpointermove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointermove` event. Fired when a pointer device moves while over the display object.
onpointerout	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerout` event. Fired when the pointer moves out of the bounds of the display object.
onpointerover	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerover` event. Fired when the pointer moves over the bounds of the display object.
onpointertap	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointertap` event. Fired when a pointer device completes a tap action (e.g., touch or mouse click).
onpointerup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerup` event. Fired when a pointer device button (mouse, touch, pen, etc.) is released.
onpointerupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `pointerupoutside` event. Fired when a pointer device button is released outside the bounds of the display object that initially registered a pointerdown.
onremoved	`() => void` Called when the instance removed from its parent or stage
onrightclick	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightclick` event. Fired when a right-click (context menu) action is performed on the object.
onrightdown	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightdown` event. Fired when a right mouse button is pressed down over the display object.
onrightup	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightup` event. Fired when a right mouse button is released over the display object.
onrightupoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `rightupoutside` event. Fired when a right mouse button is released outside the bounds of the display object that initially registered a rightdown.
ontap	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `tap` event. Fired when a tap action (touch) is completed on the object.
ontouchcancel	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchcancel` event. Fired when a touch interaction is canceled, such as when the touch is interrupted.
ontouchend	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchend` event. Fired when a touch interaction ends, such as when the finger is lifted from the screen.
ontouchendoutside	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchendoutside` event. Fired when a touch interaction ends outside the bounds of the display object that initially registered a touchstart.
ontouchmove	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchmove` event. Fired when a touch interaction moves while over the display object.
ontouchstart	`nullPIXI.FederatedEventHandler<PIXI.FederatedPointerEvent>` Property-based event handler for the `touchstart` event. Fired when a touch interaction starts, such as when a finger touches the screen.
pivot	`number[number, number]{ x: number; y: number }PIXI.Point` The center of rotation, scaling, and skewing for this display object in its local space. The `position` is the projection of `pivot` in the parent's local space. By default, the pivot is the origin (0, 0).
playing	`boolean` Indicates if the AnimatedSprite is currently playing. This is a read-only property that reflects the current playback state.
position	`number[number, number]{ x: number; y: number }PIXI.Point` The coordinate of the object relative to the local coordinates of the parent.
renderable	`boolean` Controls whether this object can be rendered. If false the object will not be drawn, but the transform will still be updated. This is different from visible, which skips transform updates.
rotation	`number` The rotation of the object in radians. [!NOTE] 'rotation' and 'angle' have the same effect on a display object; rotation is in radians, angle is in degrees.
roundPixels	`boolean` Whether or not to round the x/y position of the sprite.
scale	`number[number, number]{ x: number; y: number }PIXI.Point` The scale factors of this object along the local coordinate axes. The default scale is (1, 1).
skew	`number[number, number]{ x: number; y: number }PIXI.Point` The skew factor for the object in radians. Skewing is a transformation that distorts the object by rotating it differently at each point, creating a non-uniform shape.
sortableChildren	`boolean` If set to true, the container will sort its children by `zIndex` value when the next render is called, or manually if `sortChildren()` is called. This actually changes the order of elements in the array of children, so it will affect the rendering order. [!NOTE] Also be aware of that this may not work nicely with the `addChildAt()` function, as the `zIndex` sorting may cause the child to automatically sorted to another position.
tabIndex	`number` Sets the tabIndex of the shadow div. You can use this to set the order of the elements when using the tab key to navigate.
visible	`boolean` The visibility of the object. If false the object will not be drawn, and the transform will not be updated.
width	`number` The width of the Container, setting this will actually modify the scale to achieve the value set. [!NOTE] Changing the width will adjust the scale.x property of the container while maintaining its aspect ratio. [!NOTE] If you want to set both width and height at the same time, use {@link Container#setSize} as it is more optimized by not recalculating the local bounds twice.
x	`number` The position of the container on the x axis relative to the local coordinates of the parent. An alias to position.x
y	`number` The position of the container on the y axis relative to the local coordinates of the parent. An alias to position.y
zIndex	`number` The zIndex of the container. Controls the rendering order of children within their parent container. A higher value will mean it will be moved towards the front of the rendering order.

Snippets

Name	Type
children	`Snippet<[instance: T]>`

Props

Name	Description
anchor	`PointLike` The anchor sets the origin point of the text.
animationSpeed `1`	`number` The speed that the AnimatedSprite will play at. Higher is faster, lower is slower.
autoUpdate	`boolean` Whether to use PIXI.Ticker.shared to auto update animation time
blendMode `'normal'`	`string` The blend mode to be applied to the sprite. Apply a value of 'normal' to reset the blend mode.
instance	`PIXI.AnimatedSprite` The PIXI.AnimatedSprite instance. Can be set or bound to. WARNING: Type-safety limitation - If you are using a subclass of PIXI.AnimatedSprite, you MUST provide the instance prop with your custom instance. Due to TypeScript's limitations with generic types, if you don't provide an instance, a base PIXI.AnimatedSprite will be created and cast to your type, which will cause runtime errors when trying to access subclass-specific properties or methods. Example: `class MyAnimatedSprite extends PIXI.AnimatedSprite { myMethod() { ... } } const sprite = new MyAnimatedSprite(textures) <!-- Correct: always provide instance for subclasses --> <AnimatedSprite instance={sprite} />`
loop `true`	`boolean` Whether or not the animate sprite repeats after playing.
playing `true`	`boolean` Plays the animation according to the textures
roundPixels	`boolean` If true PixiJS will Math.floor() x/y values when rendering, stopping pixel interpolation. Advantages can include sharper image quality (like text) and faster rendering on canvas. The main disadvantage is movement of objects may appear less smooth.
textures `[]`	`PIXI.Texture<PIXI.Resource>[]PIXI.FrameObject[]` The array of textures to use

Additional props are passed on to Container

Slots

Name	Props	Fallback
default	`{}`

Events

Name	Type	Detail
added	`forwarded`
click	`forwarded`
complete	`dispatched`	`null`
create	`forwarded`
frameChange	`dispatched`	`null`
globalmousemove	`forwarded`
globalpointermove	`forwarded`
globaltouchmove	`forwarded`
loop	`dispatched`	`null`
mousedown	`forwarded`
mousemove	`forwarded`
mouseout	`forwarded`
mouseover	`forwarded`
mouseup	`forwarded`
mouseupoutside	`forwarded`
pointercancel	`forwarded`
pointerdown	`forwarded`
pointermove	`forwarded`
pointerout	`forwarded`
pointerover	`forwarded`
pointertap	`forwarded`
pointerup	`forwarded`
pointerupoutside	`forwarded`
removed	`forwarded`
removedFrom	`forwarded`
rightclick	`forwarded`
rightdown	`forwarded`
rightup	`forwarded`
rightupoutside	`forwarded`
tap	`forwarded`
touchcancel	`forwarded`
touchend	`forwarded`
touchendoutside	`forwarded`
touchmove	`forwarded`
touchstart	`forwarded`