An update on the UI work

This is the menu redesign I’m working on. I don’t have anything to release yet because I want to save it until it’s definitely an improvement on what’s already there.

new_menus

You can see with Cast Loosen there’s a sub menu for the target. I tried out exposing all the arouse/heavy arouse (options #1 and #2) variations in a sub menu, but picking the variation isn’t an interesting decision so I’m going to keep that randomised.

I’m hiding the descriptions inside a foldable section. I figure those are things you really only need to read once. Maybe I’ll default them to unfolded if you’ve never seen an action before, or if you’re on a big display. I haven’t decided which.

Does anyone have recommendations for JS animation libraries? I need relatively simple tweening through a list of keyframes for a variety of CSS properties. Preferably something that runs OK on underpowered devices. JQuery is disappointingly bloated and sluggish.

4 thoughts on “An update on the UI work

  1. Pirrata says:

    You could use CSS transitions where available, as they are the standard and more native way of doing them.
    For example, for the description collapse, you’ll do something like:
    transition: height 2s;
    Then just change the height when clicked.

    For old browsers where this is not available, don’t do animation at all, showing the description instantaneously (following the CSS principle of graceful degradation/progressive enhacement), or fall back to the less smooth, slower JS one.

    (On the other hand, I think a popup-like bubble with the description would be better. Just hover/click the “i” to show it. That would preven a reflow of all the elements below the description, as it would show in a out-of-flow element.)

    • jackoekaki says:

      CSS transitions are neat, and surprisingly well supported, aside from IE. It’d be good to get native code to do the heavy lifting.

      For what I have in mind for the meters, I’ll need something closer to CSS animation (as opposed to transitions). JSTween looks like it could be a decent fallback.

  2. Baelnorn says:

    How about TweenJS (http://www.createjs.com/#!/TweenJS)? Seems easy to use and leightweight enough, and works on IE (at least IE9).

    • jackoekaki says:

      I’ll take a look. I only just realised JSTween is under a share-alike license, so that’s not such a great idea for a closed-source project.

Leave a Reply

Your email address will not be published. Required fields are marked *

Anti-Spam Quiz: