Closed
Bug 985861
Opened 10 years ago
Closed 8 years ago
[meta] Web Animations Editor
Categories
(DevTools :: Inspector: Animations, defect)
DevTools
Inspector: Animations
Tracking
(Not tracked)
RESOLVED
FIXED
People
(Reporter: pbro, Unassigned)
References
(Depends on 14 open bugs)
Details
(Keywords: meta)
The DevTools could use a CSS animations editor panel. Such a panel should have the following features: - Select an animation from the list of existing animations on the site, or alternatively, create a new one - Display a timeline of the animation, showing the total time, the keyframes, and having play/pause buttons - Ability to add/remove/edit keyframes - Editing keyframes should be a little bit like the rule-view: possibility to add/remove/edit properties - Ability to set the animation's length and repeat mode - ... Here are 2 online examples: http://jeremyckahn.github.io/stylie/ http://cssanimate.com/
Reporter | ||
Comment 1•10 years ago
|
||
The WebAnimations API is soon coming to Mozilla. See tracking bug 875219 and this wiki page: https://wiki.mozilla.org/Platform/Layout/Web_Animations Although this API will help a lot, I don't think it needs to be put as a blocker for this bug.
Updated•10 years ago
|
See Also: → web-animations
Comment 2•10 years ago
|
||
Bug 936503 is a good place to start.
Updated•10 years ago
|
Assignee: nobody → gabriel.luong
Reporter | ||
Updated•10 years ago
|
Depends on: web-animations
Summary: CSS Animations Editor → [meta] Web Animations Editor
Reporter | ||
Comment 3•10 years ago
|
||
I believe bug 875219 (web animations) has progressed sufficiently that it makes sense to get something started in the devtools. I'll upload a patch shortly that contains a new set of actors that give access to animation players. (In reply to Tim Nguyen [:ntim] from comment #2) > Bug 936503 is a good place to start. Not anymore, the web animations API will provide us with a much more robust foundation to build an animation editor/inspector tool.
Reporter | ||
Comment 4•10 years ago
|
||
For information, work has started in the chromedevtools, see this revision: http://src.chromium.org/viewvc/blink?view=revision&revision=183847
Reporter | ||
Comment 5•10 years ago
|
||
(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #4) > For information, work has started in the chromedevtools, see this revision: > http://src.chromium.org/viewvc/blink?view=revision&revision=183847 Right now, I think the front-end in the chromedevtools is a new sidebar in the inspector that lets users play/pause animations for the currently selected node. Gabriel: we talked at some stage about a more complete experience with a dedicated panel to inspect/edit animations. Do you think an inspector sidebar also makes sense? Should we have both? Also, you worked on adding css animation keyframes in the rule-view, maybe there's something we could do in this panel too. Basically, I'd just like your view on this, so we can start filing more specific front-end bugs.
Flags: needinfo?(gabriel.luong)
Comment 6•10 years ago
|
||
(In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #5) > (In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #4) > > For information, work has started in the chromedevtools, see this revision: > > http://src.chromium.org/viewvc/blink?view=revision&revision=183847 > Right now, I think the front-end in the chromedevtools is a new sidebar in > the inspector that lets users play/pause animations for the currently > selected node. > Gabriel: we talked at some stage about a more complete experience with a > dedicated panel to inspect/edit animations. Do you think an inspector > sidebar also makes sense? Should we have both? Also, you worked on adding > css animation keyframes in the rule-view, maybe there's something we could > do in this panel too. > Basically, I'd just like your view on this, so we can start filing more > specific front-end bugs. I definitely think having a dedicated panel and adding to the inspector sidebar would be ideal. The goal of the dedicated panel was to provide a timeline and allow users to inspect/edit animations. I discussed with birtles the possibility of having the ability to play/pause animations from the keyframe inspector. I don't know whether or not we should add a new animation tab here. This seemed like a good starting point for getting early initial feedback. Also, adding the ability to play/pause in the keyframe inspector makes sense considering how the inspector is used, and it would not require users switching between the dedicated panel and inspector unless they wanted a bigger picture of the animation timeline. I am curious if animation playback control has landed. It would be something I would like to implement on the keyframe inspector side. In addition, I do have some early template code for a blank animation panel that I can upload once I rebase them.
Flags: needinfo?(gabriel.luong) → needinfo?(birtles)
Comment 7•10 years ago
|
||
(In reply to Gabriel Luong (:gl) from comment #6) > (In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #5) > > (In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #4) > > > For information, work has started in the chromedevtools, see this revision: > > > http://src.chromium.org/viewvc/blink?view=revision&revision=183847 > > Right now, I think the front-end in the chromedevtools is a new sidebar in > > the inspector that lets users play/pause animations for the currently > > selected node. > > Gabriel: we talked at some stage about a more complete experience with a > > dedicated panel to inspect/edit animations. Do you think an inspector > > sidebar also makes sense? Should we have both? Also, you worked on adding > > css animation keyframes in the rule-view, maybe there's something we could > > do in this panel too. > > Basically, I'd just like your view on this, so we can start filing more > > specific front-end bugs. > > I definitely think having a dedicated panel and adding to the inspector > sidebar would be ideal. The goal of the dedicated panel was to provide a > timeline and allow users to inspect/edit animations. I discussed with > birtles the possibility of having the ability to play/pause animations from > the keyframe inspector. I don't know whether or not we should add a new > animation tab here. This seemed like a good starting point for getting early > initial feedback. Also, adding the ability to play/pause in the keyframe > inspector makes sense considering how the inspector is used, and it would > not require users switching between the dedicated panel and inspector unless > they wanted a bigger picture of the animation timeline. > It seems like any basic animation inspection functionality should live somewhere in the inspector panel (either in a new sidebar panel or integrated within the rule view). Anything that's added in a separate panel will be used by less people and will probably not fit within the normal inspection workflow (but it sounds very cool as a creative tool). So for things that would be possible and make sense to stay in the inspector / rule view I think they should. Gabriel, when you say 'keyframe inspector' here, I assume you talking about a new sidebar panel in the inspector tab. Is there any possible way that it could live inside the rule view itself instead of a new sidebar panel?
Comment 8•10 years ago
|
||
(In reply to Brian Grinstead [:bgrins] from comment #7) > (In reply to Gabriel Luong (:gl) from comment #6) > > (In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #5) > > > (In reply to Patrick Brosset [:pbrosset] [:patrick] from comment #4) > > > > For information, work has started in the chromedevtools, see this revision: > > > > http://src.chromium.org/viewvc/blink?view=revision&revision=183847 > > > Right now, I think the front-end in the chromedevtools is a new sidebar in > > > the inspector that lets users play/pause animations for the currently > > > selected node. > > > Gabriel: we talked at some stage about a more complete experience with a > > > dedicated panel to inspect/edit animations. Do you think an inspector > > > sidebar also makes sense? Should we have both? Also, you worked on adding > > > css animation keyframes in the rule-view, maybe there's something we could > > > do in this panel too. > > > Basically, I'd just like your view on this, so we can start filing more > > > specific front-end bugs. > > > > I definitely think having a dedicated panel and adding to the inspector > > sidebar would be ideal. The goal of the dedicated panel was to provide a > > timeline and allow users to inspect/edit animations. I discussed with > > birtles the possibility of having the ability to play/pause animations from > > the keyframe inspector. I don't know whether or not we should add a new > > animation tab here. This seemed like a good starting point for getting early > > initial feedback. Also, adding the ability to play/pause in the keyframe > > inspector makes sense considering how the inspector is used, and it would > > not require users switching between the dedicated panel and inspector unless > > they wanted a bigger picture of the animation timeline. > > > > It seems like any basic animation inspection functionality should live > somewhere in the inspector panel (either in a new sidebar panel or > integrated within the rule view). Anything that's added in a separate panel > will be used by less people and will probably not fit within the normal > inspection workflow (but it sounds very cool as a creative tool). So for > things that would be possible and make sense to stay in the inspector / rule > view I think they should. > > Gabriel, when you say 'keyframe inspector' here, I assume you talking about > a new sidebar panel in the inspector tab. Is there any possible way that it > could live inside the rule view itself instead of a new sidebar panel? When I say 'keyframe inspector', I was referring to the rule view. I definitely agree basic animation inspection functionality should be available in the inspector. When I was referring to the animation tab, that would be a new animation tab within the inspector. I don't know whether or not we should create a new animation tab. The goal of a new animation tab in the inspector would be for easier accessibility to the keyframes rules, which are currently listed last. Maybe this should be changed?
Comment 9•10 years ago
|
||
(In reply to Gabriel Luong (:gl) from comment #6) > I am curious if animation playback control has landed. It would be something > I would like to implement on the keyframe inspector side. Yes, play() and pause() now work. They may be a little buggy/inefficient until bug 1073336 lands (just waiting on hopefully the final round of review). Also, you'll see little jumps when pause compositor animations (since the compositor gets ahead of the main thread). We'll fix that too after bug 927349. Also, play() won't rewind the animation until we do bug 1074630. But, apart from that, they work ;)
Flags: needinfo?(birtles)
Reporter | ||
Updated•9 years ago
|
Whiteboard: [status:inflight]
Reporter | ||
Comment 10•9 years ago
|
||
For information, here are some notes I took after talking with Rachel Nabors and Brian Birtles last week in Portland: https://etherpad.mozilla.org/web-animation-portland-meeting These should hopefully help drive a little bit the direction in which we want to aim the animation-related tools.
Reporter | ||
Comment 11•9 years ago
|
||
Bug 1105825 is ongoing, some of the required ground work has landed. Some pieces of the Web Animations API allowing it to work too (although that's still pref'd off). So, in Jan/Feb, we should have a first, simple, animation inspector panel in the inspector sidebar. Some of the next steps for the animation inspector panel could be: - Allow users to set the current time by dragging/clicking in the timeline. - Keep listing animation players even after the animation has ended. - Make new animations appear in the sidebar automatically when they get created. - Allow users to switch an animation to loop mode so it just loops forever. - Add rewind/fast-forward buttons. - Add a global play/pause button to play/pause all animations at once. - List the keyframes, when available, with the list of animated properties (and computed values as they change?) - Use the timing function cubic-bezier widget to control the animation timing function, or keyframes timing functions. - Also support SVG SMIL animations. Of course, this is *just* for the animation inspector panel, but this bug is about an animation editor, and after having discussions and reading on the subject lately, I know the tool we create in the end will be way more complex in terms of features it supports and will be quite different in the way people use it. Here are some resources on the subject that should help: - ToonBoom Animate Studio: https://www.youtube.com/watch?v=3JJtmyOEvvU - maya animation autodesk - animatron - after effect - adobe edge animate - adobe Flash - Spine 2D animation: http://esotericsoftware.com/spine-videos - Unity 3D: http://unity3d.com/learn/tutorials/modules/beginner/animation - http://daneden.github.io/animate.css/ - http://julian.com/research/velocity/ - GSAP - Timeliner browser tool: https://github.com/zz85/timeliner (ghost mode demo: http://zz85.github.io/timeliner/test_ghosts.html) - Article about animations tooling: http://mattdesl.svbtle.com/motion-graphics
Comment 12•9 years ago
|
||
Marking this as a feature to help with tracking, QA, and general awareness of active/upcoming work.
Keywords: feature
Updated•9 years ago
|
Assignee: gabriel.luong → nobody
Reporter | ||
Updated•8 years ago
|
Component: Developer Tools → Developer Tools: Animation Inspector
Reporter | ||
Comment 13•8 years ago
|
||
No use keeping this old meta bug around. It was mostly used when we bootstraped the animation tool, and now that it has its own bugzilla component, it's not as useful anymore.
Updated•6 years ago
|
Product: Firefox → DevTools
You need to log in
before you can comment on or make changes to this bug.
Description
•