From Below From Above Slide In (top) Slide In (right) Slide In (bottom) Slide In (left) Newspaper Side Fall Sticky Up 3D Flip (horizontal) 3D Flip (vertical) 3D Sign Fade In 3D Slit 3D Rotate Bottom 3D Rotate In Left Blur Let Me In Make Way! Deep Content Slip From Top From Top, Tilt Fall From Top to Bottom From Bottom to Top From Left to Right From Right to Left From Above to Below From Below to Above Shake Bounce Pulse Wobble Swing Tada

Above / From Below Above / From Above Above / Slide In (right) Above / Slide In (left) Above / Slide In (top) Above / Slide In (bottom) Below / From Below Below / From Above Below / Slide In (right) Below / Slide In (left) Below / Slide In (top) Below / Slide In (bottom) Right / From Below Right / From Above Right / Slide In (right) Right / Slide In (left) Right / Slide In (top) Right / Slide In (bottom) Left / From Below Left / From Above Left / Slide In (right) Left / Slide In (left) Left / Slide In (top) Left / Slide In (bottom)

Left Overlay Left Reveal Left Push Left Bounce Left Bounce Out Left Squeeze Left Rotate Right Overlay Right Reveal Right Push Right Bounce Right Bounce Out Right Squeeze Right Rotate Top Overlay Top Push Top Bounce Top Bounce Out Top Card Deck Top Rotate Bottom Overlay Bottom Push Bottom Bounce Bottom Bounce Out Bottom Card Deck Bottom Rotate Minimize then reveal

Lorem ipsum example one dolor sit amet, consectetur adipisicing elit. Unde, dolor, example two ipsa, dolorem officia expedita error example three vel blanditiis tempore molestias voluptatem ducimus porro example four recusandae quo ex quisquam voluptas iure! Amet, dignissimos.

About

Ever notice how small flourishes and subtle transitions dramatically increases the value of the experience you enjoy with an app or site?

Designing and developing UIs for the mobile web is tricky, but it's extremely difficult to do that while delivering something that performs at 60fps. The best opportunities to getting jank-free transitions on phones/tablets are CSS transition and keyframe animation based, especially tapping into hardware-accelerated transforms and opacity changes.

This library has a few goals:

It provides very little UI of its own. It's only hooks for transitions/animations. Designer-curated set of classy and reasonable effects. (no easeInBounce ) Establish browser support guidelines (e.g. Android 2.3 would gracefully degrade) CSS performance regression testing (a la bench.topcoat.io) Deliver jank-free 60fps performance on target browsers/devices If a particular effect cannot deliver target performance (hey blur() CSS filter), it cannot be included. Guidelines on what to avoid when styling these affected elements (avoid expensive CSS) Deliver a builder so users can pull only the CSS they need. There is no hover on the mobile web, so any hover-based effects would be excluded or have a tap equivalent.