UI Concept

[shshaw]

Put this UI concept together a few weeks ago when we initially discussed various features.

Feel free to pull from this where it makes sense:

• Top right is a show/hide toggle.
  • This may be different for the way you have the controls floating. Perhaps it would be far-left/right and would toggle down to just the play/pause button?
• Labels shown on Timeline, clickable to jump straight to the label.
• Repeat button on the far right
• Handles for looping only a part of the timeline (as discussed in #5)
• Skip left/right arrows for jumping between Labels

.svg and .afdesign (Affinity Designer) included: SockDrawer UI Concept.zip

I only did a dark theme, but it was mainly for layout, icons and functionality concepts.

[sdras]

This is great, I had a similar mock for where this is going, but I'm likely to keep it a little less GreenSock- branded- I think the typical use-case would be people who want to showcase an animation as if it were a youtube video. The green/black is really recognizable for greensock, which is great for them, but maybe not-so-great for client sites. The UI functionality is right-on though.

I'm still toying around with the concept of nested labels- most of my master timelines have two labels- one for the child timeline and one for the master- often at the same juncture (start of the child). The designs I'm working on would pull from each and show the nesting appropriately, but it does mean that the label advancing gets a bit more complex. Maybe the user picks which 'level' they want to track through, with a default.

[sdras]

I'm closing this one out, as I'm in the middle of implementing the labels and it heads in a slightly different direction for the design, but this is great to have as reference, thanks!