Curl Hover Effects

Boxes vs. Badges (SVG). The differences

The bundle includes 20 Edge Animate projects of two types I called “Boxes” and “Badges” for the sake of simplicity:

	Boxes	Badges (SVG)
folder	1.boxes-with-hiders	2.badges-with-svg-sprites
projects	9	11
graphics	graphic elements in Edge Animate project (.an)	almost all graphic elements in external SVG files
background	use only on flat background	use on any background
animation type	pure jQuery animation	animation limited to the keyframes in SVG spritesheets

How to add more symbol instances

1. Open .an file
2. From Library Panel drag the “box” symbol on the Stage. Increase the number in symbol instance's name (ie. “box4”)
3. Edit array “elements” below. Remove // in the commented line
4. In Library Panel duplicate the symbol “txt_3” and increase the number in name (so it becomes “txt_4”). You can edit the content of the new symbol by double clicking on the symbol (in Library panel). “txt_1” is attached to “box1” and so on.

Note: The amount of “box...” symbol instances on Stage and “txt...” symbols in Library must be the same. As defined in array “elements”.

• “box...” symbol instances on Stage: box1, box2, box3, etc.
• “txt...” symbols in Library: txt_1, txt_2, txt_3, etc.

How to remove symbol instances

1. Open .an file
2. Delete symbol's instance from the Stage (ie. “box3”)
3. Remove “elements” array's line that contains “box3” (ie.)

Note: The amount of “box...” symbol instances on Stage and “txt...” symbols in Library must be the same. As defined in array “elements”.

• “box...” symbol instances on Stage: box1, box2, box3, etc.
• “txt...” symbols in Library: txt_1, txt_2, txt_3, etc.

How to change links or Javascript function after click

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: 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 (or badge) > 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

How to change text color

In some projects colors of the text elements 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

Symbols' anatomy in Boxes

BOXES – projects from folder 1.boxes-with-hiders

“box” symbol's elements

In some projects contains animation:

.mouseover animation starts from label named start
.mouseout animation plays same animation in reverse (from last frame to the first)

“curl_ani” symbol's elements:

.mouseover animation starts from label named start
.mouseout animation plays same animation in reverse (from last frame to the first)

To change curl_element or curl_elementShadow color, opacity or corners:

1. Open .an project
2. Open curl_ani symbol from Library (step 1. in image below) with double click on icon
3. Select it (in Elements panel click on the layer with the name - step 2.)
4. From Properties panel:
   • replace Color (step 3.)
   • set Opacity (step 4.)
   • or set Display to Off (step 5.)
   • or set the new Position values (step 6.) - also you can use arrows keys to move element
   • or set rounded Corners (step 7.)

Symbols' anatomy in Badges (SVG)

BADGES – projects from folder 2.badges-with-svg-sprites

“badge” symbol's elements

.mouseover animation starts from label named start
.mouseout animation plays same animation in reverse (from last frame to the first)

Inside SVG files

Keyframes of curl animation in spritesheet

Elements and their CSS references

CSS styles inside SVG

More on CSS in SVG: http://tutorials.jenkov.com/svg/

Tweak elements position in SVG

You might face situations when there's need to tweak badges' shadows or curls' positions a little bit. Just wrap group of elements in <g> tag and do it with translate() function. The example below moves all elements in group shape 1 unit along the x-axis and 2 units along the y-axis:

<g transform="translate(1,2)">

Note

In two BADGES projects (from folder “2.badges-with-svg-sprites”), if you change Stage background color, also you'll have to reflect the changes in these SVG files:

2.05_jagged/badge5.html

badge.svg – change badge stroke color in CSS: #badge {stroke: #ecede9;}

2.11_team/badge11.html

badge_hider.svg – change hider's color in CSS: .badge_hider {fill: #24b296;}

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

Images are taken from Unsplash and pixabay.com websites. Public Domain CC0 license

Icons made by Adam Whitcroft, Elegant Themes, SimpleIcon, Freepik, Picol, Yannick from Flaticon.com. Public Domain CC3 license

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