metafizzy / metafizzy/zdog

Transitions / animations

Open
#8 5 comments 33 reactions 0 assignees View on GitHub
feature request
Dominant language
JavaScript
Stars
10.7k
Forks
407
PR merge metrics
No merged PRs in 30d

Description

Hello, this is a feature request, and I guess it's not an easy one :)

It would be great to be able to edit, translate, rotate or scale an existing shape dynamically, and interpolate this transformation over a custom amount of time.

Ex:

```
let ell = new Zdog.Ellipse({
addTo: illo,
diameter: 80,
translate: { z: 40 },
stroke: 20,
color: '#636',
});

ell.animate({
diameter: 150,
translate: {z: -40},
transition: "500ms",
});

// Result: the ellipse will change diameter from 80 to 150 and move from 40 to -40 in 500ms.
```

Bonus points if you manage to implement transition-timing-function too (linear, ease-in-and-out, etc)

Thanks, and congrats for this lib!

Contributor guide

Open the contributing guide

Research direction

The issue provides a JavaScript example using Zdog.Ellipse and animate(). Start by locating the existing shape-property and render/update entry points, then trace how animation timing is handled. Done means shape transformations interpolate over a requested duration, with the listed timing functions supported if feasible, and the behavior is covered by tests.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript
Domain
computer-graphics
Issue type
Feature
Difficulty
5/5
Estimated time
Over a week
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.