Smooth and Fast HTML5/CSS3 Mobile Examples | Ryan Bosinger

Smooth and Fast HTML5/CSS3 Mobile Examples

Performance, snappiness, smoothness, etc. These are all concerns when developing for mobile using a HTML5/CSS3/Javascript stack. Progress in this area has come a long way in the last few years but it’s still very easy to make a slow, laggy mobile experience if you’re not paying attention to technique.

Every once and while I cruise around on my phone (Nexus 5 currently) and test out some web demos. Sometimes I’ve very pleasantly surprised with the experience. I’ve decided to keep a record of these findings here on my blog. Enjoy!

1. Animate.css

A library to help with simple CSS3 animations like bounces, fades and pulses. The demo on the site has always been quite smooth for me on the devices I’ve tested on.

2. Tympanus Modal Window Effects

Modal window pops, fades, slides and zooms. These are surprinsgly smooth in my experience.

3. SmartyPins by Google

A Google Maps based Trivia game using the GSAP framework. GSAP (GreenSock Animaton Platform) is a framework for animation originally developed in ActionScript for the Flash platform. GreenSock now spends their energy on the javascript version of this animation library and focuses on performance, library independance and file size. This demo/game by Google runs nice on my phone.

4. Matter.js Fullscreen Mobile Demo

Matter.js is a Box2D like javascript library for simulating and animating physics. This fullscreen mobile demo runs smooth and inspired me to develop a game. I probably won’t though.

Note: At this time Matter.js is in alpha and isn’t meant for production use.

5. Velocity.js 3D Demo

“No WebGL. No Canvas. Just pure DOM.” Watch this animation of circle particles floating around and blurrying in/out. It looks really good and runs great for me. This demo also seems to determine the amount of circles it will animate based on capability. My MacBook rendered 175 while my phone rendered 40.

This demo uses Velocity.js which is similar to GSAP in its focus on performance and mobile usage.

6. Tympanus Multi-Level Menu

You have to love the stuff coming from tympanus.net. This multi-level responsive (hamburger style) menu looks and works great on mobile. I’m surprised I haven’t seen it on more sites.

I’ve got more but this article is getting long. Stay tuned for a Part Two!

Cheers,
Ryan