Mask animation with jQuery and CSS

Introduction

If you are a Flash native and want to create a mask animation in jQuery or Javascript you will ask yourself if this is possible at all. I came also to this point and found a solution with a jQuery plugin called background easing.

But first let me explain what alternatives we have. If you want to fade a picture you can use fadein() and fadeout() of the jQuery API. And if you would like to move a picture this would be achievable with any JS Framework or even by coding a pure JavaScript solution.

Stand out from the crowd

If you are a Web Designer and want to create a sophisticated animation that looks like a native flash animation you need to use a technique called masking.

jquery

Masking

To create a jQuery-based mask you basically define a rectangular space with a div element in your HTML. Inside the bounds of this div you put an object and it will instantly be visible. However if you would move the object out of the defined space of the div element, the object would disappear. Let's call this div element the mask. To hide parts of the contents of this div you could achieve it by applying the overflow:hidden CSS property. But what if we wanted to move the mask?

As it turns out you can move the mask itself and this is where things get interesting.

For instance, if you have a shape, an image or any other element residing on your Web page within the boundaries of the mask and you move the mask away from such an element the effect you would see would be as the element itself is expanding or shrinking. This visual trick is often seen on best-in-its-class Flash sites. I showed how a Flash site would look like if you would use masked animations on Meshfields.flashed (Out of Order until we fully migrated our systems to node.js/ghost).

Put masking to use in jQuery

To achieve a masked animation in jQuery you have to utilise a technique I like to call Movable CSS Background Masks.

How is it done?

If you define the background image property of a div element with fixed width and height boundaries the image will be consequently cut off at the boundaries of the div elemtent.

In detail the whole masked animation is going to be constructed out of two layered div elements and the animation itself.

Three Layers

  • The top layer
    A mask with flexible background position set via jQuery.

  • The middle layer
    An object that we want to hide or reveal.

  • The bottom layer
    An unicolored background in the same color as the first layer.

First of all we define a style that we can apply to the div containing the mask that we want to move. I named the identifier for this div element: #mask. Below the #mask identifier we create a div which will contain the image.

Then you are going to need the jQuery plugin that I mentioned at the beginning of this article. You can download it from the jQuery plugin repository.

Now all that is left for us to do is to animate the mask within the stacked div elements that we have set up so far. The following code is going put these three elements together in order to achieve animation of the mask.

Explanation of jQuery plugin

The plugin's backgroundPosition variable needs us to define the parameters x and y. These will be the new coordinates of the object #maskto which we applied the .animate method.

The duration variable takes a value in miliseconds and the easing property takes values out of Rob Penner's renown easing equations. If you haven't heard of them, this could be a good time to have a look at them. Rob currently works at Disney Studios and you can get in touch with him on Twitter.

Wrap up

Shortcomings

The only shortcoming in comparison to Flash masks would be that my technique only permits the use of an image that has the exact same colour like the background of your html page. So in that sense this isn't a real mask and it would be great to know a technique where we could have a real mask that is transparent.

If this sounds confusing imagine a background with a striped pattern and then imagine how it would look if we changed the position of an unicolored mask above it. In my opinion the resulting visual effect would not be like we intended it to be.

Demo

To give you a visual demonstration of this concept you can head over to Rumänisch Dolmetschen where I used the technique of mask animation with jQuery and CSS by animating several images and even the whole contact form.

I'm always happy about feedback in the comments. And if you like to read more tutorials like this one you can look around this site or backlink to it.

Update 10 October '12

According to Todd's comment you could achieve the mask animation without the background easing plugin, but simply with another div element.