[meta] Web Animations Editor

RESOLVED FIXED

Status

RESOLVED FIXED
5 years ago
10 months ago

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: → bug 875219

Updated

5 years ago
See Also: → bug 936503

Comment 2

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

Updated

4 years ago
Depends on: 875219
Summary: CSS Animations Editor → [meta] Web Animations Editor
(Reporter)

Comment 3

4 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

4 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

4 years ago
Depends on: 1096044
(Reporter)

Comment 5

4 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

4 years ago
Depends on: 1105825
(Reporter)

Updated

4 years ago
Whiteboard: [status:inflight]
(Reporter)

Comment 10

4 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

4 years ago
Depends on: 1110739
Depends on: 1112422
(Reporter)

Updated

4 years ago
Depends on: 1113091
(Reporter)

Comment 11

4 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

4 years ago
Depends on: 1120339
(Reporter)

Updated

4 years ago
Depends on: 1120343
(Reporter)

Updated

4 years ago
No longer depends on: 1120339
(Reporter)

Updated

4 years ago
Depends on: 1120833
(Reporter)

Updated

4 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

3 years ago
Depends on: 1219608
(Reporter)

Updated

3 years ago
Depends on: 1219611
(Reporter)

Updated

3 years ago
Depends on: 1219614
(Reporter)

Updated

3 years ago
Depends on: 1221074
(Reporter)

Updated

3 years ago
Depends on: 1228080
(Reporter)

Updated

3 years ago
Depends on: 1231457
(Reporter)

Updated

3 years ago
Depends on: 1231688
(Reporter)

Updated

3 years ago
Depends on: 1231945
(Reporter)

Updated

3 years ago
Depends on: 1232681
(Reporter)

Updated

3 years ago
Component: Developer Tools → Developer Tools: Animation Inspector
(Reporter)

Updated

3 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
Last Resolved: 3 years ago
Keywords: feature → meta
Resolution: --- → FIXED
Whiteboard: [status:inflight]
(Reporter)

Updated

3 years ago
No longer depends on: 1231457

Updated

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