JASE V 4.0
Loading...
JASE V 4.0

Jmation

PACMAN was to blame...

...would be a good answer to the question "Why did you come up with jmation?".

Im a browsergame developer for many many years. Actually im a pretty old "nerd". I've startet with Actionscript 1.0, than 2.0, 3.0 to the day Apple said "NO". Flash is outdated since. Javascript isn't that bad for coding games, but it has it's quirks.
A lot of pretty good Javascript snippets and frameworks on their way thru internet. But even JQuery (which is really the best) don't work properly for my needs.
Jmation erect a bridge between JQuery Animate and Actionscript.
One of the most important, but missing in Javascript, function is onEnterFrame. If you ever worked with Actionscript, you know what i mean. For all others, a short explanation.

onEnterFrame

Is an interval that runs forever until you stop it. "Well, thats the same like setInterval and clearInterval" you say?
Yes but there is more. Attach setIntervals to several elements and look what your CPU's doing. It begs for mercy. Plus it's intricate and hard to set any type of precise frametime for each browser.
Jmation's onEnterFrame does this pretty good. Take a look: 

 
Object.onEnterFrame([FUNCTION],[NUMBER:FRAME PER SECOND]);
Object can be any element or Object. 

 
var o={paramA:1,paramB:100}
o.onEnterFrame(function(o){o.paramA++;
	 o.paramB--;
	});
or 

 
document.getElementById('mydiv').onEnterFrame(function(o){o.style.width=(o.offsetWidth+1)+'px';
	});
onEnterFrame expects two parameters
  1. ) Your function
  2. ) Frames per second. This is optional. Default is 24.
Your function will be called as your fps (frames per second) is setted.
With the default of 24 this 

 
document.getElementById('mydiv').onEnterFrame(function(o){alert('Function called');
	});
would be fire alert('Function called'); 24 times in a second. 

 
document.getElementById('mydiv').onEnterFrame(function(o){alert('Function called');
	},1);
would be fire alert('Function called'); once per second.

Your function comes back with one parameter. This (your object or element). But it also adds some information to your object.

  1. "Object.prz" Percentage (0-100) of frames running within a second. E.g. fps 24: Object.prz=100/24*Object.frame
  2. "Object.frame" As explained, the current frame out of fps
  3. "Object.frames" Amount of frames since start
  4. "Object.loops" How many times your function has been called

deleteOnEnterFrame

And deleteOnEnterFrame to stop everything and clear the interval 

 
document.getElementById('mydiv').deleteOnEnterFrame();

Wanna see it in action?

CLICK

JMATION itself

Let's animate
Jmation is pretty similar to JQuery's animate.
CLICK

 
<div style="position:relative;
 overflow:hidden;
 width:40%;
 height:80px;
 line-height:80px;
 font-size:30px;
 text-align:center;
 background-color:#00FF00;
 color:#990000;
 cursor:pointer;
" 
onclick="this.jmation({left:[0,'60%'],flip3Dx:[0,360],bgcolor:['#00FF00','#990000'],color:['#990000','#00FF00'],html:['CLICK','AGAIN'],time:1000});
"
>CLICK</div>

More examples

Click the green box to move it top and left with bounceout
 

 
<div style="position:relative;
 overflow:hidden;
 width:30%;
 height:100px;
 background-color:#00FF00;
 cursor:pointer;
" onclick="this.jmation({left:[0,'70%'],top:[0,200],ease:'bounceout'});
">&nbsp;
</div>
Click the green box to resize in width and height with elasticinout
 

 
<div style="position:relative;
 overflow:hidden;
 width:30%;
 height:100px;
 background-color:#00FF00;
 cursor:pointer;
" onclick="this.jmation({left:[0,'70%'],top:[0,200],ease:'bounceout',time:2000});
">&nbsp;
</div>
Click the green box to scale it to 90% with stronginout
 

 
<div style="position:relative;
 overflow:hidden;
 width:30%;
 height:100px;
 background-color:#00FF00;
 cursor:pointer;
