[CLOSED] Animate Panels when they are Shown/Hidden

[core-ai-bot]

Issue by ryanstewart Thursday Dec 06, 2012 at 18:53 GMT Originally opened as https://github.com/adobe/brackets/issues/2292

---

Any panel that is shown or hidden should be animated to slide in/out. This would include the sidebar, JSLint panel, etc.

[core-ai-bot]

Comment by redmunds Thursday Dec 06, 2012 at 19:06 GMT

---

I 100% agree, but I think this task is too big for a bug fix, and should be moved to the Backlog.

I tried doing this recently for the bottom panel of my Quick Markup extension, but couldn't get it to work (in a couple hours). We can't simply add css transitions because we hide/show panels with jQuery. I couldn't get the $.animate() API to work. Problem is that to slide open a bottom panel, you need to transition several things at once: panel height, panel content height (panel has fixed header with resizable content div), editor height, and possibly move panels above panel being opened.

[core-ai-bot]

Comment by peterflynn Thursday Dec 06, 2012 at 19:20 GMT

---

If jQuery animations have an 'onUpdate' sort of callback, we might be able to get it to work. I'd be a little worried about performance with all those big chunks of DOM resizing at once, but you never know until you try.

A trickier option would be to animate in the panel as an overlay, and after when the animation is done resize the rest of the UI to make room and drop it in. (Or vice versa: resize the editor, etc. to make room with an empty placeholder, than animate in the panel). For quick animations that probably looks fine, and might even be less distracting.

[core-ai-bot]

Comment by njx Thursday Dec 06, 2012 at 19:28 GMT

---

BTW, this general animation problem is an interesting one that might affect people trying to build web apps more broadly. When you're dealing with complex components that are dynamic/data-driven, where you don't know the appropriate final size until after you've done some rendering, and where some of them (e.g. CodeMirror) have to be explicitly refreshed whenever the size changes, you can't always just rely on simple CSS animations.

[core-ai-bot]

Comment by GarthDB Thursday Dec 06, 2012 at 19:36 GMT

---

Unless you can first calculate the height before starting the transition.

[core-ai-bot]

Comment by njx Thursday Dec 06, 2012 at 19:37 GMT

---

That solves the first problem but not the second one (components where explicit refreshes are required). Ideally components wouldn't be written that way though :)

[core-ai-bot]

Comment by ryanstewart Thursday Dec 06, 2012 at 19:55 GMT

---

So it sounds like the general consensus is that this is a big enough fix with enough unknowns that we should move it to the backlog and do some testing on performance as well as think about how this fits into a bigger question of animations.

I'm good with that. Can someone with Trello access make the proper adjustments?

[core-ai-bot]

Comment by pthiess Friday Apr 19, 2013 at 20:19 GMT

---

This is put into card 853. Closing