Home
Demos
Sample Applications
Download
Forums
Articles
About
Lollygag Demos — Animation
Animation Effects
Lollygag includes an animation framework based on the popular Scriptaculous framework.
You can take advantage of the Lollygag animation framework to slide windows into view, fade elements,
and highlight changes to a page.
You perform animations by using the Animator widget. For example, the following application
uses an animator widget to apply a sequence of animations to a standard HTML div element.
ShowAnimation.xml Try it!
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="/lollygag/lollygagframework/0_1/lollygag.xsl"?>
<lolly:application
title="Show Animation"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:anim="http://lollygagframework.com/animation"
xmlns:lolly="http://lollygagframework.com/core">
<anim:animator id="anim1" targetId="div1">
<anim:moveby moveX="200" moveY="200" />
<anim:highlight startColor="#eeeeee" />
<anim:fadeout duration="2"/>
</anim:animator>
<div id="div1" style="width:200px;border:solid 1px black;background-color:#eeeeee">
<h1>Hello World</h1>
</div>
</lolly:application>
The animator widget causes the div element to move 200 pixels diagonally, highlight to yellow, and
fade away.
Triggering Animations
The animator widget supports triggers. You can take advantage of triggers to play an
animation when a particular event happens. For example, the following page contains
two links. When you click the first link, the animator animates the first div element. When
you click the second link, the animator animates the second div element.
ShowAnimation.xml Try it!
<?xml version="1.0" encoding="utf-8" ?>
<?xml-stylesheet type="text/xsl" href="/lollygag/lollygagframework/0_1/lollygag.xsl"?>
<lolly:application
title="Show Animation"
xmlns="http://www.w3.org/1999/xhtml"
xmlns:anim="http://lollygagframework.com/animation"
xmlns:lolly="http://lollygagframework.com/core">
<anim:animator id="anim1">
<anim:highlight />
<anim:trigger elementId="lnkApples" eventName="click" />
<anim:trigger elementId="lnkOranges" eventName="click" />
</anim:animator>
<lolly:link id="lnkApples" label="Apples" argument="divApples" />
<lolly:link id="lnkOranges" label="Oranges" argument="divOranges" />
<br />
<br />
<div id="divApples" style="width:200px;border:solid 1px black;float:left">
<h1>Apples</h1>
</div>
<div id="divOranges" style="width:200px;border:solid 1px black;float:left">
<h1>Oranges</h1>
</div>
</lolly:application>
More Demos
