Better way to scroll through discrete horizontal list

Question

As a javascript developer, the simplest way to implement sliding is to just put all items in a row and animate by changing a css property.

Are there any reasons to do it this way besides the simplicity of implementation?

If this is considered the best approach, then what timing should we choose? We can switch between each item at a constant rate, no matter how far one is from another, or we can mimic "physical behavior" and use fast animation for the closest item and slow for the furthest.

Are there any alternatives to this approach that would work in HTML5?

For example, if you click the last item in the list, I could ignore any items between the first and last one and just slide immediately to the clicked item.

Answer 1

This is what comes to my mind:

• Choose the transition type that fits the overall mood and the purpose of the web site.

  • If you want to communicate a feeling of for example smoothness or luxury maybe a opacity or crossfade transition could enhance that mood.

  • If you want to communicate a cool or upbeat feeling maybe a 3D flip transition is the best way

  • or if a childish feeling is what you want to communicate a bouncy effect is the way to go.
  • If people is going to use the web site for solving tasks all day long maybe a discrete transition that people wouldn't get annoyed by looking at 50 times a day is the best way.
• If the visitors wants to move between the slider items it gives people a sense of orientation if they have to go trough all the slides between the current slide and the target slide. Especially when the buttons don't have any labels.
• I don't like those small buttons on the fruit company's web site. They are to hard to hit.

Answer 2

Assuming you're "scrolling" or sliding the slides around it makes most sense to display all slides between point A and B; that's just how real-world objects like film reels work.

This presents a problem however when you start scrolling between large amounts of slides. Try to keep a delay of under 500ms to avoid being too long and showy, and avoid too short of a delay as it can seem a bit too fast as sources indicate in this answer regarding response times. Note that an animation under 100ms is not going to be seen as instantaneous as we can see that something has occurred, but it's a bit of an unnaturally brief time for physical responses. Human reaction time is around ~200ms.

Consider the Motion Principles outlaid in Meaningful Transitions. Effects like Slow In Slow Out and Follow Through give the impression of inertia; if scrolling more than one item at a time automatically this should be used to indicate when the movement is starting and stopping.

Think of it like a real world slider accelerating as your hand moves the device, keeping it's speed after your hand leaves and then coming to a stop "k-thunk" as it snaps into the last position. This is a common effect on iOS and many touch screen controls where visual feedback shows you when you have reached the "end" of a page. In this case however the "end" is the new selected item.