Animation in Xages - Blink the Name and Animate an Element

Animation is not a complex thing in Xpage,

We can change the style of an element continuously.

But seeking in Javascript Tween is not working on Xpages,

So we have an ideal thought of changing the style of an element is one of the nice way...

copy and paste the below code on your Xpage's source...


<xp:view id="page" xmlns:xp="http://www.ibm.com/xsp/core"
createForm="false" style="color:rgb(0,0,160)">


<xp:this.afterPageLoad><![CDATA[#{javascript:sessionScope.val=1}]]></xp:this.afterPageLoad>
<xp:label value="Ramkumar" id="label1"
style="font-weight:bold;font-size:20pt">
</xp:label>

<xp:eventHandler event="onClientLoad" submit="false">
<xp:this.script><![CDATA[var t = 1;
var flag;

function doMove() {

t = t + 1;
if ((t % 2) == 0) {
document.getElementById("#{id:label1}").style.color = "blue";
document.getElementById("#{id:label1}").style.postion = "absolute";
document.getElementById("#{id:label1}").style.left = "50px";
flag = setTimeout(doMove, 1000);

}

else {
document.getElementById("#{id:label1}").style.color = "red";
document.getElementById("#{id:label1}").style.postion = "absolute";
document.getElementById("#{id:label1}").style.left = "100px";
flag = setTimeout(doMove, 1000);
}

}


doMove();





]]></xp:this.script>
</xp:eventHandler>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:span
style="font-weight:bold;color:rgb(255,0,0);font-size:20pt">
</xp:span>
<xp:span
style="font-weight:bold;color:rgb(255,0,0);font-size:20pt;position:absolute;left:20px;top:250px">
</xp:span><xp:span style="font-weight:bold;color:rgb(249,23,215);font-size:20pt;position:absolute;left:20px;top:250px">SAMPLE ANIMATION IN XPAGE, Thing is changing the style
contiuously...
</xp:span>
<xp:br></xp:br>
<xp:br></xp:br>
<xp:br></xp:br>

<xp:br></xp:br>
<xp:br></xp:br>
</xp:view>