motiondivision / motiondivision/motion

[BUG] NaN in point animation when using spring animations

Open
#2,791 1 comment 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

bug
Dominant language
TypeScript
Stars
33.7k
Forks
1.4k
Avg merge
1d 10h
Merged PRs (30d)
14

Description

Describe the bug

When animating a <polygon> point list with a "spring" animation, at various points in the animation, the computed pointlist contains NaNs and throws console errors.

image

CodeSandbox reproduction of the bug

https://codesandbox.io/p/sandbox/pensive-khayyam-5mwd29?file=%2Fsrc%2FApp.js%3A9%2C68&workspaceId=5c31fde4-86cd-4353-99cd-cbe570ccc4aa

Steps to reproduce

  1. Define an SVG with a polygon element.
  2. Animate the points of the element, and use a spring animation.
  3. Observe that you get a bunch of complaints about NaNs in your error console.

When the animation type is not "spring", the NaN errors are not thrown (though one "expected number, 'undefined'" message is thrown per polygon element).

Expected behavior

When an SVGPointList would produce NaNs, it should not incorrectly attempt to set the pointlist with NaNs on the element.

Environment details

Reproduced in Brave v 1.69.153 (Mozilla/5.0 (X11; Linux x86_64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/128.0.0.0 Safari/537.36)

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

Start with the linked CodeSandbox reproduction and trace the SVG polygon point-list animation path, especially the spring-animation handling. The fix is complete when spring animation no longer attempts to set polygon points containing NaN values and the related console errors no longer occur.

Written by the indexing model from the issue text.

Assessment

Tech stack
react, typescript
Domain
frontend, web-dev
Issue type
Bug
Difficulty
3/5
Estimated time
1-2 days
Activity status
Quiet
Clarity
Mostly clear
Newbie friendliness
55/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.