aframevr / aframevr/aframe

Time leakage bug in anime.js when looping animations

Open
#5,361 6 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Dominant language
JavaScript
Stars
17.6k
Forks
4.4k
PR merge metrics
No merged PRs in 30d

Description

Description:
Every time an animation loops the excess time is ignored. This leads to "time leakage" which can accumulate over time or cause issues when high delta times occur for a given tick. This can easily be triggered by giving focus to another tab, which causes browsers to reduce or halt the rAF until the user clicks back again.

Real-world case where this bug causes multiple entities with the same looping animations randomly offset from each other to end up synchronized. https://github.com/3DStreet/3dstreet/issues/364

This is a known bug in anime.js (https://github.com/juliangarnier/anime/issues/561) and is also present in A-Frame's fork. Filing this bug here instead for easier discovery in case other people face this issue.

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

No source file or test is named. Start by tracing the animation loop and tick timing in A-Frame's animation implementation, then run the linked Glitch reproduction and inspect the anime.js issue for context. Done means looped animations retain excess elapsed time after large frame gaps instead of drifting or synchronizing unexpectedly.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
performance
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
48/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.