How do I make an icon play on rollover?

Animated gifs will automatically play once they are loaded on a website. To play them on rollover, you need a static version of the icon.

Create a Static GIF

In the Animation/Timeline window, select every frame except the first one and hit the trash icon.

ps-animation-trash-not1

You’re now ready to save. Select “Save for Web and Devices” from the File menu. Select GIF, and the desired number of colors. Be sure to check the Transparency and Matte options. The Animation options at the bottom of the dialog should indicate a gif with only 1 frame (1 of 1). Click “Save” and save the file as a new name, probably something like “animat-icon-name-static.gif”.

ps-export-no-animation

Rollover Methods


Method 1: Javascript

You can use javascript to swap the icon on rollover.

<img src="path-to-your-folder/animat-icon-name-static.gif" onmouseover="this.src='path-to-your-folder/animat-icon-name.gif'" onmouseout="this.src='path-to-your-folder/animat-icon-name-static.gif'">

Results


Rollover the image


Method 2: CSS Backgrounds

Set the GIF as a background image in your CSS and you can use the pseudo:hover element to change the icon on rollover.

<div class="image-swap"></div>

.image-swap {
    width: 128px;
    height: 128px;
    background-image: url('path-to-your-folder/animat-icon-name-static.gif');
    background-size: 100%;
    background-position: center center;
}
.image-swap:hover {
    background-image: url('path-to-your-folder/animat-icon-name.gif');
}

Results

Rollover the image


Method 3: Use a Plugin

Use a plugin, like freezeframe.js.

Freezeframe.js automatically creates a static first frame of your GIF using the <canvas> element. If you use this option, there is no need to create a static version of your icon. Visit the freezeframe.js website for documentation and usage.