Wednesday, November 22nd, 2006 1.7 beta: Now with Morphing

Category: JavaScript, Library, Prototype, Scriptaculous, UI

Morphing with CSS is all the rage now, and has stepped up to the plate with their 1.7 beta release.

The two main features are:


Effect.Morph is added to the pack, along with a nice helpful any_element.morph to go with it.

E.g. showing both styles to morph elements using the given CSS:


  1. $('morph_example').morph('background:#080;color:#fff');
  3. new Effect.Morph('error_message',{
  4.   style:'background:#f00; color:#fff;'+
  5.     'border: 20px solid #f88; font-size:2em',
  6.   duration:0.8
  7. });

This will start an effect to morph the div element with id error_message smoothly from whatever border-width currently is set, whatever font-size is set (note the currently set font-size must have the same unit, in this case pt), and whatever color is set to the given new values. Because Effect.Morph queries the original values with Prototype’s Element.getStyle API, it doesn’t matter whether these styles are set inline or in an external stylesheet definition. Of course the effect supports all usual options, like duration or transition.


This puppy allows you to chain morphations together via an array of tracks.



  1. // one-shot transformation
  2. // shrink and fade info messages,
  3. // highlight error messages
  4. new Effect.Transform([
  5.   { '#messages':
  6.       'font-size:1px;height:0px;opacity:0' },
  7.   { '#messages li.error':
  8.       'font-size:12px;background:#fee;color:#f00' }
  9. ],{ duration: 1.3 }).play();

Scriptaculous Morphing

Posted by Dion Almaer at 4:59 am

3.6 rating from 29 votes


Comments feed TrackBack URI

Its clever but its a bit jumpy in safari – in fact it doesn’t really ‘morph’ at all….good in flock though.

Comment by nick — November 22, 2006

Hi guys,
I’ve build something similar as a jQuery plugin, when animating using my way you don’t have to keep the units, because the object is cloned and a diff on computedStyle is used to do the transformation. Still alpha and tested only in FF and IE7. Also see the animateClass plugin, which uses the same functionality.

Comment by Paul Bakaus — November 22, 2006

Nick, that is odd… I had no problems viewing it in Safari. It is quite seemless for me. This is very nice.

Comment by Ryan Lowe — November 22, 2006

Oh,, how could I ever have doubted you…

Comment by Mark Guinn — November 22, 2006

It’s great!
I’m waiting for the stable release… :)

Comment by Amon — November 22, 2006

lovely :)

Comment by Chad — November 22, 2006

I read this and thought “ah cool, someone’s morphing between CSS classes” -using CSS-, but not quite. Yet. ;)

The end effect is the same, but what I’d like to see is the use of CSS classes for the effects as discussed here a few weeks back; ie., “morph”, from “” to “li.error”, keep the JS cleaner, and let CSS sit in an actual CSS file where it belongs rather than inline. Parameters would define whether you’re adding, removing or replacing a class name in the transition as well for more complex cases.

Comment by Scott Schiller — November 22, 2006

@ Scott: From the comments on the blog, it looks like CSS class support is something planned.

Comment by Tobie — November 22, 2006

It seems there should be some credit given to for the idea.

Comment by Martin — November 22, 2006

@ Scott & Tobie: Please look at my first entry and the URL given – animateClass is exactly what you are talking about.

Comment by Paul Bakaus — November 22, 2006

scriptaculous was always gud at animations. keep it up man

Comment by Google Logs — November 22, 2006

Scott and others, our Spiffy library has done morphing between classNames for over 3 years now…

Take a look at, search for “Single Page Interfaces”

There’s a video of me demonstrating and presenting the system with a rather heavy dutch accent…

Comment by Lon — November 22, 2006

Nova beta d’scriptaculous, amb efecte Morphing

Via ajaxian m’assabento que ja ha sortit la beta de la versió 7 d’scriptaculous, que incorpora com a gran novetat l’efecte Morphing. Vegeus les demos per més senyes :P

Trackback by Anonymous — November 22, 2006

Leave a comment

You must be logged in to post a comment.