Should animations pause on mouseover? I have my opinion, but I was wondering if there was any evidence to support/refute the idea that users expect this to happen.

EDIT: I'm specifically concerned with sliders/carousels and other non user-initiated animations.

  • What kind of animations? Visual cues or eye candy?
    – dnbrv
    Commented Feb 26, 2012 at 18:29
  • It depends on whether it's media purely to idly consume, or paged information which you might need more time to digest some sections or make note of...and also how long the loop is - if any. Consider how much control the user might have over pausing it at the desired point, whether the paused display provides a useful purpose, and why could the user even want to pause it? Commented Feb 26, 2012 at 18:56
  • 1
    Are you asking "should carousel/ect transitions pause on mouseover?" Don't slide content away when the user is hovering over the item, but if it's something like an element sliding into view or a loading animation why on earth would it pause?
    – Ben Brocka
    Commented Feb 26, 2012 at 19:19

3 Answers 3



Regarding sliders/carousels I say most definitely yes.

Sliders are Lists of Information

A slider (e.g., like slidejs) is really a list, or array, of information elements. In this case the elements usually consist of a full-bleed background image possibly containing a title, some descriptive copy, and possibly a link/call-to-action. The idea is you can show more information in a smaller space by only showing one of these elements at a time (makes the interface simpler and easier to digest, etc.)

If I Can't Use It, I Won't

Personally I find it extremely frustrating as a user when I'm trying to read one of those types of information elements and the damned slider just keeps on changing automatically before I'm done reading what I was looking at! When I'm engaging with a piece of content, that content is the most important thing on the page to me. If, beyond my control, it disappears before I'm done with it, I feel the user experience has clearly suffered, and I might loose interest and go somewhere else, maybe never to return.

Pause on Mouseover, Animate Otherwise

What I've seen around, and which I implement myself when making these sorts of widgets, is for the animation to work as follows:

  1. If the mouse cursor is not on top of the slider area and the timer/delay for the current slide has expired, animate to the next slide automatically.

  2. If the mouse cursor is on top of the slider area and the timer/delay for the current slide has expired, wait. The cursor being on top of the slider area is probably a pretty good indication that the user is currently using that area, and in this circumstance I would expect the default behaviours to be overridden by the user's interactions.

  3. If the mouse cursor is on top of the slider area but the current slide has already started its transition to the next slide, finish animating to the next slide, and then wait on that slide (the new current slide). Jerky animation (if the animation suddenly stopped on mouse over) is distracting too. A natural continuing flow seems like an intuitive behaviour for this in-between state.

The User's Intentions Are Key

Ultimately, keep in mind that the goal of any interface is to facilitate the intentions of its users. If I'm using an interface and its doing things on its own that I don't want (or expect) it to do, then I feel there's something wrong with the interface (or it could at least be optimized some more).

I Want to Finish What I Was Reading

The mouseover event is a good way detect a given user's context (e.g., "currently reading a slide in the slideshow area") and, within that context, one should ask oneself what the user's intentions are and how best to fulfill them. I think for when I'm mousing over a slideshow, my intention is to read the current slide, and the slideshow script should wait until I'm done what I'm doing, or I indicate some new action to execute directly (like navigating to another slide).

  • very well made points, especially about the fact that sliders are informational and some users may need longer to digest the info than others. Do you think it would be acceptable to scrap the pause on hover functionality If there is a pause/play button for the user to click?
    – Dave Haigh
    Commented Oct 8, 2012 at 15:04
  • If it's something you want me to read, I'd like it to wait for me to decide that I'm done reading it. If it's something that you just want to show me an impression of and it's not important for me to read, then I suppose as long as I can understand how to control the interface, it's not that bad (but if it's not that important for me to read, then why is it taking up prime real estate on the page?)
    – robmclarty
    Commented Oct 9, 2012 at 15:16

jQuery gives you enough freedom while doing animations. There are methods like delay()

Also in certain situations, you can queue() and dequeue() animations where you introduce a delay before any event, and let a sequence of animations in progress.

So, there is no point is delaying animations by default, since in most cases it is not required, however can be used at any point in time.

Also, It is very much a case specific scenario.

For example, to make the user show that something happened when they performed an action on the page, say, while reloading visible data on the page, a delay is usually present, and then it is shown to make the user comfortable that something has changed on the page with their action.

However, animations on their , own take some time, which is usually mentioned in the code. So say, when a user takes his mouse over an event that triggers an animation, the result would take up (animation time + delay + time to load data).

One does not want to increase time (insert a delay) for an important action, say over a button which leads to a payment page, or a booking page.

So to sum it up, if there is a gap in which the user sees information that is crucial to him, and will make him stay on the page, there is no point in inserting a delay. In other scenarios, a delay is usually inserted, example, image sliders.

  • Good points. Since it's not difficult to implement, is there some other reason it isn't implemented more often across the web? Commented Feb 27, 2012 at 19:17
  • Answers citing code solutions aren't generally welcome on UX.SE because that's not the industry approach.
    – dnbrv
    Commented Feb 27, 2012 at 22:11
  • 1
    @dnbrv What's the "industry approach"?
    – robmclarty
    Commented Feb 28, 2012 at 23:34
  • @robmclarty: UX problems are solved with process & visual design. Code is just one of the ways the designs are implemented.
    – dnbrv
    Commented Feb 28, 2012 at 23:40
  • 2
    @dnbrv I agree. But I don't think UX problems are only solved with process and visual design. There are many problems out there that can't be fully appreciated without directly observing the experience, and no amount of imagination, planning, or visualizing will really inform the optimal user experience. All I'm saying is that I feel code can be a valid topic for discussion within the realm of UX. In fact anything can be. What matters is that it's about user experience, right? And, you know, there's many ways to skin a cat ;)
    – robmclarty
    Commented Feb 28, 2012 at 23:53

If you are talking of visual cues on mouseover, the answer is possibly yes. I think it is important that when your mouse goes over something, it does not immediately change to something unrecognisable. So if you want to just give a pointer if someone stays over an element, then yes.

If you have a lot of eye-candy with long or slow animations, it makes a lot of sense to delay them, so that you do not have lots of animations which might hold up the browser. However, I would also say that if you are doing this, then don't. It looks horrible.

So there is no straightforward answer. Yes, delay it if you feel that this would serve as a better cue, and give an indicator that this thing they are hovering over actually does something. But consider carefully that if delaying your animation or effect seems like a good idea, is it actually needed at all?

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.