# Animations and transitions (/start/canvas-animations-effects)



Animations are a key part of any video game, helping to create a more engaging and immersive experience. In Pixi’VN, animations are managed using tickers and the `animate` function.

The <DynamicLink href="/start/canvas-motion">`animate`</DynamicLink> function is a wrapper around the [`motion`](https://motion.dev/) library, providing a simple yet powerful way to animate canvas components. You can define animations with properties such as duration, `easing`, and more.

Pixi’VN also provides several functions to perform <DynamicLink href="/start/canvas-transition">transitions</DynamicLink> between `steps`. All transitions are built on top of the `animate` function, making it easy to create custom transitions as well.

All animations in Pixi’VN are triggered by <DynamicLink href="/start/canvas-tickers">tickers</DynamicLink>, which are classes that run on every frame and execute functions leveraging PixiJS.

<Cards>
  <DynamicLink className="no-underline @max-lg:col-span-full" href="/start/canvas-motion">
    <Card title="Animate">
      Animate Pixi’VN canvas components with the `animate` function, including movement, rotation, fading, zooming, and mirroring.
    </Card>
  </DynamicLink>

  <DynamicLink className="no-underline @max-lg:col-span-full" href="/start/canvas-transition">
    <Card title="Transitions">
      Built-in transition effects for showing and removing canvas components, and how to create your own.
    </Card>
  </DynamicLink>

  <DynamicLink className="no-underline @max-lg:col-span-full" href="/start/canvas-tickers">
    <Card title="Ticker">
      Use tickers directly when you need very complex or elaborate animations that go beyond what the `animate` function alone can express.
    </Card>
  </DynamicLink>
</Cards>