" onclick="this.jmation({scalex:[30,90],ease:'stronginout',time:2000});
">&nbsp;
</div>
Click the green box to scale it horizontal only to 90% with easenone
 

 
<div style="position:relative;
 overflow:hidden;
 width:30%;
 height:100px;
 background-color:#00FF00;
 cursor:pointer;
" onclick="this.jmation({scalex:[30,90],ease:'easenone',time:2000});
">&nbsp;
</div>
Last example MATRIX HTML EFFECT
Click on the text below
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 

 
<div 
onclick="
if(this.hasclicked){this.hasclicked=false;
	  var txt='Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.';
	}else{
	this.hasclicked=true;
	 var txt='Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat.'
	}
this.jmation({html:txt,ease:'easenone',time:2000});
" style="position:relative;
 padding:16px;
 width:100%;
  background-color:#CCCCCC;
 cursor:pointer;
">
Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 
</div>
Jmation expects an OBJECT as parameter.
(  document.getElementById('yourelementtoanimate').jmation([OBJECT]);  )

Possible object keys

Moves
  • top:[FROM (numberorstring),TO (numberorstring)] or top:TO (numberorstring)
    Values from and to can be just numbers (Position as pixel), or strings. E.g. ('60%'). If you're giving the TO value only, Jmation uses the current state as FROM. You can mix up px and %.
    ['50%',200] From 50% to 200px
    [100,'20%'] From 100px to 20%
  • left:[FROM (numberorstring),TO (numberorstring)] or left:TO (numberorstring)
    Use values as described in [top:]
  • width:[FROM (numberorstring),TO (numberorstring)] or width:TO (numberorstring)
    Use values as described in [top:]
  • height:[FROM (numberorstring),TO (numberorstring)] or height:TO (numberorstring)
    Use values as described in [top:]
  • scale:[FROM (NUMBERS ONLY 0-100),TO (NUMBERS ONLY 0-100)] or scale:TO (NUMBERS ONLY 0-100)
  • scalex:[FROM (NUMBERS ONLY 0-100),TO (NUMBERS ONLY 0-100)] or scalex:TO (NUMBERS ONLY 0-100)
  • scaley:[FROM (NUMBERS ONLY 0-100),TO (NUMBERS ONLY 0-100)] or scaley:TO (NUMBERS ONLY 0-100)
  • rotate:[FROM (degree [NUMBERS ONLY]),TO (degree [NUMBERS ONLY])] or rotate:TO (degree [NUMBERS ONLY])
    If there is given TO only, FROM is 0 as default
  • opacity:[FROM (0 [NUMBERS ONLY]),TO (100 [NUMBERS ONLY])] or opacity:TO (NUMBER [NUMBERS ONLY])
    If there is given TO only, FROM is 0 as default
  • flip3Dx:[FROM (degree [NUMBERS ONLY]),TO (degree [NUMBERS ONLY])] or flip3Dx:TO (degree [NUMBERS ONLY])
    If there is given TO only, FROM is 0 as default
  • flip3Dy:[FROM (degree [NUMBERS ONLY]),TO (degree [NUMBERS ONLY]] or flip3Dy:TO (degree [NUMBERS ONLY])
    If there is given TO only, FROM is 0 as default
  • flipx:[FROM (degree [NUMBERS ONLY]),TO (degree [NUMBERS ONLY])] or flipx:TO (degree [NUMBERS ONLY])
    If there is given TO only, FROM is 0 as default
  • flipy:[FROM (degree [NUMBERS ONLY]),TO (degree [NUMBERS ONLY])] or flipy:TO (degree [NUMBERS ONLY])
    If there is given TO only, FROM is 0 as default
Colors
  • bgcolor:[FROM (STRING [HEX, RGB or RGBA]),TO (STRING [HEX, RGB or RGBA])] or bgcolor:TO (STRING [HEX, RGB or RGBA])
    Changes the backgroundcolor. If there is given TO only, FROM is current backgroundcolor
  • color:[FROM (STRING [HEX, RGB or RGBA]),TO (STRING [HEX, RGB or RGBA])] or color:TO (STRING [HEX, RGB or RGBA])
    Changes the color (TEXT). If there is given TO only, FROM is current color
Effect
  • html:[FROM (STRING INNERHTML),TO (STRING INNERHTML)] or html:TO (STRING INNERHTML)
    Changes the innerHTML using something similar to the MATRIX Movie effect. If there is given TO only, FROM is current innerHTML
Type (Optional)
  • time:NUMBER (duration in milliseconds) Default is 800
  • ease:[STRING of EASINGTYPE] Default is 'regularinout'
EASINGTYPES
  • "backease" or "backeasein" or "backeaseout" or "backeaseinout"
  • "easenone" or "easein" or "easeout" or "easeinout"
  • "strong" or "strongin" or "strongout" or "stronginout"
  • "regular" or "regularin" or "regularout" or "regularinout"
  • "elastic" or "elasticin" or "elasticout" or "elasticinout"
  • "bounce" or "bouncein" or "bounceout" or "bounceinout"
FUNCTIONS
  • "animation:" FUNCTION(return NUMBER [progress percentage],OBJECT [yourelent]) While animation is in progress
    Example:
    document.getElementById('mydiv').jmation({left:100,animation:function(percentage){this.innerHTML='I am on '+percentage+'% of animation';}});
  • "finish:" FUNCTION(return NUMBER [progress percentage],OBJECT [yourelent]) When animation has finished
    Example:
    document.getElementById('mydiv').jmation({left:100,finish:function(percentage){this.innerHTML='I am done with '+percentage+'% of animation';}});

Animate.css

Thanks to Daniel Eden.

Animate.css

A css file including transitions to animate elements with pure css. (Modern browsers only)
No need to download and add animate.css within documents head. Jmation does this automatically or by call. E.g. 

 
<div data-scrollaniIn="fadeInDown"></div>
loads animate.css automatically.
If you're not using data-scrollaniIn or data-scrollaniBoth, but using 

 
<script type="text/javascript">
J('.query').ANICSS('fadeInDown');
//or
J('.query').JOJOCSS('fadeInDown','fadeInLeftBig');
</script>
Than you need to load animate.css by calling 

 
<script type="text/javascript">
J('body').LOADED(function(){loadAniCss();
	});
</script>

List of Animationtypes

All

ANICSS

Click on the buttons below to see what happens with this lines

ANICSS

ELEMENT.ANICSS([STRING (animationtype)]); 

 
<script type="text/javascript">
J('#anicsstypes').ANICSS('fadeInLeft');
</script>

JOJOCSS

Click on the buttons below to see what happens with this lines

JOJOCSS

ELEMENT.JOJOCSS([STRING (start animationtype)],[STRING (end animationtype)],[NUMBER (milliseconds to add end animationtype)]); 

 
<script type="text/javascript">
J('#jojocsstypes').JOJOCSS('fadeInLeft',false,2000);
</script>
Second argument can be false as well (as i did). In that case Jmation replace it with the opposite of first argument (if available).
E.g. Opposite to "fadeInLeft" is "fadeOutRight". "Hinge" and some others don't has an opposite.

data-scrollaniIn / data-scrollaniBoth

scrollaniIn


 
&lt;
div data-scrollaniIn="fadeInLeftBig">&lt;
/div>




 
&lt;
div data-scrollaniIn="fadeInRightBig|300">&lt;
/div>

scrollaniBoth


 
&lt;
div data-scrollaniBoth="fadeInLeftBig|||200">&lt;
/div>




 
&lt;
div data-scrollaniBoth="fadeInRightBig||400|200">&lt;
/div>

Arguments

Both, scrollaniBoth and scrollaniIn requires a string seperated by PIPE (|) as argument. Instead of "false" for a argument part, leave blank (||) as i did in the examples.

Argumentparts for data-scrollaniIn

  1. Animationtype [STRING] must be given
  2. Distance to window bottom [NUMBER (PIXEL)] Default is 0. This defines, when animation starts. (Element hits window bottom - distance)

Argumentparts for data-scrollaniBoth

  1. Animationtype for IN [STRING] must be given
  2. Animationtype for OUT [STRING]. Opposite of IN is default if not setted and if available.
  3. Distance to window bottom [NUMBER (PIXEL)] Default is 100. This defines, when animation starts with IN. (Element hits window bottom - distance)
  4. Distance to window top [NUMBER (PIXEL)] Default is 100. This defines, when animation starts with OUT. (Element hits window top + distance)

SHOW and HIDE

Similar to Jquerys show and hide function. To avoid errors (when using JQuery too), Jmation's SHOW and HIDE is fully capitalized

Example

I am ELEMENT A
CLICK ME TO HIDE AND SHOW ELEMENT B

What actually happens is this

HIDE()

myelement.jmation({opacity:[100,0],time:500,finish:function(){this.style.display='none';}});

SHOW()

myelement.style.display='block'; myelement.jmation({opacity:[0,100],time:500});

Examplecode


 
<div id="elA" 
onclick="this.HIDE();
 document.getElementById('elB').SHOW();
"
 style="background-color:#00CC00;
 color:#FF0000;
 cursor:pointer;
 padding:20px;
 text-align:center;
 font-size:20px;
 line-height:20px;
">
<b>I am ELEMENT A</b><br />
CLICK ME TO HIDE AND SHOW ELEMENT B
</div>
<div id="elB" 
onclick="this.HIDE();
 document.getElementById('elA').SHOW();
"
 style="color:#00CC00;
 display:none;
 background-color:#FF0000;
 cursor:pointer;
 padding:20px;
 text-align:center;
 font-size:20px;
 line-height:20px;
">
<b>I am ELEMENT B</b><br />
CLICK ME TO HIDE AND SHOW ELEMENT A
</div>

Hide and show multiple elements at once

Click one of us to hide us blue elements all
But i will stay. Click me to show my blue buddys again
Click one of us to hide us blue elements all
Click one of us to hide us blue elements all
But i will stay. Click me to show my blue buddys again
Click one of us to hide us blue elements all
Click one of us to hide us blue elements all
Click one of us to hide us blue elements all
But i will stay. Click me to show my blue buddys again
Click one of us to hide us blue elements all
Click one of us to hide us blue elements all
But i will stay. Click me to show my blue buddys again
To hide or show multiple elements, you have to use the J function.
Jquery has the $('.classname'), and Jase the J('.classname). Both are similar but absolutely not the same. Please read more about J FUNCTION under Jase. !NEVER EVER COMBINE THEM. Use either JQuery OR Jase to hide or show elements Jase works perfectly with Jquery and standalone as well.

Hide or show multiple elements


 
J('.yourclassname').HIDE();
Will hide all elements with the classname "yourclassname". 

 
J('.yourclassname').SHOW();
Will show all elements with the classname "yourclassname".
!NOTICE! Set all elements you want to show to display:none by yourself

How to change time or easing


 
J('.yourclassname').SHOW({time:2000,ease:'bounce'});
or 

 
J('.yourclassname').HIDE({time:2000,ease:'elastic'});
Read about time and ease above under jmation Type

WIPE

...your tears away
WIPE is another jmation function that makes it alot easier to wipe or drag things.

Some examples (Wipe the gallery below, drag the green box and move the slide control)

Image Image Image Image
Drag me

Slider

Slide me

All done with only a short line of code for all 3 elements


 
<script type="text/javascript">J('.galer').WIPE();
</script>
I gave the gallery, the dragger and the slider the same classname "galer". Thats it. And that's how it works:

The Gallery

In this case i've setted the galer element to the exact height of its parent element and set its position to absolute.
It's four images in a row, so i've setted the galer element width to 400% (of course the images by themself have 100% width (for responsive).
WIPE recognize that there is nothing to drag vertical (same height), but horizontal. Plus the element to drag is bigger than it's parent element.
I've not given a parameter, so wipe drags stepwise. (Below we are talking about parameters). This works on horizontal and vertical as well.

Green box

Box has galer as classname and has a smaller height and width than it's parent. No parameters given, so WIPE set the border automtically.

Slider

Sliderbutton has galer as classname and has the exact height as it's parent element. So there is no vertical drag.

Let's talk about arguments (params)

You may call WIPE with an object (myelement.WIPE({OBJECT})
This object will be also available during dragging by call "myelement.object[KEY]"

Walk thru object keys

  • "l:" horizontal minimum (default 0) Can't drag less than that horizontally
  • "r:" horizontal maximum (default element parent width - element width or the other way if element is broader) Can't drag more than that horizontally
  • "t:" vertical minimum (default 0) Can't drag less than that vertical
  • "b:" vertical maximum (default element parent height - element height or the other way if element is heigher) Can't drag more than that vertical
  • "bystep:" [BOOLEAN] true or false. true has no effect if element is smaller than parent element. Default is true if element is bigger, false if element is smaller.
  • "onDrag:" [FUNCTION] called while dragging and returns an object with current informations. Read more below under FUNCTIONRETURNS
  • "finish:" [FUNCTION] called when dragging has stopped (mouse of finger up) and returns an object with current informations. Read more below under FUNCTIONRETURNS
  • "ease:" [STRING] (like described under jmation) Only if bystep is true. Easingtype of sliding to right position when drag is finished
  • "time:" [NUMBER] (like described under jmation) Only if bystep is true. Time of sliding to right position when drag is finished

FUNCTIONRETURNS

onDrag and finish comes back with an object. E.g {onDrag:function(object){dosomething}}
This object has the following keys
  • "targetx:" element.offsetLeft
  • "targety:" element.offsetTop
  • "mousex:" current or last horizontal mouseposition
  • "mousey:" current or last vertical mouseposition
  • "mousestartx:" horizontal mouseposition when dragging began
  • "mousestarty:" vertical mouseposition when dragging began
  • "xperc:" Number of percentage (0-100) of current element.offsetLeft according [OBJECT.l (horizontal minimum)] and [OBJECT.r (horizontal maximum)]
  • "yperc:" Number of percentage (0-100) of current element.offsetTop according [OBJECT.t (vertical minimum)] and [OBJECT.b (vertical maximum)]
  • "currenthorizontalstep:" [NUMBER] only if bystep is true. Returns the current Number position horizontally. E.g. the gallery above. First image 0, second 1, third 2 and so on (if you want to add an "Image Number of" thing.
  • "currentverticalstep:" [NUMBER] only if bystep is true. Same as currenthorizontalstep, but vertical.

Short example with a slider again

Slide me
Slide me
Slide and see what comes out here:

The script


 
<script type="text/javascript">
var sliderout=J('#sliderout');
var obj={
	onDrag:function(o){
		    var htm='';
		    for(var i in o){
			        htm+=i+' = '+o[i]+'<br />';
			    }
		    sliderout.HTML(htm);
		},finish:function(o){
		    var htm='DRAGGING DONE<br />';
		    for(var i in o){
			        htm+=i+' = '+o[i]+'<br />';
			    }
		    sliderout.HTML(htm);
		    }
	}
J('.sliderouts').WIPE(obj);
</script>'

Jscroll

for smooth animated scrolling
CALL: jScroll([TARGET]],[OBJECT[ease[EASEINGTYPE],time[TIME]]]);

TARGET (where to scroll)

This could be a number or the id of the element you want to scroll or just the element itself.
Example


 
<div id="myid">I am on offsety 253</div>
So you may call jScroll in different ways 

 
//BY NUMBER
jScroll(253);
or 

 
//BY ID
jScroll('myid');
or 

 
//BY ELEMENT
jScroll(document.getElementById('myid'));
//or with JASE
jScroll(J('#myid'));

OBJECT (optional)

Object keys
  • "ease:" [STRING] Easingtype (read more under Jmation easingtypes). Default is stronginout
  • "time:" [NUMBER] Time to scroll (read more under Jmation time). Default is 2500 (2.2 seconds)

Useful function

with jmation

rotate


 
rotate([element],[deg[number]]);
Rotates an element by degree. Element can't be undefined and has to be an HTML ELEMENT.
So rotate('mydiv',30); won't work.
Use rotate(document.getElementById('mydiv'),30); instead.

flip3D


 
flip3D([element],[DIRECTION[STRING X or Y]],[DEG[NUMBER]],[FORCEPERPECTIVE[BOOLEAN(default is false]]]);
Flips an element by degree. Element can't be undefined and has to be an HTML ELEMENT.
So flip3D('mydiv','X',30); won't work.
Use flip3D(document.getElementById('mydiv'),'X',30); instead.
Direction must be 'X' or 'Y'.
'X' flips your element along the x axis, and Y along the y axis. (Which can be confusing. But thats how CSS works)

FORCEPERPECTIVE is optional and have to set as 1 or true if needed
Perspective is always calculated by the parent element. If there is no way to calculate (e.g. parent element is to small, to big, has the wrong position etc.) you may set this to true. Otherwise it skips perpective and your just using regular flip. Pretty experimental. So set your elements the right way to avoid issues.

intervalset


 
intervalset([MILLISECONDS[NUMBER]],[FUNCTION WHILE (optional)],[FUNCTION END  (optional)]);
Like setInterval but clears itself. PLUS it's crossbrowser precise
Example or regular setInterval 

 
var t=0;
var interv=setInterval(function(){
	    //do something while running
	    t++;
	    var percentage=Math.round(100/100*t);
	    if(percentage>100){clearInterval(interv);
		    //do something on end
		    }
	},10)
Works, but you have to set date Types to get a precice duration for any browser.
Use intervalset and you don't have to take care for anything 

 
intervalset(5000,function(perc){//do something while running with perc (NUMBER from 0 - 100))
	},function(perc){//do something on end. perc is 100 and duration was exact 5 seconds
	});

regflip


 
regflip([element], [VALUE[STRING] rotateX(20deg)]);
Flips an element by valuestring. Element can't be undefined and has to be an HTML ELEMENT.
So regflip('mydiv','rotateX(20deg)'); won't work.
Use regflip(document.getElementById('mydiv'),'rotateX(20deg)'); instead.
VALUE must be 'rotateX([NUMBEROFDEGRESS]deg)' or 'rotateX([NUMBEROFDEGRESS]deg)'.

Your element will flip without perpective (2D). You can't just a a number of degrees. regflip expects a proper order.
'rotateX([NUMBEROFDEGRESS]deg)' or 'rotateX([NUMBEROFDEGRESS]deg)'.

valback


 
valback([FROM[NUMBER]], [TO[NUMBER], [PERCENT[NUMBER]);
Calculates the value between to numbers (FROM, TO], according to PERCENT (0 - 100).
Also negative numbers are possible. 

 
valback(0, 100, 50);
Result:50 

 
valback(-100, 100, 50);
Result:0 

 
valback(0, 100, 70);
Result:70

easevalback


 
easevalback([FROM[NUMBER]], [TO[NUMBER], [PERCENT[NUMBER],[EASE[STRING]]);
Same as valback but with an optional EASINGTYPE.

 
easevalback(0, 100, 50);
Result:50 and works like valback. No ease is setted 

 
easevalback(-100, 100, 50,'elastic');
Result can be anyting according to ease 'elastic'. But will be 0 at 100%

Apologize my english

That's not my native language. But the domain is american-webdesign.com. Im not american at all. But i almost have only clients from USA. So this domain usually contains demonstration of progress for client's projects. Now that i have a better solution for that, this domain came superfluous. But there is no domain with "Jase" available and i don't want to buy one for a free project. So this domain came back again for Jase.
But there's a contact form. Please use it for any questions. I will answer within 24 hours.

Questions or Job offers

Click to open contactform

Like or share this page