Curl Hover Effects

Adobe Edge animation

Description

Boxes vs. Badges (SVG). The differences

How to add more symbol instances

How to remove symbol instances

How to change links or Javascript function after click

How to change text color

Symbols' anatomy in Boxes

Symbols' anatomy in Badges (SVG)

Inside SVG files

Publishing from Edge Animate

SVG files require proper web server MIME-type configuration

Notes

Description

20 Edge Animate projects with subtle curl effect hover animations. Perfectly suitable for website UI elements such as call-to-action buttons, cards, image gallery thumbnail list, social share elements, price badges, profile photos, 'our team' photos list, pricing plans, appstore buttons or other content.

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”.

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”.

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

Text color

clr = "#d3f0ea";

Text color on hover

clr_over = "#ffffff";

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)

hotspot

clickable area, invisible (zero opacity), covers 100% area of the “box”)

curl_ani

symbol with hover animation

shine

symbol with hover animation

txt-container (or “img-container”, or “container”)

content is attached here (might be “txt...” symbols or images from “elements” array)

bckg

box for background

bckg_shadow

the shadow of the box

“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)

hider

“triangle” graphic that hides the content underneath

the color of “hider” is set to be the same as Stage's background color (hider_color variable)

curl_element

“triangle” graphic

you can change it's color, opacity or corners (ie. rounded)

curl_elementShadow

“triangle” graphic

you can change it's color, opacity, corners (ie. rounded) or position relative to curl_element

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)

hotspot

clickable area, invisible (zero opacity), covers 100% area of the “badge”

curl_ani

SVG spritesheet keyframes

shine

symbol with hover animation

txt-container (or “img-container”, or “container”)

content is attached here (might be “txt...” symbols or images from “elements” array)

badge_ani

SVG spritesheet keyframes

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.