Circle Hover Effects

Adobe Edge animation

Description

How to add more symbol instances

How to remove symbol instances

How to change the icons

How to change icons' color

How to turn off initial “Stage” animation

How to change links or Javascript function after click

Publishing from Edge Animate

SVG files require proper web server MIME-type configuration

Notes

Description

28 Edge Animate projects with hover effect animations for content (icons) in circles.

How to add more symbol instances

  1. Open .an file
  2. Select “Group” layer, right click, choose “Ungroup Elements”
  3. From Library Panel drag the “box” symbol on the Stage. Increase the number in symbol instance's name (for example “box6”)
  4. Edit array “elements” below. Remove // in the commented line
  5. Change character in icon font that contains new icon
  6. Select all box instances on Stage and group them. Make sure the group is named “Group” (not “Group2” or anything else).

Note: The amount of “box...” symbol instances on Stage and number of elements in array “elements” must be the same. The “box” instances must be grouped to center them horizontally.

How to remove symbol instances

  1. Open .an file
  2. Select “Group” layer, right click, choose “Ungroup Elements”
  3. Delete symbol's instance from the Stage (for example “box3”)
  4. Remove “elements” array's line that contains “box3” (for example)
  5. Select all box instances on Stage and group them. Make sure the group is named “Group” (not “Group2” or anything else).

Note: The amount of “box...” symbol instances on Stage and number of elements in array “elements” must be the same. The “box” instances must be grouped to center them horizontally.

How to change the icons

All project files use icon fonts generated with “Fontastic” – free online icon font generator. To change the icons you need to make your own icon font – the process is simple with “Fontastic”.

Create the icon font:

  1. Create your free “Fontastic” account.
  2. Login into http://app.fontastic.me/.
  3. Step SELECT: Select the icons you'd like to use.
  4. Click “Modify Font” menu link and change “Font Name” to icon-font.
  5. Step CUSTOMIZE: Map the icons to characters you'll use in Edge Animate project. Use characters “1”, “2”, “3”, “4”, “5” – these characters are used in all projects.
  6. Step PUBLISH: click DOWNLOAD button to get your icon font.

Replace the icon font:

  1. Unzip the file.
  2. Copy the folder “fonts” and “styles.css” to project folder “icons” – replace the files.
  3. Refresh the .html file and you'll see the new icons.

Note: If you've mapped other characters than “1”, “2”, “3”, “4”, “5”, you'll need to change the code in .an file:

  1. Open .an file.
  2. Open Code window from main menu: Window > Code.
  3. Look for Stage > document.compositionReady on the left sidebar.
  4. In “elements” array look for values in “character” properties – these should be the characters you've mapped the icons to. Change them to the ones your icon font is using.

How to change icons' color

Colors of the icons (icon font characters) are set with variables:

  1. Open .an file
  2. Open Code window from main menu: Window > Code
  3. Look for Stage > document.compositionReady on the left sidebar
  4. Look for variables clr and clr_over

Icon color

clr = "#d3f0ea";

Icon color on hover

clr_over = "#ffffff";

In some cases clr or clr_over might be set to use the color of the Stage:

clr_over = stage_clr;

How to turn off initial “Stage” animation

By default, all “box” elements are animated to appear on the Stage one by one (not instantly) with their opacities fade in. However there might be situations when you don't desire such animation. To remove it:

  1. Open .an file
  2. Open Code window from main menu: Window > Code
  3. Look for Stage > document.compositionReady on the left sidebar
  4. Find the line /* opacity animation after Stage loads */ that's located almost in the end
  5. Remove (or comment) the line that starts like this box.element.css({'transition'

Change links:

  1. Open .an file
  2. Open Code window from main menu: Window > Code
  3. Look for Stage > document.compositionReady on the left sidebar
  4. elements array contains the links you can change – look for values in “url” properties: http://www.example.com?link1 wrapped in apostrophes '

Change Javascript funtion:

  1. Open .an file
  2. Open Code window from main menu: Window > Code
  3. Look for box > hotspot.click on the left sidebar
  4. Code that opens the links: window.open(url, "_self");
  5. You might replace it to call other Javascript funtion

Publishing from Edge Animate

After you've done editing in Edge Animate, publish the project files:

  1. From main menu: File > Publish
  2. Project files are published into publish folder

Projects in the package use Adobe Content Distribution Network (CDN) Hosting to speed up Animate composition delivery.

CDN Hosting

Compositions using the Adobe CDN all share a single URL for jQuery and the Edge Runtime. The browser caches the runtime, so the user only downloads the library once no matter how may Animate compositions they view, even if compositions are on different sites and produced by different authors.

Don't use the CDN if your composition needs to run without an Internet connection or if you want to use your own hosting exclusively.

SVG files require proper web server MIME-type configuration

If SVG files don't show up on web, the server doesn't serve MIME types for SVG files correctly. You should configure server appropriately. There are several ways to do it, depending upon the server type, and your access to server settings.

For example, in Apache server it's done by editing .htaccess configuration file that is hidden - make sure your FTP client shows hidden files. If your server does not have such a file, create a file and name it “.htaccess”, and associate the SVG file extensions with the correct MIME Type; if the file already exists, you can simply add the correct entries to it. The particular line you should add are:

AddType image/svg+xml svg

The .htaccess file should be placed in the directory that contains the SVG file, or any parent directory.

More on this subject: http://www.w3.org/services/svg-server/

Notes

Icons from “Foundation Icons” set made by ZURB (Public Domain CC3 license).

Icon fonts generated with “Fontastic” – free online icon font generator.

The projects were produced using Adobe Edge Animate CC version 3.0.