Animation

[jacksonkernion]

Thank you @jessegrosjean for sharing this preview app! I’m excited about the new direction. I think an HTML-based document makes a lot of sense. (I’m especially excited about having a cross-platform outliner app.)

The first thing that stood out to me about Bike was the outline-manipulation animation. They’re very smooth and slick! But I think they’re a bit too slow for me. This is probably an area where personal preference varies, but I wanted to make a plug for: 2x fast animations, and/or a setting to remove all animation in favor of instantaneous changes. (Instantaneous changes are part of what makes a native app feel native to me.)

And a very small animation issue I noticed: empty lines without disclosure triangles can sometimes have gray-background hover states. Probably unintended?

[Jim]

+1 to adding animation options.

[jessegrosjean]

Good catch on the highlight state. It’s a bug resulting from me hiding handles for empty lines. I was unsure of that change, but I do like having ability to put pure whitespace in my outline. Anyway I’ve fixed so that the triangle is also visible on highlight.

I know I need animation options eventually, and I’ll add them, but I also want to get the defaults as close to “right” as I can. With the existing behavior is it all animations that are feeling slow or are there some that bother more than others?

[jacksonkernion]

+1 to being able to add whitespace.

The three animations that seem too slow to me:

• Cursor movement as I type (this one clashes with native cursor behavior, so very noticeable to me)
• Item indent/outdent/move up/move down
• Opening/closing branches of outline

The animation at the end of click-and drag seems nice to me. It helps track what the exact change is, and helps me notice if the change is not what I intended.

[Jim]

@jessegrosjean

…but I also want to get the defaults as close to “right” as I can.

At the risk of offending your inner animation artist: tighten the animations up until there is zero extra movement (beyond what is 100% absolutely necessary to maintain the animation’s purpose).

As much as I love animation, it is a distraction—seeing it can pull me out of “flow.”

During serious outline creation, where I want to be focused like a laser, I want a clean, clear, reliable and utterly efficient tool.

If a preference option is added for completely turning animations off, I will use such, and be very happy for it.

[jessegrosjean]

@Jim

At the risk of offending your inner animation artist

Not offended, and I will provide option to disable.

But I will also keep arguing that I think the animation is good… or at least can be good if I manage to implement it the right way.

First I think animation has a few things stacked against it:

1. We are used to computer animations slowing us down. In old days animations would lock you out and you had to wait. Or they are something bolted on to an existing UI and you can feel the computer performing some unpracticed hard work for each animation.

2. We are used to using computers (text editors in particular) without animation, so it feels different/weird when the animation is there. Depending on your perspective this feeling might be translated into “ooh cool” or “ooh why are you wasting my time”.

I “think” Bike animations are different in that they are designed to be there, computer isn’t struggling. They shouldn’t be slowing you down. You should be able to type just as fast as you want and the cursor/animation will keep up. Please let me know if that’s not the behavior that you are seeing.

I know that for me there can be a momentary adjustment when going in and out of Bike’s editor. I used to have animations a bit slower, and then for me they would feel a bit slow, until I was writing for 10-20 seconds. Then I would stop focusing on them, cursor would keep up, and it was fine. And then when I switched out of Bike typing felt very jarring for a bit. With the current animation timings I don’t feel any initial slowness, but I can imagine it might happen to others.

beyond what is 100% absolutely necessary to maintain the animation’s purpose

Please let me where you feel Bike is going over that line.

• Scrolling Page Up / Down feels good to me. If it’s instant with no animation I get lost. With animation helps me keep track over where I am. Scroll to cursor / home / end also feel good. Though in a long document it might be considered long.

• Focusing Again this feels good and necessary to me. Even I get confused when focus in/out in TaskPaper sometimes. I have had many TaskPaper users get lost and confused when they focus into a project and then think they’ve lost the rest of there outline. Bike’s focus animations makes navigating the whole outline structure much clearer to me. I also don’t think it’s slowing me down. It does take a blip longer, but at the same time I don’t loose and have to regain my context as I would when focus in/out without navigation.

• Folding Maybe this one feels slowest to me. I’m not sure that it slows me down any, but I wouldn’t be opposed to speeding it up a bit. Does this one seem excessively long to anyone else compared to the other animations?

• Inserting Row To me this feels good. Again if you see the animation as something you have to think about and wait for before you start typing, then yes it might be slow. But you don’t just hit return and keep typing. The cursor should keep up, the animation shouldn’t slow you down.

• Insert/Delete Char This is the weirdest feeling one to start with and has the least benefit. You aren’t used to it from other editors. And you aren’t likely to loose you context in the non animated standard case. But I still feel it’s important for consistency with all the other animations. And to me it just feels nice and smooth. Once I’ve been in Bike a while I dislike moving to another editor.

• Caret flash This is to indicate that something “magic” happened, a break in the consistency of everything animating smoothly from position to position. The cursor jumps through hyperspace and that’s indicated by the cursor bounce/flash.

[Jim]

@jessegrosjean

Please let me where you feel Bike is going over that line.

Let me invest some time into exploration. I will get back to you tomorrow.

Thank you—Bike, and all of the discussions here, are fun to explore!

[Jim]

The most noticeable one that I see (feel) is when I move the cursor from the end of a long line:

[jessegrosjean]

Ok, we are in full agreement on that one

Actually I had this fixed in previous versions, but broke in first preview posted to this forum. I agree that animation shouldn’t happen. I’ll try to fix that case again.

[jessegrosjean]

The latest release adds some options and updates some behavior.

