These functions produce Dhtml animations that clip layers so to achieve many interesting effects: for instance, a savvy clipping can produce slices of layers that seem to scroll upward, leftward, rightward, or bottom ward.
Upon demand these slices can also be instructed to slide and reposition themselves so that the slicing process seems to occur in place.

All functions are each a 100% self sufficient set of code - that is, no additional libraries of code are needed.
Since every function has its own test form, by merely clicking the "Trigger Test" button you can immediately have a visual grasping of what each does.
Also, this file is quite likely the most comprehensive and consistent library of this kind (css clipping effects) available to date on the net.

If you do not know what CSS clip properties are, or if you want to test them for educational purposes or to get better acquainted with them, here is a small section for it:

The clipping functions that are featured in this file are a heavy rearrangement derived from functions that originally were meant to work as clippers within the javascript frameset I called ULMA - ULMA clippers, ULMA slicers.
The considerable advantage of this file versions is that, relying these functions no longer on ULMA, each function is, as said, an entirely self sufficient unit of code, and thus each is all you need to produce one given clipping or slicing effect, thus relying on no additional snippets of code.

Caveats:

• You would understand better the rationale behind some choices, if you keep in mind the just declared objective, namely that of having the functions as entirely independent and self sufficient units.
  For instance, this objective accounts for why the codes for the methods named getClip and setClip have been repeated in each single function rather than assigned as global functions to be called back: this latter choice would have added some code manageability I am fully aware of, but would have not made each clipper the 100% self sufficient unit that I wanted it to be.
  
  So, that repetition is not a conceptual optimization mistake: that's meant to provide an intentional feature.
• The clipping methods can be triggered on any amount of layers, also at once.
  Yet, for each given layer, when a clipping method is started, no additional clipping method can be triggered upon this very same layer (it would not run, without yielding errors, also if called either by mistake or intentionally) until the first clipping has not completed its course.
• It is strongly advisable that you invoke these scripts either after the document onLoad or soon before the closing body tag: in fact the functions rely on Javascript properties such as offsetWidth, offsetHeight that any given browser would calculate safely only once a full image of the document has been loaded into its memory.
  Calling them soon before closing the body tag is safe.
• Regardless of what manuals say (and even the W3C), the overflow property has no significance as far as the clipping process is concerned - on no browser.
  However, no clipping would occur onto layers that are not positioned as absolute, in no browser to date (april 2006).
  Thus the functions will impose, when run, a position:absolute style to the layer.
  
  I therefore strongly suggest, in order to see no displacements, that any given layer that you want to clip is nested within another mere container layer (preferably without too many css frills) whose position is set to relative.
  <div style='position:relative'> <!-- mere container layer -->
