snabbt.js Minimalistic animation library in javascript Fast 60 FPS, even on mobile Light < 5kb minified and gzipped Simple Write less, animate more Download Warning: snabbt.js is under development, expect some changes to the API before 1.0. Introduction snabbt.js is a minimalistic javascript animation library. snabbt.js is built to be fast. Note: For convenience, width and height are animatable too, but beware since they may cause page reflows and slow down your animations. Limitations All transforms work on pixels or radians. Demos Check out some of the demos to see the capabilities of snabbt.js: Usage Animations are started with the snabbt-function call. Chaining Animation can be chained by using the `then()`-method on the returned animation object. Make it stop Animation can be stopped at any time by replacing the animation configuration with the string literal 'stop': snabbt(element, 'stop'); Easing snabbt.js includes four easing functions: linear, ease, easeIn and easeOut. Custom easing function Spring easing
Bouncy Navigation in CSS and jQuery A full-screen navigation, with floating menu items. Browser support ie Chrome Firefox Safari Opera 9+ There are cases when you want to present the user with a choice, with the focus of the web page being the different options. Whether it is a modal navigation, or a list of categories, todays nugget gets you covered! We used CSS animations and a pinch of jQuery to animate navigation items, and let them bounce in and out the screen. Icons are from our Nucleo set. This resource was inspired by Tumblr iOS application. Creating the structure The HTML structure is quite basic: the navigation is an unordered list, semantically wrapped in a <nav> element and placed inside a div.cd-bouncy-nav-modal. Adding style We used both CSS3 transitions and animations. We used CSS animations over transitions to move the navigation items just because of the bouncy effect. To spice up the entrance effect, we used a different animation-delay value for each navigation item. Events handling Claudia Romano