We’ve accepted the jankiness of page loads as a quirk of the web even though there is no technical reason for it. smoothState.js lets you add transitions to eliminate the hard cuts and white flashes of page loads that deface the beauty of the user experience.

SmoothState.js is a jQuery plugin that progressively enhances page loads to give us control over page transitions. If the user’s browser doesn’t have the required features, smoothState.js fades into the background and never runs.

Why are page transitions necessary?

Imagine, for a second, how disorienting it would be if touching a doorknob teleported you to the other side of the door. Navigating the web feels like using a teleporting doorknob. Layouts change, elements rearrange or disappear, and it takes time for the user to adjust. Smooth transitions reduce the effort it takes for users to get settled into a new environment.

Javascript SPA frameworks, sometimes referred to as MVC frameworks, are a common way to solve this issue. These frameworks often lose the benefits of unobtrusive code. Writing unobtrusive javascript gives us more resilience to errors, and improved performance and accessibility.

How does smoothState.js work?

smoothState.js provides hooks that can be used to choreograph how elements enter and exit the page during navigation. It uses the time the animations are running to fetch content via AJAX to inject into the page.

smoothState.js doesn’t dictate how things on the page should be animated. It supports CSS animations, as well as JS animation libraries like velocity.js.

Design philosophy and requirements

The project’s main goal is to allow developers to add page transitions without having to add any logic to the backend. We keep things unobtrusive at all times.

smoothState.js initializes on containers, not links. Think of a container as a small window object embedded in the page.

Every URL on your site should return a full layout – not just an HTML fragment
The smoothState container needs to have an id set – a unique hook to tell us what to update on the page
All links and forms on the page should live within the container
These requirements makes the website resilient, since it smoothState.js can abort and simply redirect the user if an error occurs. Making each link return a full page also ensures that pages are created with progressive enhancement in mind.

Illustration by akselkreis

This jQuery plugin resizes text to make it fit into a container. The font size gets as big as possible.

iframe videos can be a pain for responsive pages. MediaWrapper is a plugin for wrapping iframes and embedded videos to behave more like images.

Illustration by akselkreis

SecretNav is a small jQuery push menu plugin that slides out an off-canvas navigation from the edge of the screen while pushing the main content away with a fancy CSS3 powered 3D perspective effect.

The plugin requires jQuery 1.7 or higher, and Modernizr.

Illustration by minnix

scrollSpeed is a lightweight jQuery extension for custom scrolling speed in modern web browsers. Supports vertical or horizontal scrolling direction, including user-defined easing. After setup, reference the scrollSpeed() method and modify the step and speed parameters to create the desired scrolling effect. The step parameter defaults to 100 units, while speed defaults to 800 milliseconds; custom easing is optional.

Illustration by akselkreis

If you are looking to add a little flair to your anchor scrolling, this plugin can help. AnchorScroll.js is a lightweight, easy-to-use jQuery plugin for smooth scrolling to anchor targets that can also add classes to elements on scroll events. You can add blur effects, bounce effects or even text to let your user know you are scrolling to the right spot.

TypeIt is a high quality jQuery plugin that types text a given string or strings of text on a page. Its responsive, lightweight and easy to customize.

To get started you can either pass in settings object, use data-typeit-* attributes, or You can define your string by dropping it directly in the HTML element. You can have it play back multiple strings and even set it to delete the previous string before starting a new one for that realistic effect. You can also alter details like speed, and even pacing to make it feel like a person is doing the typing.

HTML5 Upload Image, Ratio with Drag and Drop is a tool to help you upload images, making full use of HTML5 with canvas. The drag and drop feature makes this an ideal, and easy, solution for use in a content management system.

Key features include:

• Use canvas to crop images (no server scripts needed)
• Full HTML5 support
• Touch support so everything works great on tablet and mobile devices
• Responsive design
• Save images with AJAX or use the traditional FORM input file element
• Uses ratios to fit screens or elements
• Easy to use
• Additional options to configure
• Works with Bootstrap 3.1
• Works with jQuery 1.9

HTML5 Upload Image is a premium tool and is available from the Envato Market for $11, which includes quality checks, future updates and 6 months of support.

jQuery Lightgallery is a customizable, modular lightbox gallery plugin. The fully responsive tool helps you make the most of images for almost any type of website design.

The key features of jQuery light gallery include responsive design, touch and drag navigation, animated thumbnail options, plenty of customization options and support for video from YouTube and Vimeo. The tool is also designed as modules – thumbnail, full screen, zoom, etc – to make it easy for you to create exactly what you want. Plus, you can add your own modules and detach elements that you don’t need.