<div id='foo' style='position:absolute'>layer to clip</div>
</div>
• Each layer that is meant to be clipped must have an ID declared.
• The functions allow to pass parameters that can specify whether you want the clipping to be stopped before completion. By default the functions go on clipping until either the layer has fully disappeared or, in another family of clippers, until the layer has fully appeared.
  If you want the clipping processes to stop at whatever earlier stage, it can be defined by passing parameters (as you'll see).
• If you want to start the clipping process on a layer that is already partially clipped at the start of the animation, this would cause no malfunction. However, you must define this clipping starting setting within the style property of the HTML tag, and not in any external style sheet.
  
  By the way, if by chance you'd like a function that can inspect the css properties of a layer also if they have been set in an external css style sheet (so that, for instance, to read it and then write it dynamically within the tag style property via, say document.getElementById( 'foo' ).style.propertyHere), maybe you want to have a look at the CSS inspector or to the similar method that is present within the DOM inspector.
• Upon running any of these functions onto a layer, the function will create (or recreate, which will cause no problem) a global (that is, window scoped) variable for each layer whose name will be in the shape: layerID_clipper whereas layerID will be the id assigned to the layer.
  Such variables will be Objects, with a set of properties that can be inquired at any time. The most important of such properties are (assuming a layer whose id was 'foo'):  
  • foo_clipper.layer: it is the layer node itself grabbed via getElementById.
  • foo_clipper.id: it is the layer id.
  • foo_clipper.last: a string representing the name of the last clipper function run on it (it might be useful to know).
  • foo_clipper.speed: a number representing the milliseconds assigned to the animation speed.
  • foo_clipper.amount: a number representing the amount that is clipped at each iteration.
  • foo_clipper.size: a number, for the sliced layers, representing the size the slice must have (if the clipper clips top bottom, this size will represent a height, or if the clipper clips left right, this size will be a width).
    
    It defaults to half the width of the layer for the slicers that slice (clip) horizontally and to half the height of the layer for the slicers that slice (clip) vertically.
  • foo_clipper.onExitOptionalFunction: this is a function, crafted by yourself (although there is a default one as you will see) that will be called upon exiting the animation (that is, when the ending condition is met). It can be useful if for instance upon exiting you want the layer to be set to invisible and its clipping values restored to the initial ones. By the way, the css visibility property of a layer will be automatically set to visible every time an animation starts.
  • foo_clipper.stop1: an optional value to determine at which width to stop.
  • foo_clipper.stop2: an optional value to determine at which height to stop.
  • foo_clipper.timer: a variable holding the timer upon which a Javascript setInterval is assigned.
    
    By the way note that in all the codes there is a very ample conditional statement at the beginning of each clip function:
    if(id){//blah blah
    Such statement is evaluated only once per animation, thus its length causes no performance issue.
    In fact such statement, in order to be triggered, verifies the presence of the first argument (named id) passed to the function. But such presence will result as present only at the first iteration because at each subsequent iteration of the animation the function, being recursively called in by setInterval, will be invoked without arguments as very often (though not necessarily always) a call to setInterval requires - you may notice, in this regard, that the linked resource says nothing about passing arguments to the function assigned to the interval, to prove that after all it is considered the default expectation (or at any rate customary) not to pass arguments to function calls performed within setInterval.
  • foo_clipper.stop: a built in function.
  • foo_clipper.setClip: a built in function.
  • foo_clipper.getClip: a built in function.
  • foo_clipper.originalTop: the original top position of the layer.
  • foo_clipper.originalLeft: the original left position of the layer.
  • foo_clipper.originalClip: the original clip of the layer as an array of four numbers:
    [top, right, bottom, left]
• All the function names, as they appear reported in the text forms, are to be considered strictly case sensitive.

All the functions, unless differently stated in their own test forms (or in their codes signatures), take in arguments upon being called as follows (and I remind you, that you'd call them after the document has loaded, or nearby the closing body tag:

• id mandatory.
  This argument must be the id assigned to the layer.
• speed optional, defaults to 100 milliseconds.
  This argument is a number representing the speed in milliseconds of the clipping animation.
• amount optional, defaults to 1 (pixel).
  This argument is a number and determines how many pixels must be clipped at every round of the animation.
• size optional, defaults to half the width or height of the layer.
  This argument is a number and affects only the slicing clippers.
• onExitOptionalFunction optional, defaults to nothing.
  This argument is either number zero to bypass it, or number 1 to use a built in function that upon exiting firstly makes the layer invisible and then restores its original clipping values, or a function crafted by yourself.
  In this last case such function must be passed not as a string (that is, not in between quotes) but as the name of the function without the ending round brackets. If passed as such, this function crafted by yourself will be invoked upon exiting the animation passing to it an argument which will be the object that the function created upon initialization so that you can call from it all the properties such object hold as described above, for instance you could craft a function like:
  <script>

function myFunction(object){//an example custom function
object.setClip( object.originalClip ); //reset!
alert( object.layer.style.visibility );
}

offRL('layerID', 100, 3, 0, myFunction); //offRL is a function name

</script>
</body> <!-- this example to show also that offRL or any other function of this family should be invoked soon before the closing body tag (or onload of the document, or by event reasonably expected to be triggered only when the closing body tag has been already parsed. The function myFunction should not necessarily be described nearby the closing body tag though: only the executions of the functions should, not necessarily their signatures) -->
  For the clippers that make a layer appear, the built in function merely returns false, because I presume that if a layer has been clipped so to make it appear rather than disappear, you do not want it to be to be set to invisible and restored to its original clip values once the process is completed.
• stop1 optional, defaults accordingly to the function.
  This argument is a number that may be used (see the test forms) to determine a stop condition value, upon clipping, different than the default ones.
  
  If you want to bypass this argument, please do not use zero but the Javascript keyword false.
• stop2 optional, defaults accordingly to the function.
  This argument is a number that may be used (see the test forms) to determine a stop condition value, upon clipping, different than the default ones.
  
  If you want to bypass this argument, please do not use zero but the Javascript keyword false.

Here is the first set of the test forms, with also the codes for each tested function.
The function names are as: offTB, offTB2, offBT, offRL, offRL2, offLR, offLRTB, offLRBT, offRLTB, offRLBT, offAll, offAll2 whereas the capital letters are the initials for Top, Bottom, Left, Right and the off prefix means that this family of Dhtml Css clippers makes a layer disappear (clip) in the directions suggested by the capital letters. Such names are strictly case sensitive.

Here is the second set of the test forms, with also the codes for each tested function.
The function names are as: onTB, onTB2, onBT, onRL, onRL2, onLR, onLRTB, onLRBT, onRLTB, onRLBT, onAll, onAll2 whereas the capital letters are the initials for Top, Bottom, Left, Right and the on prefix means that this family of Dhtml Css clippers makes a layer appear (clip) in the directions suggested by the capital letters. Such names are strictly case sensitive.

The only limitation of these scripts is that I have not devised them to start with a clip set to something different than the best fit for the process: that is, since this family of clippers makes the clipped layer appear, upon start the layer clip property is forcibly set to the most shrunk one so that the layer can gradually and dinamically appear from there.

It would have been possible to set parameters that would have allowed different starting offsets (though you can still set stopping parameters) without complicating too much these function, but increasingly significantly the dimensions of the test forms.
A minimal knowledge of javascript would allow you to include this feature by yourself; it would merely need that two new arguments, say start1 and start2 would be added, and then that the object['top'], object['left'], object['bottom'], object['right'] porperties in the function would be arranged so to host those values if present - although it is not likely at all that you would ever need such a feature.
However and besides, passing values to such parameters means that you have understood very well how css clip works, or you may risk to pass values to a css clip property (bottom, top, left or right) that would be inconsistent with your purpose (instance, a start parameter for object['bottom'] bigger than the layer height).

An instance of such customization on the top, bottom pair: function onRL2(id, speed, amount, size, onExitOptionalFunction, stop1, stop2, start1, start2){
//blah bla
object['top']=parseFloat(start1) || object['layer'].offsetHeight/2;
//blah blah
object['bottom']=parseFloat(start2) || object['layer'].offsetHeight/2; A more savvy way would have been to make sure that start2 isn't bigger than the layer offsetHeight - and however for the specific case of onRL2 that it is not bigger than offsetHeight/2.
At any rate, you can see in the function what the expected values would be for any given function's object['top'], object['left'], object['bottom'], object['right'].
If such validation is to be included, also the codes would become a bit lenghtier. I eventually opted out of this feature, leaving it to customization. After all the biggest part of the job is all done, and the default values seem also the most likely one may want.

Here are the slicers. Try the test forms to appreciate immediately the difference: this is one of those cases where an example is worth one thousands words.
The function names are as: sliceBT, sliceTB, sliceRL, sliceLR and they are case sensitive as usual.

In the codes there is something you may like to change, I leave this to you: the property that in the code represents the dimensions of the slice is (at the core stage of the clipping process) clipped onto both edges; however I left the amount of the clipping unchanged, but arguably a more logical thing to do would have been to half it because the layer is at that point clipped twice onto both edges; this property is signed as: object['half']=object['amount'];
which can also be changed without causing problems into:
object['half']=object['amount'] / 2;

Here are the slicers. Try the test forms to appreciate immediately the difference: this is one of those cases where an example is worth one thousands words.
The function names are as: psliceLR, psliceLR2, psliceRL, psliceRL2, psliceTB, psliceTB2, psliceBT, psliceBT2 and they are case sensitive as usual. The leading letter p stands for positioned.

In the codes there is something you may like to change, I leave this to you: the property that in the code represents the dimensions of the slice is (at the core stage of the clipping process) clipped onto both edges; however I left the amount of the clipping unchanged, but arguably a more logical thing to do would have been to half it because the layer is at that point clipped twice onto both edges; this property is signed as: object['half']=object['amount'];
which can also be changed without causing problems into:
object['half']=object['amount'] / 2;