**This is an old revision of the document!** ----
====== About the script ====== * Purpose : These scripts will give you a beautiful page transition animation and an optional horizontal page loop * Author : [[https://plus.google.com/+LukasMorawietz|LM13]] * Current Version : 1.0 * Link: ====== Changelog ====== * Version 1.0 (5/7/2014): initial release in wiki ====== How to use the script ====== * Set the main script to the positionchanged event of your container; configure the main script, if you want another bounciness * enable infinte scrolling if you want a page loop, disable it if you don't want to loop through pages * in this container: create a shortcut to the [[script_toggle_animation|Toggle Script]] and set up toggle sripts configuration * one click on the shortcut will enable the animation, clicking again will disable the animation. * BE SURE TO DISABLE THE ANIMATION BEFORE YOU EDIT, MOVE OR ADD ITEMS! //please report all bugs in the g+ community!// ====== Main Script ====== <code>var d=LL.getEvent().getContainer(); var cont= JSON.parse(d.getTag()||"null"); if(cont==null || !cont.setup || d.getPositionScale()!=1)return; var dwidth=d.getWidth(); var dheight=d.getHeight(); var dposx=d.getPositionX(); var dposy=d.getPositionY(); var current=Math.floor(dposx/dwidth); var pagepos=current*dwidth; var percent=(dposx-pagepos)/dwidth; var items=d.getItems(); var l=items.getLength(); var maxpage=Math.floor((cont.maxx-dwidth)/dwidth); if((percent>0.005 && percent<99.995) && dposx>cont.minx-dwidth) { var scrollLimit=d.getProperties() .getBoolean("noScrollLimit"); if(dposx>cont.maxx-dwidth&&scrollLimit){ d.setPosition(cont.minx-dwidth,dposy,1,false); } if(dposx<cont.minx&&scrollLimit) cont.state=true; for(i=0;i<l;i++) { item=items.getAt(i); var pinned=item.getProperties() .getString("i.pinMode"); var data=JSON.parse(item.getTag()); if(pinned=="NONE"|| pinned=="Y") { var page=Math.floor(data.posx/dwidth) if(page==current||(cont.state && page==maxpage)) { item.setRotation(90*percent+data.rot); var c0=center(item,data.rot); var x=((data.posx+c0[0])%dwidth+ dwidth)%dwidth; var y=((data.posy+c0[1])%dheight+ dheight)%dheight; var sqrt=Math.sqrt(Math.pow(x,2) +Math.pow(y,2)); var angle=((x==0&&y==0)?0:Math.acos(x/sqrt))+percent*Math.PI/2; var c=center(item,item.getRotation()); item.setPosition(dposx+Math.cos(angle)*sqrt-c[0],dposy+Math.sin(angle)*sqrt-c[1]); } if(Math.floor(data.posx/dwidth) ==current+1) { item.setRotation(90*percent-90+data.rot); var c0=center(item,data.rot); var x=((data.posx+c0[0])%dwidth+ dwidth)%dwidth; var y=((data.posy+c0[1])%dheight+ dheight)%dheight; var sqrt=Math.sqrt(Math.pow(x,2) +Math.pow(y,2)); iwidth=item.getWidth()*item.getScaleX(); var angle=((x==0&&y==0)?0:Math.acos(x/sqrt))+(percent-1)*Math.PI/2; var c=center(item,item.getRotation()); item.setPosition(dposx+Math.cos(angle)*sqrt-c[0],dposy+Math.sin(angle)*sqrt-c[1]); } } } } else { d.setPosition(dposx,dposy); d.setPosition(dposx<cont.minx?cont.maxx-dwidth:dposx,dposy,1,false); cont.state=false; for(i=0;i<l;i++) { item=items.getAt(i); var data=JSON.parse(item.getTag()); item.setRotation(data.rot); item.setPosition(data.posx,data.posy); } } //r in degree function center(item,r) { r=r*Math.PI/180; var sin=Math.abs(Math.sin(r)); var cos=Math.abs(Math.cos(r)); var w=item.getWidth()*item.getScaleX(); var h=item.getHeight()*item.getScaleY(); return [(w*cos+h*sin)*0.5,(h*cos+w*sin)*0.5]; } </code>
