Animsition: User-Friendly jQuery-Plugin for Animated Page Transitions

JavaScript along with CSS3 make it easy to create website animations. Some use CSS3 animations to pimp page transitions within a website. The current Cascading Stylesheets version allows you to create simple fade-in and slide-in effects as well as 3D transitions to other pages. The fairly new jQuery plugin “Animsition” helps to easily integrate such animated page transitions into your web project.

Incorporate Data, Mark up HTML, Start the Plugin

Animsition can be quickly integrated and configured. It consists of a JavaScript and a Stylesheet file which are both incorporated into the HTML document. In addition, you’ll need to mark up a HTML container that will be faded in or out for the transitions. As you’ll usually want all content to be animated, the container should include everything within the body.

It’s, however, possible to enclose only a part of the content. The navigation and logo, for example, usually won’t change, so there’s no need to animate them.

<div class="animsition">
…
</div>

It’s important to give the container the “animsition” class, so that the plugin can access it and animate the element. It’s also necessary to give the “<a>” elements the “animsition-link” class, so that you can call the site with Animsition.

<a class="animsition-link" href="contact.html">contact</a>

Then, run the plugin and configure it with the help of different parameters.

$(".animsition").animsition({
inClass: "flip-in-x",
outClass: "flip-out-x"
});

Call the plugin with the “animsition” class through jQuery. The options “inClass” and “outclass” define how to fade the current page out and the new page in.

So, the setting “inClass” makes the current page in the example fade in via “flip-in-x” effect as soon as it’s loaded. The setting “outClass”, in contrast, makes the current page fade out via “flip-out-x” effect as soon as you call a link with the “animsition-link” class.

There are some more options to configure the plugin. You can, for example, specify the duration of the animation via “inDuration” and “outDuration”. As an animated page transition only makes sense if the page chosen by a link is loaded in advance, the plugin loads the target page before the page transition. While loading the page you will see a typical loading animation based on CSS3 and SVG. This animation can be replaced with an individual one. Just make sure that the loading animation can be accessed through the CSS class.

$(".animsition").animsition({
loadingClass: "MyLoadingAnimation"
});

In the example above, the default animation is replaced with the class “MyLoadingAnimation”.

Fade, Rotate, Flip, and Zoom

Animsition offers a whole bunch of page transition effects, including various fade-in and fade-out effects. There’re simple fade effects and more complex ones where the page slides to one side.

You can also apply rotation effects twisting the page to the left or right, either into or out of the window, and flip effects which let your page flip to the front or back. The flipping degree can be changed by choosing a different perspective.

Moreover, the plugin has zoom effects which zoom out the page when leaving it, and zoom in the new page. This can be set in “inClass” and “outClass”. Of course, you should pay attention to choose the right effect for leaving and loading a page as you have an “in” and “out” option for each effect.

Individual Page Transitions for All Links

The configuration via plugin call on the downside can only define one effect for each fade-in and fade-out. The effects defined in “inClass” and “outClass” are applied to the whole document.

You can, however, define an individual fade-out effect for each link. To do so, simply add it via data attribute to the “<a>” element.

<a class="animsition-link" data-animsition-out="fade-out-right" data-animsition-out-duration="1000" href="contact.html">contact</a>

“Data-animsition-out” defines the fade-out effect. The duration of the animation can be specified via “data-animsition-out-duration”. The information assigned through the data attribute overwrites the values within the plugin call. You can’t define a fade-in effect for the new page within the “<a>” elements but you can specify it for each page through the data attribute – within the container that encloses the page content.

<div class="animsition" data-animsition-in="fade-in-right" data-animsition-in-duration="1500">
…
</div>

Overlay Effects as Special Feature

Besides different page transitions, Animsition offers overlay effects as a special feature. These don’t animate the page; instead, a shape hovers across the screen window the new page loads in the background. When it’s finished, the shape leaves your window.

Again, you can choose from various options, for example, animating the shape from or into any direction. Before implementing overlay effects, you need to activate them in the settings.

$(".animsition").animsition({
overlay: true
});

Animsition for WordPress

The plugin can be integrated into a WordPress system without further configuration by incorporating a special plugin. This lets you comfortably adjust page transitions (effects and duration) over the WordPress interface.

Browser Support and Related Links

Animsition works with all major browsers, including Internet Explorer 10 and higher. For other browsers there’s no version number indicated. But you can assume that Animsition works with all browsers that support CSS3. You can give CSS properties to the “unSupportCss” option which deactivates the plugin for browsers that don’t support all of these properties.

$(".animsition").animsition({
unSupportCss: ["animation-duration", "-webkit-animation-duration", "-o-animation-duration"]
})

The property “animation-duration” with its different vendor options is defined by default. An adjustment actually isn’t necessary, but you can, of course, change the list to your needs if you like.

Animsition is released under the free MIT license and can be used for personal and commercial projects.