Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Change animation #22

Open
waldyrious opened this issue Feb 6, 2019 · 7 comments
Open

Change animation #22

waldyrious opened this issue Feb 6, 2019 · 7 comments

Comments

@waldyrious
Copy link

The current animation of sliding content in and out laterally is visually interesting, but I wonder if it would be more semantically suggestive to use a folding/accordion animation, whereas deleted code is vertically compressed out of existence, and new code expands out in the opposite way.

For lines that are changed, I'd envision this to produce an effect similar to a slot machine or a cube rolling back.

Not sure if I'm describing the effect in a clear way. Does the above make any sense?

@JCJutson
Copy link

JCJutson commented Feb 6, 2019

For a line that is changed, it could do the same thing, just horizontally. Accordion new characters, squish old ones.

@waldyrious
Copy link
Author

waldyrious commented Feb 6, 2019

Yes, if only part of a line is changed, that makes more sense, agreed. I see you've created #26 to track that case.

On the other hand, if a line is completely replaced, or the hunk spans more than one line, I think the vertical approach probably makes more sense, even if some portion of the lines remains unchanged.

@pomber
Copy link
Owner

pomber commented Feb 6, 2019

Ok, I created #27 and #28 to try new animations (for lines).

See:
https://deploy-preview-27--github-history.netlify.com/babel/babel/blob/master/packages/babel-core/test/browserify.js
https://deploy-preview-28--github-history.netlify.com/babel/babel/blob/master/packages/babel-core/test/browserify.js

I think I like more the lines coming from the sides because it gives a sense of time direction.

@waldyrious
Copy link
Author

Thanks for trying this out so quickly! The demos are great, but indeed the effect doesn't work out in all cases out of the box, especially when multiple lines are involved. Perhaps with some tweaks it would work better (e.g. highlighting the lines added / removed / changed with the usual diff colors, and the portions within them that changed)?

That said, I understand if you still think the sideways sliding animation works better.

@JonnyKelso
Copy link

I think neither animations work. You need to see both versions of a change line at the same time

@katrinleinweber
Copy link

Also my impression: seeing the diff is sooo useful in sooo many situations, that git-history should IMHO include (or some variant of) the diff visual to remain useful in the long-term. I noticed myself <--->-arrow-key-ing back-and-forth quickly in all of the demos.

"change blindness" may be a relevant scientific keyword here: the longer the delay between the different end states (i.e. the duration of the change animation), the more likely it becomes that a change is overlooked.

@pomber
Copy link
Owner

pomber commented Feb 21, 2019

The current visualization is more for browsing different versions of a file rather than viewing the diff between two versions. I want to keep that, but I agree that people usually want to see a diff after browsing the history.
I'm thinking on adding some way to activate a "diff mode" that animates between diffs, as you change the "left" and/or the "right" version of a file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants