Integrating 3rd party effect libraries like a breeze.
ZK's flexible client side programming model enables developers to leverage existing libraries to achieve dazzling visual effects.

In this simple image gallery demo, we use the GSAP animation library.

<zk xmlns:x="xhtml" xmlns:w="client" xmlns:ca="client/attribute">	
	<!-- Client Programming : JQuery Zoomer Gallery -->
	<style src="/widgets/effects/image_zoomer/styles.css"/>

	<script src="/widgets/effects/image_zoomer/ext/TweenLite.min.js"/>
	<script src="/widgets/effects/image_zoomer/ext/TimelineLite.min.js"/>
	<script src="/widgets/effects/image_zoomer/ext/CSSPlugin.min.js"/>
	<script src="/widgets/effects/image_zoomer/ext/EasePack.min.js"/>
	<script src="/widgets/effects/image_zoomer/animations.js"/>

	<!-- uses defined animations flyInChildren, zoomIn, zoomOut, spinOnce from animations.js -->
	<div width="700px" height="350px" sclass="gallery" w:onAfterSize="flyInChildren.call(this.$n());">
		<forEach begin="1" end="12">
			<div sclass="imageDiv" w:onBind="jq(this).hover(zoomIn, zoomOut).click(spinOnce);">
				<image src="/widgets/effects/image_zoomer/img/${each}.png" width="100%" height="100%"/>				
			</div>
		</forEach>
	</div>			
</zk>

<hlayout xmlns:w="client">
	<label value="Animation Speed : " />
	<radiogroup>
		<radio label="Slow" value="0.5" w:onCheck="setAnimationSpeed(this.getValue());"/>
		<radio label="Normal" value="1.0" w:onCheck="setAnimationSpeed(this.getValue());" checked="true"/>
		<radio label="Fast" value="2.0" w:onCheck="setAnimationSpeed(this.getValue());"/>
	</radiogroup>
</hlayout>

var animationSpeed = 1.0;
function setAnimationSpeed(factor) {
	animationSpeed = factor;
}

/* simple animation functions implemented using the GSAP animation library */
function flyInChildren() {
	new TimelineLite().staggerFrom(this.children, 1.0, {
		opacity: 0.0, y: '+=150', scale: 0.3, 
		rotation: 180, rotationY: 200, delay: 0.1}, 0.1);
}
function zoomIn() {
	TweenLite.to(this, 0.2 / animationSpeed, {ease: Back.easeOut.config(3.0), scale:1.7, zIndex: 100});
}
function zoomOut() {
	TweenLite.to(this, 0.3 / animationSpeed, {scale:1, zIndex: 0});
}
function spinOnce() {
	TweenLite.to(this, 1.0 / animationSpeed, {ease: Back.easeOut.config(3.0), rotation: '+=360'});
}

.gallery {
	margin: 30px 80px;
}

.imageDiv {
	display: inline-block;
	position: relative;
	width: 125px;
	height: 75px;
	margin: 30px 30px 0 0;
	border: 3px solid #DDDDDD;	
}