Post-animation meeting in Mozlondon master list of improvements we’d like to make to the animation tools currently in Firefox. Actionable Next-Steps - It would be nice to have gif groups on animations, similar to Chrome. There seems to be some difficult implementation details to this (see this screenshot, where the gif captured is actually capturing the entire page of Codepen, not the animation in the iframe: http://cl.ly/3l2O0R0H3X2X) but as an implementation for discovering parts of the animation in a way that is not text-based it’s pretty great. - We would like to be about to zoom in and out the time scale. After Effects does this with a little mountain icon: http://cl.ly/1Q2o1h0l0M0Q in which moving the slider affects how zoomed in the timeline is: http://cl.ly/2R1b0F1l2f34 vs. http://cl.ly/021B3O3N1v1V I imagine we’ll be copying this UX pattern. - daisuke and bbirtles have really nice graphs that show distance that would be excellent to get into the timeline. Could either of you attach a photo of that to the bug? It was a cool way to represent properties changing and I imagine there will be questions about implementation. Actionable Next-Steps That Have No Clear UI Implementation - We would like to easily open the animation panel to 100% width. More complex animations often need a lot of horizontal space, so creating a way to expand to 100% width, a way to get out, and then remembering that as a preference seems like a good idea. - We need to discuss how we’ll export changes you’ve created. I know that gl has been thinking about this for the Style Editor as well, but we definitely need a clear way to export a diff or changes authored in the tool if we want people to be able to fiddle with their animations in this tool in a serious way. - We’d like to have the cubic-bézier editor in the animation panel on keyframes. Currently this is a popup. We might want this to be inline like the editors? I’m not certain. In any case, having this in the animation panel would be good. - We’d like to edit keyframes. After Effects does this in a way that I found difficult to use when I was a beginner: http://cl.ly/1S032l1z320d I think it would be worth thinking through why they chose this implementation instead of editing the keyframe values where the keyframes are on the timeline, and then figuring out if those particular use cases affect us. - We’d like to add and remove properties. So we’ll need an “adding” area where that seems to make sense. Javascript - We touched briefly on how this panel acts if someone’s creating animations with Javascript. We might need to make some difficult decisions about what this panel can and can’t do as its features grow. Future Ideas, Not Actionable/Captured in this meta bug - We might consider suggesting other easing functions/delays to the user. There were some great suggestions last week about this, namely daisuke’s six-panel UI that showed different alternatives on an animation. There was also discussion around offering physics-engine-type animation eases. We could also talk to Daniel Eden about animate.css, which might be cool to have natively in devtools. Sorry for the wall of text, but there were so many discussions around animation tooling I thought it would be helpful to have a central place to capture them.

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #0) > - daisuke and bbirtles have really nice graphs that show distance that would > be excellent to get into the timeline. Could either of you attach a photo of > that to the bug? It was a cool way to represent properties changing and I > imagine there will be questions about implementation. We actually have a prototype of this here: http://codepen.io/birtles/pen/OXVebR It's live so you can edit the animation parameters to see how the graph looks and check the algorithm used for calculating the distance. (Note that we have platform support for calculating distances between animation values via nsIDOMWindowUtils::computeAnimationDistance which will available to unprivileged code once bug 1244590 lands.) We'll be very glad to help out in any way we can (for example, by making a prototype integration of this into existing DevTools if that's helpful).

(In reply to Helen V. Holmes (:helenvholmes) (:✨)(pls ni?) from comment #0) > - It would be nice to have gif groups on animations, similar to Chrome. > There seems to be some difficult implementation details to this (see this > screenshot, where the gif captured is actually capturing the entire page of > Codepen, not the animation in the iframe: http://cl.ly/3l2O0R0H3X2X) but as > an implementation for discovering parts of the animation in a way that is > not text-based it’s pretty great. Part of this is bug 1210363. > - We would like to be about to zoom in and out the time scale. After Effects > does this with a little mountain icon: http://cl.ly/1Q2o1h0l0M0Q in which > moving the slider affects how zoomed in the timeline is: > http://cl.ly/2R1b0F1l2f34 vs. http://cl.ly/021B3O3N1v1V I imagine we’ll be > copying this UX pattern. Bug 1221546. > Actionable Next-Steps That Have No Clear UI Implementation > - We would like to easily open the animation panel to 100% width. More > complex animations often need a lot of horizontal space, so creating a way > to expand to 100% width, a way to get out, and then remembering that as a > preference seems like a good idea. Bug 1246195, which you already added in the list of dependencies. > - We need to discuss how we’ll export changes you’ve created. I know that gl > has been thinking about this for the Style Editor as well, but we definitely > need a clear way to export a diff or changes authored in the tool if we want > people to be able to fiddle with their animations in this tool in a serious > way. Exporting should work for all CSS changes done in the inspector, not just for the ones done in the animation tool. So, I don't think this should be in this meta bug. I think this is captured by bug 794237. However, exporting script-based animations is definitely specific to the animation tool. > - We’d like to have the cubic-bézier editor in the animation panel on > keyframes. Currently this is a popup. We might want this to be inline like > the editors? I’m not certain. In any case, having this in the animation > panel would be good. Definitely, and both for each keyframe as well as for the animation itself. That's bug 1210796 and bug 1210795. > - We’d like to edit keyframes. After Effects does this in a way that I found > difficult to use when I was a beginner: http://cl.ly/1S032l1z320d I think it > would be worth thinking through why they chose this implementation instead > of editing the keyframe values where the keyframes are on the timeline, and > then figuring out if those particular use cases affect us. > - We’d like to add and remove properties. So we’ll need an “adding” area > where that seems to make sense. Bug 1211928 is about adding/removing/moving keyframes. And bug 1211923 is about editing an animated property's value at a specific keyframe offset. I think we're also missing bugs for editing duration, iteration count and delays which we discussed in MozLondon too. Here's the bug for editing the delay: bug 1215217, for the duration: bug 1282428, and for the iteration count: bug 1282429.

Helen: why is bug 1106114 part of this bug? Having better rule-view <-> animation-panel links would be great for sure (and by the way, this would also be needed: bug 1198646), but should that be done in this meta bug? I don't specifically remember discussing this in MozLondon.

(In reply to Patrick Brosset <:pbro> from comment #3) > Helen: why is bug 1106114 part of this bug? Having better rule-view <-> > animation-panel links would be great for sure (and by the way, this would > also be needed: bug 1198646), but should that be done in this meta bug? I > don't specifically remember discussing this in MozLondon. I think bug 1106114 can be removed—I'm not sure why I added it originally looking at it now.

Inspector bug triage (filter on CLIMBING SHOES).