My idea is:

CSS Animation Editor

CSS frame-by-frame animation editor. I believe someone on devtools started this project (might have been Paul Rouget?) and I would love to see it resurrected.

173 votes
Vote
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)
    You have left! (?) (thinking…)
    afabbroafabbro shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    7 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Camden NarztCamden Narzt commented  ·   ·  Flag as inappropriate

        Once this is underway, it would be great if one could stop the interval that is firing off the animations from within the tool, as it's often a framework that calls setInterval so I don't have the interval id to clear the interval.

      • Mircea PiturcaMircea Piturca commented  ·   ·  Flag as inappropriate

        Having CSS/SMIL/Element.animate under one umbrella would be amazingly useful for developers. As Patrick mentioned lots of features could be added from simple timeline inspection to a full fledged animation/interaction editor.

        As a developer I would be thrilled to have access to low lever Editor APIs from XPCOM or from a panel in DevTools. Please consider in making this extensible.

      • Patrick BrossetPatrick Brosset commented  ·   ·  Flag as inappropriate

        Great idea!
        I've started working on a backend for exposing the web animation API (that bug Paul mentioned) to the devtools. You can follow along at https://bugzilla.mozilla.org/show_bug.cgi?id=1096044.

        In terms of UI, I think one of the first steps we could take is show a mini timeline of running animations for the currently selected node in the inspector. This could be either a new sidebar or inside the "styles" tab, next to the "keyframes" section we already have for css animations.
        This timeline would allow for basic play/pause/seek functionality.

        I'd also love to see a more complete, more creative, tool in its own tab in the toolbox. Something that would sort of look like Flash or similar tools.
        There are so many features we could built in a tool like this.

      • Cédric NéhémieCédric Néhémie commented  ·   ·  Flag as inappropriate

        It surely would be great, I seriously miss the curves editor of 3dsmax back in my 3d days, would love to see that kind of things now that css animations are widely spread.
        Having a way to edit all the animated properties separately just by moving points of a curve will really allow for amazing animations to be created.

      Feedback and Knowledge Base