This past week we soft-launched a new feature on our site called Shuffle.
Shuffle in a nutshell aims to bring a Snapchat-like, mobile-first video experience to the web. It enables the same storytelling capability that has recently become so popular among major social mobile platforms.
Shuffle materialized out of an effort that started last year to improve the experience of our interactive features to be mobile-first, and deliver a unified experience across devices. Users are spending a majority of their time these days consuming media on mobile devices, and with those small screens, they have little time or patience for clunky webpages and confusing user interfaces.
Over a period of about six months, and mostly in our spare time, we tried out different frameworks, worked on prototypes, and batted around animation models. At a certain point we realized that we needed to abstract the animation engine from the UI if we wanted to get the performance, fluidity, and flexibility required, and we couldn’t seem to find an animation engine that fit our needs. So we went back to the drawing board to see if we could make something that made it easy to move boxes around in 3D space with physics.
What resulted — after much trial and error — were a few prototypes and a set of principles that we used as a basis to move forward:
- An animation UI needs to be fluid for the user or it’s not worth implementing.
- There is a specific set of GPU accelerated CSS properties that provide the performance necessary for smooth animation. These are the transforms, translate, scale, and rotation, and opacity.
- Animations based in physics provide a more natural experience to the user than easing.
- Animating on the web is essentially about moving boxes around.
- The DOM was not originally intended to be used for animating and so does not scale well when a lot of elements are added.
- Animating and responsiveness should be privileged above the content.
- Modern mobile browsers now support inline video and autoplay. This previously was a major impediment to delivering the type of experience Shuffle delivers.
We took these learnings and POCs to our product and design team, and over a period of about two months, we cooked up Shuffle in a small cross-team collaboration that involved dev, design and product.
On the front end, Shuffle has two main layers — a rendering engine called BAE, and a UI layer called CardsUI.
BAE (Basic Animation Engine) handles the business of moving boxes with physics, and abstracts the driving of that animation so that it could be done with any type of input. It only uses efficient GPU accelerated properties and will not try to be backwards compatible with older browsers. BAE isn’t unprecedented in web animation. It isn’t the first animation engine, and won’t be the last, but it’s been working for us.
The second layer is a framework called CardsUI that is built on top of BAE. CardsUI’s purpose to give users a streamlined and intuitive content experience with the best performance possible. Where BAE is concerned with moving boxes, CardsUI is concerned with giving the user what they want. To achieve this, we adopted the principle that the responsiveness of the interface should be privileged over everything else. If the user puts their finger on the screen and tries to slide that card, we will do everything we can to make sure that box tracks. CardsUI is also nothing new to the world of frameworks. It’s inspired by performance models such RAIL and minimalist interfaces like those of AMP.
We hope to open source both BAE and CardsUI in the near future.
I’d like to the thank the Shuffle team for their excellent work on the project — Chris Wojcik, Stephanie Musat, Justina Villanueva and Shawn Vasandani, as well as our CTO Aleksey Baksheyev, and VP of Product Ayalla Barazany, for supporting this effort from the beginning. Also all the people that post about performance on the web and contribute to the open source community. We are standing on the shoulders of giants.
Shuffle is still an MVP and we plan on making improvements and adding features in the coming weeks. PWA, performance enhancements, UI elements are all on the roadmap. The one thing we don’t want to change is staying out of the way of the user, and that will be our main consideration in everything we do.
Getting to this point has been an interesting journey. We didn’t wind up where we thought we would when we started, and it was only through much trial & error, collaboration across teams, and keeping an open mind that we got here. Where it goes from here only time will tell, but if we achieve anything with this project, I hope it’s an answer to the question of whether it’s possible for the web to deliver the type of experience users want.