Thomas Fuchs
Hi, I'm Thomas Fuchs. I'm the author of Zepto.js, of script.aculo.us, and I'm a Ruby on Rails core alumnus. With Amy Hoy I'm building cheerful software, like Freckle Time Tracking and Every Time Zone and write books like Retinafy.me.
   Want me to speak at your conference? Contact me!

JavaScript visual effects V2, beta version

May 30th, 2005

So, after some refactoring, renaming and general cleaning-up the Effects V2 stuff I finally declare it beta.

The effects require the Prototype JavaScript library (which is included with Ruby on Rails, but can be used in any web application framework).

UPDATE June 2: This page has demonstrations on the compatibility with various HTML elements

Features:

  • Time-based animation

    All animation is now time-based, not frame based. So, if you tell an effect to last exactly one second, it will do so, regardless of the rendering speed of the browser.
  • FPS settings
    Target frames-per-second option (will fall back to just not-so-many fps on slower computers)
  • Transition modifiers
    • linear
    • sinoidal (eases in/out) [default transition]
    • reverse
    • flicker (randomizes)
    • wobble (well, wobbles)
  • Set of combinable core effects
    • Scale()
    • Opacity()
    • MoveBy()
    • Parallel()
  • Callbacks

    Add your own javascripts with the four callbacks beforeStart, beforeUpdate, afterUpdate and afterFinish
  • Customization

    Lots of customization options with the core effects (namely .Scale)
  • Basic engine options
    • from/to: allows partial runs, (e.g. change an elements opactiy from 75% to 25%)
    • duration
    • fps
    • transition
    • sync (allows to call on rendering manually, used for .Parallel())
  • Powerful ‘prepackaged’ effects

    All these are thought of as examples you can tweak or use as templates for your own
    combinations of the core effects:

    • Fade() and Appear()
    • BlindUp() and BlindDown()
    • SlideUp() and SlideDown()
    • Puff()
    • Shake()
    • SwitchOff()
    • DropOut()

You can have a look at all this on the Effects V2 demo page!

Still missing is a new Version of Effect.Highlight and the “memory” ability of Effect.Scale; these two should be in shortly.

I really hope you’ll be able to add your own effect combinations and come up with cool stuff. Be sure to give to the community and share them!

Have fun.