Skip to content

Bug: BarBounce/BarLeap animation crashes when from parameter is null #293

@xile611

Description

@xile611

Description

BarBounce and BarLeap custom animation classes crash with TypeError: Cannot read properties of null (reading 'y1') when the from parameter is null or its properties are undefined.

Reproduction

Using VStory CDN (@visactor/vstory) to create a bar chart with barBounce effect:

<script src="https://unpkg.com/@visactor/vstory/dist/index.min.js"></script>
<script>
VStory.registerAll();
const dsl = {
  characters: [{
    type: "VChart",
    id: "bar1",
    zIndex: 1,
    position: { top: 50, left: 50, width: 500, height: 400 },
    options: {
      spec: {
        type: "bar",
        data: [{ values: [
          { x: "Q1", y: 120 },
          { x: "Q2", y: 180 }
        ]}],
        xField: "x",
        yField: "y"
      }
    }
  }],
  acts: [{
    id: "act1",
    scenes: [{
      id: "scene1",
      actions: [{
        characterId: "bar1",
        characterActions: [{
          action: "appear",
          payload: {
            animation: {
              duration: 1000,
              effect: "barBounce",    // ← triggers crash
              oneByOne: true
            }
          }
        }]
      }]
    }]
  }]
};
const story = new VStory.Story(dsl, { dom: "container" });
const player = new VStory.Player(story);
story.addAct(dsl.acts[0], dsl.characters, { character: {} });
player.play(0);
</script>

Error

Uncaught TypeError: Cannot read properties of null (reading 'y1')
    at new BarBounce (bar-bounce.ts:28)

Root Cause

In packages/vstory-animate/src/customAnimates/bar-bounce.ts, line 28-31:

constructor(
  from: { y?: number; y1?: number; x?: number; x1?: number },
  to: ...,
  ...
) {
  const f = {
    y: from.y1,    // ← crashes when from is null
    y1: from.y1,
    x: from.x1,
    x1: from.x1
  };
  super(f, { y: from.y, y1: from.y1, x: from.x, x1: from.x1 }, ...);
}

The type signature allows all properties to be optional, but the constructor body accesses them without null-safety. When VStory's animation system passes null as from (which happens when bar elements haven't been positioned yet), the constructor crashes.

BarLeap (bar-leap.ts) has a similar issue at line 90: this.to.x1! uses non-null assertion on an optional property.

Suggested Fix

Add null/undefined guards:

const f = {
  y: from?.y1 ?? 0,
  y1: from?.y1 ?? 0,
  x: from?.x1 ?? 0,
  x1: from?.x1 ?? 0
};

Environment

  • VStory version: latest CDN (@visactor/vstory)
  • Tested via unpkg CDN
  • Browser: Chrome 131
  • OS: macOS

Metadata

Metadata

Assignees

No one assigned

    Labels

    bugSomething isn't working

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions