# Articulated animations (/start/canvas-articulated-animations-effects)





Articulated animations are functions that use the <DynamicLink href="/start/canvas-alias">`canvas.animate`</DynamicLink> function to create animations that can be applied to canvas components. These functions are typically used to create effects like shaking, bouncing, or other complex animations that involve multiple steps or components.

Shake [#shake]

The `shakeEffect` function is an articulated animation that shakes a component.
This function has the following parameters:

* `alias`: The <DynamicLink href="/start/canvas-alias">alias</DynamicLink> to identify the component.
* `options` (Optional): Animation options, matching the <DynamicLink href="/start/canvas-motion">`options` of animate function</DynamicLink>. Additional properties:
  * `shocksNumber` (Optional): The number of shocks.
  * `shakeType` (Optional): The type of shake effect. Possible values are `vertical` and `horizontal`.
  * `maxShockSize` (Optional): The maximum size of the shock.
* `priority` (Optional): The priority of the PixiJS ticker. This parameter sets the ticker's priority. The default is `UPDATE_PRIORITY.NORMAL`.

<CodeBlockTabs defaultValue="content/labels/start.label.ts">
  <CodeBlockTabsList>
    <CodeBlockTabsTrigger value="content/labels/start.label.ts">
      content/labels/start.label.ts
    </CodeBlockTabsTrigger>

    <CodeBlockTabsTrigger value="assets/manifest.ts">
      assets/manifest.ts
    </CodeBlockTabsTrigger>
  </CodeBlockTabsList>

  <CodeBlockTab value="content/labels/start.label.ts">
    ```ts
    import {
        CANVAS_APP_GAME_LAYER_ALIAS,
        newLabel,
        shakeEffect,
        showImage,
    } from "@drincs/pixi-vn";

    export const startLabel = newLabel("start", [
        async () => {
            await showImage("bg", "bg", { scale: 1.3 });
            await showImage("alien", "alien", { align: 0.5 });
            shakeEffect("alien"); // [!code focus]
        },
        async () => {
            shakeEffect(CANVAS_APP_GAME_LAYER_ALIAS); // [!code focus]
        },
    ]);
    ```
  </CodeBlockTab>

  <CodeBlockTab value="assets/manifest.ts">
    ```ts
    import { AssetsManifest } from "@drincs/pixi-vn";

    /**
     * Manifest for the assets used in the game.
     * You can read more about the manifest here: https://pixijs.com/8.x/guides/components/assets#loading-multiple-assets
     */
    const manifest: AssetsManifest = {
        bundles: [
            {
                name: "start",
                assets: [
                    {
                        alias: "alien",
                        src: "https://pixijs.com/assets/eggHead.png",
                    },
                    {
                        alias: "bg",
                        src: "https://pixijs.com/assets/bg_grass.jpg",
                    },
                ],
            },
        ],
    };
    export default manifest;
    ```
  </CodeBlockTab>
</CodeBlockTabs>

<ShakeExample />