When a property animation continues right away, the two keyframes now simply overlap:

  o--o
     o--o   (y-axis offset demonstration)

When they should be controllable thru a single keyframe:

  o--o--o

Status quo

States aren't animating but rather have constant interpolation.

Desired state

Internal _stateFloat to transition from one state to the other using Danimator.morph(…)

• devise keyframes interface for morphed states

Panels aren't scrollable right now

Empty in keyframes panel right now…

• automatic loading of animations via AJAX for engine
• parsing of animations and reattaching of live scene data
• automatic loading of animations via AJAX for editor

Status quo

Scrubbing of time gets performance hits from triggering sound

Desired result

Sounds to be started asynchronously so time scrubbing isn't affected

Status Quo

Although every item gets a separate layer in our layer panel, the separate layers coming from Illustrator are ignored and only the first one is being used.

Desired State

Have Illustrator layers translated into the scene like items are

• check how Paper.js handles layers
• extend item import loop to walk through layers too
• feed layer panel with acquired structure

• export SVG from paperJS and inject data-names
• implement saving on server-side
• add "unsaved" indicator (*) to window title
• set to unsaved everywhere SVG structure might be changed
• add automatic gzip compression

Let's create a few Danimator examples for Github!

MVP

• for animated stroke .growth
• for .attachToPath & .offsetOnPath
• for frame animations
• for state animations & morphs

2.0

• for audio module
• for effectors

When setting the state of an item's descendants, the descendants don't inherit the state.
e.g.:

bear.setState("snout.a");    // will change snout's state to "a" inside bear
bear.find("snout").state     // will return undefined :(

• make an optional audio.js and move everything sound-related there
• add necessary hooks / configs

• layer names
  • frames
  • states
• symbols
• export/import

Only keyframes at current Danimator.timeshould be highlighted

if time > Danimator.maxDuration -> error is thrown
Check with agentBearinger.js example file

•  Save SVG as download
•  Save animation as download
•  Save metadata as download

• save all scene files (SVG, animation, metadata) locally

• save triggers as String references to tracks in ani.json
• make ranges editable (delay, duration, triggerName)
• prevent auto-firing of animations registered as triggers
• split-up Danimator.load() into Danimator.load(/*w/o playing*/), Danimator.loadAndPlay(), and Danimator.trigger()

onStep has quite a few calculations that could be done on .animate instead

Everything is mashed together now. At least one file each for:

DOM events
panel rendering
Danimator overloaders
general states

Snapping steps don't take into account that they need to be removed once keyframes' time has been tempered with.

• move into experiments for now and take out of production code
• add context parameter to Snappables.prototype.add in order to add/remove snapping steps in a grouped fashion
• add removal of steps that are being recalculated (to avoid dups or leftovers)

•  check local var scopes (seems effector instances share a var they shouldn't)

Danimator.editor?

To ensure synchronous playback of video & audio

• calculate current fps using Paper.js' onFrame
• set playback rate of audio on the fly

MVP

• use _createTrack for single elements rather than rerendering the whole panel every time
• same for _createProp …
• …and _createLayer
• move class methods to prototype
• use requestAnimationFrame where too many events would be triggered otherwise
• rewrite sceneElement to class
• move sceneElement methods to prototype
• fix keyframe-dragging bug

Clean

• add react.js
• replace _.template templating by something react-based
• replace all refresh calls (_createTrack, _createProp, …) by reactivity

Make doubleclick of tracks edit ranges (including their naming) instead of complicatedly adding keyframes

• devise interface for range editing
• replace doubleclick handler
• tie animation labels together with tracks (so it can later be saved in .ani.json)

• export JSON from animation tracks for server
• implement saving on server-side
• allow saving of arbitrary scene meta-data
• add "unsaved" indicator (*) to window title
• set to unsaved everywhere SVG structure might be changed
• add automatic gzip compression