joonis Logo

KSS Animation and Effects Plugin

This KSS effects plugin is an independent, powerful, flexible and cross-browser effects library. With this plugin you can visualize almost any effect you can think of in an easy way. But see for yourself...

Features

  • Animates any source unit to any target unit
  • Animates from/to a given style class
  • Changes all fixed properties after a given threshold in time
  • RGBA support
  • Applies all opacity rules to IE on page load

Demo

Source of currently used Kinetic Stylesheet
Run some effects...

Styles

#demostyles1

#surprise





#demostyles2
Here we have
some content.

Slide

#slidewrapper { width: auto; height: auto; zoom: 1; overflow: hidden; }
#demoslide

Scroll

This demo has been taken from http://demos111.mootools.net/Fx.Scroll
The Blue Sky
Last Grass
The Naked Tree
The Lonesome Tree



Scroll window to: fxStyles | fxSlide | fxScroll | fxTrail | Top | Bottom | Left | Right

Trail

#demotrail
Title
Some content

Download

  • KSS Animation Plugin (source | compressed) [2015-04-21]
    The entire plugin, including FX library and Kukit plugin.
  • FX library [2013-07-23]
    Plain FX library, based on the animation framework FX 2.0 by Ryan Morr.
    Can be used standalone as described on his website.
  • KSS Kukit plugin [2015-04-21]
    The plain client side kukit plugin.
  • Mootools syntax converter [2010-10-07]
    Converts the kss syntax of the previous Mootools plugin to the new one.
    This allows you to switch to the new plugin without modifying all your kss rules.

Documentation

Settings properties

  • duration

    The duration of each sequence in milliseconds (default: 750)

  • transition

    The transition of each sequence: linear, sineIn, sineOut, sineInOut (default), quadIn, quadOut, quadInOut, cubicIn, cubicOut, cubicInOut, quartIn, quartOut, quartInOut, quintIn, quintOut, quintInOut, powIn, powOut, powInOut, expoIn, expoOut, expoInOut, circIn, circOut, circInOut, backIn, backOut, backInOut, elasticIn, elasticOut, elasticInOut, backIn, backOut, backInOut, bounceIn, bounceOut, bounceInOut

  • threshold

    The threshold for each sequence, when fixed style properties will be changed (between 0 and 1, default: 0.5)

  • behaviour

    ignore (default), abort, queue, combine

  • history

    Only interesting when smoothly scrolling the body (default: false)

  • repeat

    Will repeat the entire animation (default: 0)

  • delay

    The delay of starting the animation in milliseconds (default: 0)

  • fps

    Frames per seconds for each sequence (default: 50)

Style properties

Any other property will be handled as a usual style property. There are also three special properties:

  • scrollLeft

    Animates the horizontal scroll position; numerical value or selector

  • scrollTop

    Animates the vertical scroll position; numerical value or selector

  • className

    Animates to a given style class

Parameter provider methods

  • list( arg1[, arg2[, arg3[, argN]]] )

    A list of arguments instead of a space separated string

  • calc( arg1, arg2, arg3[, argN] )

    Simple calculator. Requires three or more arguments. At least one of them must be an operator of (+-*/).

  • getStyle( property[, selector] )

    The style value of the current node or the node found for the given selector.

  • offsetWidth( [selector] )

    The width (including borders) of the current element or the element found for the given selector.

  • offsetHeight( [selector] )

    The height (including borders) of the current element or the element found for the given selector.

  • offsetLeft( [outerSelector[, innerSelector]] )

    The horizontal offset of the current node to its offsetParent or up to the node found by outerSelector. If outerSelector and innerSelector is given, the offset between these two elements.

  • offsetTop( [outerSelector[, innerSelector]] )

    The vertical offset of the current node to its offsetParent or up to the node found by outerSelector. If outerSelector and innerSelector is given, the offset between these two elements.

Todo

Limitations

  • The history flag does not work for IE6 and IE7.
  • Opera does not calculate the backgroundPosition correctly if initially set on a percentage basis within stylesheets. Only the first animation sequence will be affected. Workaround: First animation sequence should be set immediately (duration=0).

Can I
  help you?


Just drop me a line at
giraffe@joonis.de