Morpher documentation

Morpher allows you to alter one or more CSS properties of an element over time, effectively animating the element.

Example 1

Click me

Click the link above. After 2 seconds this element will be morphed.

<p><a href="#morph1" class="morpher targetEl-morph1 duration-5 delay-2 margin-20 padding-20 color-#C00 fontSize-32px">Click me</a></p>
<div id="example">Click the link above. After 2 seconds this element will be morphed.</div>

Settings

Valid elements

a elements (links)

Classname

morpher

Attributes

None

CSS parameters (what's this?)

targetEl (optional)
The ID of the element to morph. If not set the activated element itself will be morphed.
duration (optional, default = 1 second)
Sets how long in seconds the morph animation should last
delay (optional, default = 0)
Sets the delay after which the target element will be morphed
lineHeight (optional)
Changes the line height of the target element
margin (optional)
Changes the margin of the target element
padding (optional)
Changes the padding of the target element
width (optional)
Changes the width of the target element
height (optional)
Changes the height of the target element
opacity (optional)
Changes the opacity of the target element
fontSize (optional)
Changes the font size of the target element
borderWidth (optional)
Changes the border width of the target element
color (optional)
Changes the text color of the target element

At the moment the background color of the target element cannot be morphed, as this does not work in Google Chrome or Apple Safari browsers. I intend to make this work eventually.