probablycorey/tiny-sprite
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: scale background-position in keyframes

Browse Source 
The animation was broken because keyframes used unscaled
pixel values while the background-size was scaled.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
Corey Johnson 2026-01-06 13:41:29 -08:00
parent b1a87662fb
commit 52e6adc995
1 changed files with 3 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
src/dev/app.tsx
View File

@ -41,14 +41,14 @@ const App = () => {
for (let i = 0; i < frames; i++) { for (let i = 0; i < frames; i++) {
const col = i % columns! const col = i % columns!
const row = Math.floor(i / columns!) const row = Math.floor(i / columns!)
const x = -col * width const x = -col * width * scale
const y = -row * height const y = -row * height * scale
const percent = (i / frames) * 100 const percent = (i / frames) * 100
steps.push(`${percent}%{background-position:${x}px ${y}px}`) steps.push(`${percent}%{background-position:${x}px ${y}px}`)
} }
keyframes = `@keyframes ${keyframeId}{${steps.join("")}}` keyframes = `@keyframes ${keyframeId}{${steps.join("")}}`
} else { } else {
keyframes = `@keyframes ${keyframeId}{from{background-position:0 0}to{background-position:-${sheetWidth}px 0}}` keyframes = `@keyframes ${keyframeId}{from{background-position:0 0}to{background-position:-${sheetWidth * scale}px 0}}`
} }
const previewStyle = { const previewStyle = {