Swipe Through Slides on Mobile
April 16, 2014
We're excited to announce a new experience for our mobile users: When visiting SlideShare from your phone or tablet, you can now swipe through a presentation or document, in both landscape and portrait mode.
Having recently launched a new homepage and browsing experience on our mobile site, we are pleased to continue improving how you discover, view and share SlideShares on-the-go. This new, intuitive feature supports the natural desire to swipe slides when using a mobile device. In addition, you can now also jump to various slides of a presentation using a new preview bar that displays the individual slides of a deck.
Swipe gestures on mobile devices may seem simple for the user, but there's a lot of technical work behind the feature. It took us one full-time engineer, two design iterations and three straight weeks of coding to implement.
How, exactly, does swiping work? Here's a general explanation from our engineer, Mark Lee, who implemented it.
-Making the next slide appear: Once we were able to able to translate a swipe gesture to mean "advance to the next slide," we needed to make that next slide appear quickly and smoothly. To do this, we used CSS transitions and hardware accelerations for drag and swiping animations. CSS transitions control the speed at which you see CSS properties -- which include anything stylistic, such as color and font size -- change on the screen. Hardware accelerations use the graphics processing unit (GPU) instead of the central processing unit (CPU) to move elements on the screen. In other words, we were able to bypass the software layer and go directly to the hardware layer, which is faster. This leads to faster and smoother transitions on mobile devices.
Pairing the swipe logic with the transitions accelerator creates the swiping capability you'll now see on our mobile web site.
“It’s a better user experience overall,” says Jean Edouard Benois, our engineer who came up with the project during an internal hack day.
Let us know what you think!