Overview

Animations are achieved by changing the background position of an image within a div. The background image itself is a sprite sheet (.png) with a set of horizontal images that progress through time at 30 fps. An animator function in animator.js will animate the images on click as well as whenever the function animateOnce(options) is called. An example sprite sheet can be seen below. To undo the animation, the image is simply animated in reverse, iterating through background positions from right to left.

Example Animations

Click each image below to animate it forward in time, click again to run the animation backwards. These animations are being done using purely javascript. In order to minimize javascript on the site, I have also looked into CSS animations, with an example of purely CSS handling the animation in the next section.

Example CSS Animation

As a hacky workaround to completely avoid javascript in the implementation, a check box input set to display:none; can handle animating forwards and backwards using purely CSS. Two noteworthy problems with this approach are the animation happening on page load as well as the existence of a single frame problem when animating the heart out, where the heart appears hollow temporairly before actually animating to the position.

In code, this looks like a html file with the following:

And a css file with the folowing to animate it:

Example CSS/JS Combo Animation

The most realistic implementation would be a combination of JavaScript and CSS to create the animations. A sample implementation and example can be seen below, including hover states for both ends of the animation.

To accomplish this, classes are toggled on the div, switching between active/inactive as well as hoverable/not hoverable. While the animation plays, the hoverable class is removed to prevent the hover state from overriding the animation. The animation fill mode is set to both to preserve the last frame of the animation when it is played in either direction. This fill mode is removed on hover to allow for the hover state to change the background. Additionally, the below animation is using a sprite sheet with multiple animations on it, showing how multiple animations can easily be downloaded in one image.

Implementation

The creation of a new animation has three main steps:

1. Create the animation in After Effects and render output to a png sequence with alpha

An example project can be found below.

2. Import the exported frames into photoshop and compile them into a sprite sheet

This can be easily achieved using a built in script in tandem with a second script which can be downloaded below. First open photoshop and run the script titled "Load files into Stack" and select the output from After Effects. Once that is complete, run the second script, titled "Create Sprite Sheet from Layers". This script can be installed by simply putting the jsx file in "Adobe Photoshop>Presets>Scripts" while photoshop is not running.

3. Lastly, add the appropriate code to animator.js so it knows how to animate the image

The below code/implementation is for the first itearation that uses javascript only. It is advised that you use the css/js implementation detailed above.

To include a new animation, simply add a varaible as seen below in animator.js and change the values as needed. The only HTML that is necessary is an empty div with a id that is the same as the value of the "elementId" key that you set. The below code is included in $(document).ready() in animator.js.

The css that one would expect this to requre is automatically generated when the variable is created. This is done using the SpriteAnim function in animation.js.

The function that actually handles the animation is quite simple. It finds the required div, checks if it is at the end of the animation or not, and then animates in the appropriate direction.

Example Uses

These animtions use the elements seen above to achieve a more fluid user experience. They can be found in the after effects project that can be downloaded below.

Inspiration

Before creating any animations, extensive research into existing animations was done. Below are a few of the stand out button animations that were discovered.

Notes

When implementing the animation, the number of frames passed to the animator should actually be one less than the number of frames in the image, as it is actually the number of steps the animator will take. If you have any questions about this page or process, contact Nick

Downloads

After Effects Project
Photoshop Sprite Script