Time leakage bug in anime.js when looping animations
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.
- A-Frame Version: master
- Platform / Device: any
- Reproducible Code Snippet or URL: https://glitch.com/edit/#!/aspiring-honored-dragonfruit
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- 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