Plugin Spotlight: Animsition

Websites are doing some awesome things with CSS and jQuery. From on screen animations and CSS3 transitions some nifty things can be and are being done with the tools available to us. Yes, I just said nifty. For all of the cool things we can do on the front-end, one thing seems to always be overlooked. Page transitions. When you typically click a link on a website the same thing happens every time. The page goes white, the load gif replaces the favicon, and (depending on website load times) the content and styles will display relatively quickly. Well it doesn’t have to be like that. There are already a lot of jQuery or CSS3 transitions available to use but I want to talk about one that I stumbled on recently.

Animsition is a jQuery plugin that can be used to add different in/out transitions to a website. In the four transition groups available in this plugin, there are a combined 58 different options for animation. Installation is fairly simple with a couple of lines of starting code added to the header and body and a class and data rule added to the link. Let’s dive in for a quick guide through the plugin.

Getting Started

Set up is fairly simple. A couple of files are required, as well as your jQuery script call, to initialize the plugin. Incorporate the files into your header like so:

You’ll also need to add markup to the HTML document to trigger the animation. Add the following div class to either the whole body or just sections you want to be animated.

The container class of animsition is required to talk to the plugin and animate the required elements. Important to note: you will also need to add a class of “animsition-link” so you can call the Animsition plugin. The next step is to call the plugin and add your parameters.

The options “inClass” and “outClass” are your new page load effects. So, on page load “inClass” has the current page fade in via the “flip-in-x” transition while the “outClass” instructs the page to use the “flip-out-x” transition when the class “animsition-link” is called. There are a few more options you have the ability to configure in the plugin. For example, you can specify the duration of the transition using “inDuration” and “outDuration”.

Advanced Options

There are a couple more options for formatting the plugin. Say for example you’d like to see a specific link have a different page animation. That’s attainable by adding transition effects into the link itself via data attribute.

The information assigned through the data attribute overwrites the original values assigned in the initial call. You can’t define a fade-in effect for the new page within the link elements, but you can specify it for each page through the container that encloses the page content using the data attribute.

Animsition also provides overlay options for page loading. The overlay allows for a wipe transition that hides the content on the page until the page finishes loading. After setting the overlays to true, it’s set to false by default, you’ll find that it’s set up much in the same fashion of of the setup above with the addition of the word overlay. For example, you still need to create a container div but you will add a class of “animsition-overlay” instead of just the animsition class.

If you want to apply the Overlay to a specific link then the set up is, yeah you guessed it, basically the same with one exception:

Conclusion

That’s basically Animsition in a nutshell. Transitions don’t stop there, so go check it out! Animsition isn’t the only one of its kind either. There’s more like this available. Potential downside to these transitions, however, for most you need a modern browser. So that means nothing past IE 9 will properly run these effects. Keeping that in mind, even if you don’t end up using it for a website, it’s fun enough to look at all the transitions. So go play and keep the web whimsical; functional, but whimsical.

Related Post

Get Organized!

Get Organized!

Save money on your website project and get off to a good start with your web designer. We'll take you through few crucial planning steps, via email, for free.

Thanks for signing up! Keep an eye out for your first email.