Failing Focus in Animated UI

This example shows the basic concept of a carousel, accordion and similar content-revealing UI widgets.

The buttons reveal their associated slides by using the CSS properties transform and transition. The checkbox controls if focus should be shifted to the slide as it is revealed.

Note how shifting focus interferes with the content being presented, because of the browser scrolling elements into view when they become the active element.

show slide

  • First
  • Second
  • Third