I removed the text caret animation across screen when you are typing and a line wraps. I didn’t remove it when you are just moving the cursor with arrow keys (that’s where I had strong agreement).

I’m less sure about removing the one when you are just moving with arrow keys. I want to show animation when you are moving up/down across lines generally. Detecting case when that animation was also moving a lot sideways would be possible, but kinda arbitrary. At one point it would animate, and just a pixel more and it wouldn’t.

[Jim]

@jessegrosjean

The latest release adds some options and updates some behavior

Color me happy. Thanks!

[jmfd]

Bike is lovely! But…

The cursor movement when typing feels like input lag, and is not satisfying as I imagine was intended.

As the cursor moves to cover the input letter, it doesn’t feel like it is actually typed until the animation is complete. Different folks have different animation perceptions, and with every letter pressed my brain has to wait the animation duration to determine if the stroke was successful.

Glancing back at older posts, it seems you removed general cursor movement animations, so why not this one?

Even if there’s some chance I could get used to it (unlikely imho), the first impression it gives is that the software is slow .

P.S. All the other animations are .

[jessegrosjean]

@jmfd

Glancing back at older posts, it seems you removed general cursor movement animations, so why not this one?

In the end I think I probably will add that option in the pretty soon timeframe.

But I still really do like that animation as default. It may be irritating to some, but to me it feels really nice. Makes me feel like I’m in a different place on my computer. Ahh… this is the place where I think and bound ideas around kinda thing. So anyway, I’ll try to get option in sooner then later, but got some bugs and other things first.

[fssbob]

I like the animation as well.

[Coffee]

Really liking Bike so far — I’m imagining it as a kind of stripped-down Scrivener, allowing you to write chapters in foldable, re-arrangable chunks.

My only issue (other than having the ability to choose my own font) is that the typing action seems too slippery, too smooth. Every writing app I’ve ever used (including within this very text box) renders letters onscreen one at a time —pop pop pop—matching the rhythm of the keys being clicked. Bike seems to slither the words in. I can’t tell what’s really going on here — is it a micro-fractional delay in rendering each letter? Maybe.

The only thing I can equate it to is the Soap Opera Effect on modern TVs — there’s something too smooth going on here, and it basically breaks the illusion that the keys are “clicking the letters into place”, typewriter style.

Hope this makes sense. Bike really is beautiful, and I include the icon in that praise.

[jessegrosjean]

This is a feature! It’s an intended animation, not a delay.

The inspiration is from Designing Fluid Interfaces. The intention is to generally make computer interfaces easier to understand, feel better, by making interactions relatable to how things work in the real world. In the real world things don’t appear instantly out of no-where. My thinking is that if your text was physical, then when inserting a character you would need to slide the other characters out of the way…

That’s the background.

In actual use, to me, it just feel nice. I sorta feel the opposite, after working in Bike I type in another text field and all I see is – pop pop pop – until I get used to it.

With that said you are not alone, some like it, some don’t. I will likely add a preference eventually. These points might help you like it more until then:

1. There’s an animation speed setting in preferences, you can play with that or just disable all animations completely.

2. Also note that it’s not slowing you down. The animations only apply to the last character you type. As soon as you type the next any current animations are canceled and next scheduled. It should be possible to type in Bike as fast as any other editor.

[Coffee]

Thank you for that response! I’m glad to hear it’s intentional (thinking about it, of course it is!) — and equally glad to hear that I might eventually be able to turn it off.

A writing space is such a personal, particular thing. I have many days where the thing I’m working on is the thing I look at more than anything else. There’s a reason that everything from paper stock to pen choice to software preference to fonts and themes are such an obsession with so many people. It’s not all just procrastination. But it’s also a little bit procrastination.

As I mentioned, I really do think you’re on to something kind of huge here. I love Scrivener’s organizational power — especially the high level view of the cork board — but it can be SO kludgey. Ulysses solves Scrivener’s cross platform (and cross machine) problems, but it falls down around structure and organization. Ditto iA Writer. Highland gets closer to the ideal, but it still lacks that killer cork board overview.

Bike actually seems to solve a lot of those problems. I can write short, descriptive topline stuff, then write the actual prose underneath it. By collapsing it all down, I have that high level overview that is infinitely re-arrangable, all without having to make another document, and without leaving the actual piece of writing.

Sorry, I know you know this already, but you really have solved a problem that I (and I’m sure many others) have. Looking forward to the next iterations.

[mjtsai]

@jessegrosjean

• There’s an animation speed setting in preferences, you can play with that or just disable all animations completely.

Could you make that turn off the scrolling animation, too?

[jessegrosjean]

@mjtsai

Could you make that turn off the scrolling animation, too?

Sorry, getting to this late, but which scrolling animation do you mean? I want to avoid adding too many preferences and I think this is only disable scrolling animation request. Is it causing a specific problem? Generally I think scrolling animations in text editors NSTextView anyway are pretty standard.

[jessegrosjean]

I’m looking to add on more animation checkbox, trying to decide what exactly it should do. Currently the options are:

1. Animations On / Off
2. Animation Speed

The most common request that I’m hearing is to disable “typing animations”, so I’m considering adding checkbox like:

1. Animations On / Off
   • Typing Animations On / Off
2. Animation Speed

When typing animations are off then text caret and inserted text will no longer animate, but everything else (for example trailing rows when text wraps making current row taller) will still animate. Also caret movement will still animate. Only when typing or deleting will animations be canceled. Does that seem OK?