Wednesday, November 22nd, 2006
Script.aculo.us 1.7 beta: Now with Morphing
Category: JavaScript
, Library, Prototype, UI, Scriptaculous
Morphing with CSS is all the rage now, and Script.aculo.us has stepped up to the plate with their 1.7 beta release.
The two main features are:
Morphing
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:
-
-
$('morph_example').morph('background:#080;color:#fff');
-
-
new Effect.Morph('error_message',{
-
style:'background:#f00; color:#fff;'+
-
'border: 20px solid #f88; font-size:2em',
-
duration:0.8
-
});
-
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.
Element.Transform
This puppy allows you to chain morphations together via an array of tracks.
E.g.
-
-
// one-shot transformation
-
// shrink and fade info messages,
-
// highlight error messages
-
new Effect.Transform([
-
{ '#messages li.info':
-
'font-size:1px;height:0px;opacity:0' },
-
{ '#messages li.error':
-
'font-size:12px;background:#fee;color:#f00' }
-
],{ duration: 1.3 }).play();
-
Its clever but its a bit jumpy in safari - in fact it doesn’t really ‘morph’ at all….good in flock though.
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.
Nick, that is odd… I had no problems viewing it in Safari. It is quite seemless for me. This is very nice.
Oh, Script.aculo.us, how could I ever have doubted you…
It’s great!
I’m waiting for the stable release… :)
lovely :)
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 “li.info” 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.
@ Scott: From the comments on the mir.aculo.us blog, it looks like CSS class support is something planned.
It seems there should be some credit given to http://ajaxian.com/archives/animatorjs-animations-using-css for the idea.
@ Scott & Tobie: Please look at my first entry and the URL given - animateClass is exactly what you are talking about.
scriptaculous was always gud at animations. keep it up man
Scott and others, our Spiffy library has done morphing between classNames for over 3 years now…
Take a look at http://plone.org/events/conferences/new-orleans-2003/video, search for “Single Page Interfaces”
There’s a video of me demonstrating and presenting the system with a rather heavy dutch accent…
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