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
Description
BarBounceandBarLeapcustom animation classes crash withTypeError: Cannot read properties of null (reading 'y1')when thefromparameter isnullor its properties areundefined.Reproduction
Using VStory CDN (
@visactor/vstory) to create a bar chart with barBounce effect:Error
Root Cause
In
packages/vstory-animate/src/customAnimates/bar-bounce.ts, line 28-31:The type signature allows all properties to be optional, but the constructor body accesses them without null-safety. When VStory's animation system passes
nullasfrom(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:
Environment
@visactor/vstory)