Use CSS3 animation to scroll without flicker


(Arnt Gulbrandsen) #1

Scrolling is a little too active now. The text doesn’t just move, there are also various colour changes, text appearing etc. A trifle disconcerting.

I think you could make it work better if you use CSS3 animations to make (some of) the other activities more discreet at first. For example, there’s a little button bar beneath the text of each posting. That could fade in, about 0.2s should be right.

The goal must be that when you’re looking at something, you see it without effort. But if you’re scrolling, nothing flickers and screams lookatmelookatme.


(zimbatm) #2

I think it would be better if the dimensions of the page didn’t change. Having the scrollbar resize all the time is kind of annoying especially when you’re in a thread, it’s not possible to go directly at the end of the discussion.

If the dimensions could be calculated automatically then you could scroll directly to a position and then let the JavaScript load the content for that portion.


(Daniel Hölbling) #3

I agree that especially inside a posting lazy-loading posts is pretty annoying…
On the other hand, Jeff Atwood already made it clear some time ago that he hates pagination… and you simply can’t post huge topics with all posts displayed…

It’s a hard problem to solve from an UX standpoint … but maybe the default amount of shown posts should be increased and the lazy-loading should maybe start sooner (meaning that if you are 30% through the 100 posts already displayed another 30 are appended to the list so you are unlikely to hit the bottom with that annoying loading box waiting to see the next posts…

Or maybe detect scroll speed and if a certain speed is met so the user would immediately scroll down to the bottom the posts in the middle of the page are not loaded immediately but rather the last few posts get displayed instantly and then the posts above come in later.


(Arnt Gulbrandsen) #4

You’re going off on a tangent. Sure it would be nice if the scrollbar wouldn’t change, but if you want to see new posts while you’re writing your reply, change is necessary. The rest is optimization: making it change as seldom/little as possible.

What I’m saying is that while scrolling, flickering paraphernalia should not distract from the text. It’s good to be able to skim the text while scrolling down.


(Jeff Atwood) #5

I like your idea. Can you provide the CSS for such animation? Better yet can you submit it as a GitHub pull request?

:wink:


(Arnt Gulbrandsen) #6

I’ll try. The pull request will say “tweak as you want; please do not ask me to tweak and resubmit”.


(Nicholas Perry) #7

It does look like a blur of junk flying past on my smartphone.


(Jeff Atwood) #8

Ok here is what I am trying on the post menu; I need to extend it to the reply as new topic as well if it’s OK:

@mixin fade-soft($time: 1s) {
  transition: opacity $time ease-in-out;
  -moz-transition: opacity $time ease-in-out;
  -webkit-transition: opacity $time ease-in-out;
  -ms-transition: opacity $time ease-in-out;
  -o-transition: opacity $time ease-in-out;
}

And the menu itself:

section.post-menu-area {
  .discourse-no-touch & {
    opacity: 0.2;
    @include fade-soft(1s);
  }
}

(Jeff Atwood) #10

I guess we were missing this mixin (or it looks like the one we had with this name was broken)? I’m adding it back in and dropping fade-soft.

@mixin transition($transition-property, $transition-time, $method) {
      transition: $transition-property $transition-time $method;
}

looks like minimum browsers for prefixless CSS3 transition are Firefox 16 (late 2012), Chrome 26 (early 2013), Safari 6.1 (June 2013) and IE10.

Of course at that point might as well just remove the mixin altogether and rely on plain old CSS3 transition:. Doing it.