Status

defect
RESOLVED FIXED
5 years ago
Last year

People

(Reporter: pbro, Unassigned)

Tracking

(Depends on 16 bugs, {meta})

Firefox Tracking Flags

(Not tracked)

Details

Reporter

Description

5 years ago
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

5 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.
See Also: → web-animations

Updated

5 years ago
See Also: → 936503

Comment 2

5 years ago
Bug 936503 is a good place to start.
Assignee: nobody → gabriel.luong
Reporter

Updated

5 years ago
Depends on: web-animations
Summary: CSS Animations Editor → [meta] Web Animations Editor
Reporter

Comment 3

5 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

5 years ago
For information, work has started in the chromedevtools, see this revision: http://src.chromium.org/viewvc/blink?view=revision&revision=183847
Reporter

Updated

5 years ago
Depends on: 1096044
Reporter

Comment 5

5 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)
(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)
(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?
(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?
(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

5 years ago
Depends on: 1105825
Reporter

Updated

5 years ago
Whiteboard: [status:inflight]
Reporter

Comment 10

5 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

Updated

5 years ago
Depends on: 1110739
Depends on: 1112422
Reporter

Updated

5 years ago
Depends on: 1113091
Reporter

Comment 11

5 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
Reporter

Updated

5 years ago
Depends on: 1120339
Reporter

Updated

5 years ago
Depends on: 1120343
Reporter

Updated

5 years ago
No longer depends on: 1120339
Reporter

Updated

5 years ago
Depends on: 1120833
Reporter

Updated

5 years ago
Depends on: 1120900
Reporter

Updated

4 years ago
Depends on: 1132091
Reporter

Updated

4 years ago
Depends on: 1132105
Reporter

Updated

4 years ago
Depends on: 1149990
Reporter

Updated

4 years ago
Depends on: 1149999
Marking this as a feature to help with tracking, QA, and general awareness of active/upcoming work.
Keywords: feature
Reporter

Updated

4 years ago
Depends on: 1151022
Reporter

Updated

4 years ago
Depends on: 1153271
Reporter

Updated

4 years ago
Depends on: 1157368
Assignee: gabriel.luong → nobody
Reporter

Updated

4 years ago
Depends on: 1180134
Reporter

Updated

4 years ago
Depends on: 1198646
Reporter

Updated

4 years ago
Depends on: 1200996
Reporter

Updated

4 years ago
Depends on: 1201278
Reporter

Updated

4 years ago
Depends on: 1201279
Reporter

Updated

4 years ago
Depends on: 1202487
Reporter

Updated

4 years ago
Depends on: 1205704
Reporter

Updated

4 years ago
Depends on: 1206420
Reporter

Updated

4 years ago
Depends on: 1208204
Reporter

Updated

4 years ago
Depends on: 1211810
Reporter

Updated

4 years ago
Depends on: 1211923
Reporter

Updated

4 years ago
Depends on: 1211928
Reporter

Updated

4 years ago
Depends on: 1213599
Reporter

Updated

4 years ago
Depends on: 1170159
Reporter

Updated

4 years ago
Depends on: 1194278
Reporter

Updated

4 years ago
Depends on: 1199589
Reporter

Updated

4 years ago
Depends on: 1205991
Reporter

Updated

4 years ago
Depends on: 1211801
Reporter

Updated

4 years ago
Depends on: 1211886
Reporter

Updated

4 years ago
Depends on: 1214664
Reporter

Updated

4 years ago
Depends on: 1215217
Reporter

Updated

4 years ago
Depends on: 1219608
Reporter

Updated

4 years ago
Depends on: 1219611
Reporter

Updated

4 years ago
Depends on: 1219614
Reporter

Updated

4 years ago
Depends on: 1221074
Reporter

Updated

4 years ago
Depends on: 1228080
Reporter

Updated

4 years ago
Depends on: 1231457
Reporter

Updated

4 years ago
Depends on: 1231688
Reporter

Updated

4 years ago
Depends on: 1231945
Reporter

Updated

4 years ago
Depends on: 1232681
Reporter

Updated

4 years ago
Component: Developer Tools → Developer Tools: Animation Inspector
Reporter

Updated

4 years ago
Depends on: 1233676
Reporter

Comment 13

3 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.
Status: NEW → RESOLVED
Closed: 3 years ago
Keywords: featuremeta
Resolution: --- → FIXED
Whiteboard: [status:inflight]
Reporter

Updated

3 years ago
No longer depends on: 1231457

Updated

Last year
Product: Firefox → DevTools
You need to log in before you can comment on or make changes to this bug.