Script.aculo.us 1.7 Beta with Added Morphing Effects

script.aculo.us 1.7 beta 1 is out and the big new thing is Effect.Morph which allows for CSS style-based effects, and its companion, the Effect.Transform shortcut to set up complex animations in a snap, inspired by Bernie’s Better Animation Class. Effect.Morph: Effect.Morph is added to the pack, along with a nice helpful any_element.morph to go with it. e.g. […]

script.aculo.us 1.7 beta 1 is out and the big new thing is Effect.Morph which allows for CSS style-based effects, and its companion, the Effect.Transform shortcut to set up complex animations in a snap, inspired by Bernie’s Better Animation Class.

Effect.Morph: Effect.Morph is added to the pack, along with a nice helpful any_element.morph to go with it. e.g. here showing both styles to morph elements using the given CSS:

 

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.

The 1.7 beta version also contains the newest Prototype 1.5.0_rc2 library, fresh from SVN, which fixes lots of things. So, get started by downloading from SVN, or use this link to get 1.7.0 beta 1. If you use Ruby on Rails, be sure to grab edge Rails, or the 1-2-prerelease branch, which both include the beta.

Demo | mir.aculo.us | ajaxian

Script.aculo.us, mir.aculo.us, Morphing Effects