The plugin also comes with more than 20 animations built in, and each one uses CSS3 transitions for super-fast performance. Finally, the tool includes a dynamic mode that can be instantiated and launched programmatically by setting dynamic option to true and populating dynamicEl option by passing array of objects representing the gallery elements.

jQuery Lightgallery is available on GitHub and you can find plenty of examples of its usage in the detailed documentation.

Flavr is a fresh and stylish popup dialog for your next flat website. It is built to be responsive, able to adapt its layout and position to any screen size of your viewer with the power of CSS.

To get the best user experience, flavr is animated using the popular animate.css. And most importantly, flavr works on any modern browser (IE8+), any device and any screen size.

Features of flavr include:

• Clean and modern flat design
• Well documented
• Fully responsive
• Lightweight, yet powerful
• Bootstrap compatible
• CSS3 animated in modern browsers
• jQuery powered
• Cross browser support

This plugin is available for $6 from the Envato Market and is quality checked and comes with future updates and 6 months of support. Additional support is also available.

If you are looking for a lightweight jQuery plugin for complex two-way data binding in real time, jQuery.my might be the perfect solution.

Here’s how it works: The tool mutates the object given as a data source, reflecting interactions between the user and the interface. Data bindings, facade appearance and CSS styling of an app are all defined using single manifest, which is standard javascript object. Manifests are JSONable.

Here are a few more features:

• jQuery.my recognizes standard HTML controls and complex composites created using rich UI plugins. Controls built with jQuery UI, Select2, CodeMirror, Ace, Redactor, CLeditor, jQuery Mobile are supported out of the box.
• jQuery.my provides comprehensive validation, conditional formatting, complex dependencies, runtime form structure manipulation. $.my forms can run nested, each jQuery.my instance can be a composite control for parent form.
• Syntax of $.my manifest is very simple, lean and unobtrusive. There exist specialized in-browser IDE for $.my apps authoring. This IDE is a built-in component of cloudwall.me system.

The result is a fully interactive set of tools, tables, curves and layouts that can work in a variety of applications. Check out the demo to see how it can work for you.

Royal Video Player is a responsive player that can play local videos, streaming videos or YouTube videos. (It’ll play pretty much anything with an mp4 format.)

What makes it pretty awesome is that this player works on mobile devices and desktops and with any browser and supports unlimited playlists. This is a pretty robust tool for any site that used plenty of video.

The player comes with plenty of features as well. These include:

• Responsive layout and design
• Optional deep-linking for playlists and videos
• Optional embedding and sharing
• Ability to load any type of playlist
• HTML markup playlists that can be created manually or from a database
• Multiple hover effect options
• Video description tooltips
• Multiple positioning options
• Customizable thumbnails
• One skin for all videos, regardless of source
• Autoplay, loop and shuffle options
• Plenty of great play, volume and other buttons

The player is a robust tool with plenty of features. It is available for $14 from the Envato Market.

Mmenu makes it easy for you to create a native-style mobile sliding menu for your website (including WordPress). The menu has a stylish look and feel behind a hamburger icon and works with almost any type of design.

Mmenu is an easy to use but customizable jQuery plugin. It includes a wide range of options, extensions and add-ons to fit your needs. No matter how large your nested menu structure is, everyone already is familiar with the sliding submenus used in native apps. The fixed header, search field and sub-item counters make navigating your menu even easier.

Customize everything about this plugin to make it your own. Choose from options such as:

• Background color
• Menu position
• Navigation style and flow
• Search fields
• Header or footer buttons
• Include photos, logo or other images

And what’s great about this little jQuery tool is that it looks great. With so many options — and in a style users are familiar with — this might be the only tool you need to finish up your mobile website design.

TwentyTwenty is a tool that can showcase the difference between two images. The nifty little trick makes it easy to show users precisely what you want them to see.

TwentyTwenty works by stacking two images on top of each other. As the slider moves across the image, it makes use of the CSS clip property to trim the image on the left. This allows the image on the right to show through the container.The widget uses jQuery custom movement events to support this slider movement.

The plugin has two dependencies: jQuery and jQuery.event.move, so that actions will work on touch-based devices.

The tool is fairly easy to set up and offers various customization options for display of the images. These options include:

• Color
• Stroke width
• Circle width
• Shawdows
• Triangle color, size and position
• Handle radius
• Overlay and associated colors, labels, padding and spacing
• Label radius

This widget is responsive and works across all devices, doesn’t require images to work properly and works with Zurb Foundation right “out of the box.” (This tool was built by the team at Zurb.)

See the Pen TwentyTwenty by Unheap (@Unheap) on CodePen.