Skip to content

Plane flickers on opposite endpoint when using positionOnLine with yoyo animation in MapLineSeries #2037

@DanielPeraltaH

Description

@DanielPeraltaH

Bug description

Summary

When animating a plane (or any MapPointSeries bullet) along a line using positionOnLine with loops: Infinity and am5.ease.yoyo, a visual flicker occurs at the opposite endpoint whenever the plane reaches one end of the path.

This issue is reproducible even using the official amCharts example.

Expected behavior

The plane should smoothly travel back and forth along the line without any visual artifacts or jumps.

Actual behavior

When the plane reaches one endpoint (e.g. destination A), a very brief flicker appears at the opposite endpoint (origin B). This happens for a single frame but is noticeable.

It looks like the plane is momentarily rendered at the initial positionOnLine value before reversing direction.

Reproduction

This issue can be observed directly in the official amCharts demo:

👉 https://www.amcharts.com/demos/animations-along-lines/

Steps:

Open the demo
Observe the animated plane moving along the route
When the plane reaches either end of the path, a brief flicker appears at the opposite endpoint

Technical context

The issue occurs when using the following pattern:


planeItem.animate({
  key: "positionOnLine",
  to: 1,
  duration: ...,
  loops: Infinity,
  easing: am5.ease.yoyo(am5.ease.linear)
});

Combined with:
positionOnLine: 0

It appears that during the yoyo loop transition, the animation briefly resets to the initial value (0) before reversing, causing the flicker at the opposite end of the line.

Additional notes

The issue persists even when following the official example implementation.
It is not related to custom rotation logic (it also happens with autoRotate: true).
It becomes more noticeable with multiple animated routes.
Avoiding exact endpoints (e.g. using 0.01 → 0.99) reduces but does not fully eliminate the issue.
Possible cause (hypothesis)

The flicker may be caused by a single-frame re-evaluation of the animated property (positionOnLine) back to its initial state when the loop restarts or reverses direction.

Workarounds tried

Manual forward/backward animation instead of yoyo → removes flicker but complicates implementation
Avoiding exact endpoints (0 / 1) → reduces but does not eliminate the issue
Removing custom rotation logic → no effect

Environment (if applicable)

amCharts 5
MapChart + MapLineSeries + MapPointSeries
Browser: (tested in Chrome, can be reproduced consistently)

Additional context

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions