Before the iPhones and iPads, Flash has been the best cost-effective solution in delivering quality animations in the web. But with the increased popularity of iOS devices with no flash support, the industry is slowly shifting to open standards. Developers mostly rely on Javascript animation libraries for their animation needs. Unfortunately, most of these libraries still have some limitations which XML Timeline Animation Banner would like to address. Check out the features below. It might just be what your looking for.
This uses the power of JQuery to select DOM Elements and Greensock Animation Platform (GSAP) v12 for the really crazy fast animation and sequencing. You can animate almost any CSS property of DOM elements including border, color, percentages, opacity, cool transforms like skewX, skewY, scaleX, scaleY, rotation, x, and y. There are no predetermined CSS parameters in the XML that you need to input. Simply animate only the properties you need to one or more DOM elements.Below is an example showing the css animation.
<body>
<div id="css_animationHolder"> <img id="css_ball" src="assets/rf_circle_logo.gif"/> </div>
</body>
<style>
#css_animationHolder
{
width:500px;
height:678px;
background-color:#FFF;
border:1px solid #E1E1E1;
overflow:hidden;
position:relative;
margin-left:5px;
float:left;
}
#css_ball
{
left:217px;
top:305px;
position:absolute;
}
</style>
XML Timeline Animation Banner is not only limited to DOM Element animation. It also provides a way to tween object properties. You can target a single object or even multiple objects using arrays. This great feature provides a flexible way to animate graphical objects in a Canvas element. Another feature is the ability to tween function-based properties. If you have an object with a function rotation() that gets and sets a value, simply place in the xml:
<tween object='yourObject' rotation='360' duration='1'/>
If you have an object with functions getRotation() and setRotation(), you can also do this
<tween object='yourObject' setRotation='360' duration='1'/>
To further illustrate this feature, check out the example below which uses EaselJS to draw the shapes. To use, simply select in the combo box the shapes you want to rotate. You can use a single shape object, an array of shape objects or a combination of both as targets for you animation.
<data>
<timelineBanner>
<autoPlayHandler jQuery='#multiSizeDemoHolder'/>
<timeline repeat='-1' paused='false'>
<timeline align='sequence' repeat='1'>
<tween jQuery='#waterWave1' duration='2' css='left:-15%' ease='Linear.easeNone'/>
<tween jQuery='#waterWave1' duration='2' css='left:-5%' ease='Linear.easeNone'/>
</timeline>
<timeline align='sequence' repeat='1'>
<tween jQuery='#waterWave2' duration='2' css='left:-5%' ease='Linear.easeNone'/>
<tween jQuery='#waterWave2' duration='2' css='left:-15%' ease='Linear.easeNone'/>
</timeline>
<timeline align='sequence'>
<tween jQuery='.waterBubbles' css='autoAlpha:1, top:105%' />
<tween jQuery='#waterBubble1' css='left:85%' />
<tween jQuery='#waterBubble2' css='left:86%' />
<tween jQuery='#waterBubble3' css='left:87%' />
<tween jQuery='#waterBubble4' css='left:88%' />
<tween jQuery='#waterBubble5' css='left:89%' />
<staggerTo jQuery='.waterBubbles' duration='1' css='top:20%, autoAlpha:0' ease='Linear.easeNone' stagger='0.25' sort='123' />
<tween jQuery='.waterBubbles' css='autoAlpha:1, top:105%' />
<tween jQuery='#waterBubble1' css='left:21%' />
<tween jQuery='#waterBubble2' css='left:22%' />
<tween jQuery='#waterBubble3' css='left:23%' />
<tween jQuery='#waterBubble4' css='left:24%' />
<tween jQuery='#waterBubble5' css='left:25%' />
<staggerTo jQuery='.waterBubbles' duration='1' css='top:20%, autoAlpha:0' ease='Linear.easeNone' stagger='0.25' sort='123' />
</timeline>
<timeline align='sequence'>
<tween jQuery='#fish' css='left:25%, top:25%, zIndex:99' duration='2' ease='Power3.easeOut' />
<tween jQuery='#fish' css='left:60%, top:55%' duration='2' ease='Linear.easeNone' />
<tween jQuery='#fish' css='left:75%, top:25%' duration='2' ease='Power3.easeOut' />
<tween jQuery='#fish' css='left:125%, top:55%' duration='2' ease='Power3.easeIn' />
</timeline>
<timeline align='sequence' repeat='15'>
<tween jQuery='#fishTail' css='rotation:25deg, transformOrigin:100% 50%' duration='0.25' ease='Power3.easeIn' />
<tween jQuery='#fishTail' css='rotation:-25deg' duration='0.25' ease='Power3.easeIn' />
</timeline>
</timeline>
<timelineControl>
<playButton jQuery='#easel_play' enableCss='display:block' disableCss='display:none'/>
<pauseButton jQuery='#easel_pause' enableCss='display:block' disableCss='display:none'/>
<seekBar jQuery='#easel_seekBar'>
<progressBar jQuery='#easel_seekProgress' type='progress'/>
</seekBar>
</timelineControl>
</timelineBanner>
</data>
<script>
var canvas = document.getElementById('easel_canvas'),
shape1,
shape2,
shape3,
shapeArr1,
shape4,
shape5,
shape6,
shapeArr2,
arrBg1,
arrBg2,
c = new Container();
c.x = 30;
c.y = 30;
stage = new Stage(canvas);
stage.addChild(c);
arrBg1 = new Shape();
var g = arrBg1.graphics;
g.beginStroke(Graphics.getRGB(0, 0, 0));
g.setStrokeStyle(1, "round")
g.drawRoundRect(0, 0 ,450, 150, 0, 0);
c.addChild(arrBg1);
arrBg2 = new Shape();
var g2 = arrBg1.graphics;
g2.beginStroke(Graphics.getRGB(0, 0, 0));
g2.setStrokeStyle(1,"round")
g2.drawRoundRect(0, 175, 450, 150, 0, 0);
c.addChild(arrBg2);
shape1 = drawStar(Graphics.getRGB(155, 208, 246), 3, 30);
shape1.x = 75;
shape1.y = 75;
c.addChild(shape1);
shape2 = drawStar(Graphics.getRGB(226, 238, 248), 2, 0);
shape2.x = 225;
shape2.y = 75;
c.addChild(shape2);
shape3 = drawStar(Graphics.getRGB(202, 228, 247), 5, 55);
shape3.x = 375;
shape3.y = 75;
c.addChild(shape3);
shapeArr1 = [shape1, shape2, shape3];
var arrText1 = new Text("shapeArr1", "15px Arial", "#777");
arrText1.x = 475;
arrText1.y = 75;
c.addChild(arrText1);
var text1 = new Text("shape1", "15px Arial", "#777");
text1.x = 50;
text1.y = 140;
c.addChild(text1);
var text2 = new Text("shape2", "15px Arial", "#777");
text2.x = 200;
text2.y = 140;
c.addChild(text2);
var text3 = new Text("shape3", "15px Arial", "#777");
text3.x = 350;
text3.y = 140;
c.addChild(text3);
shape4 = drawStar(Graphics.getRGB(155, 208, 246), 3, 30);
shape4.x = 75;
shape4.y = 250;
c.addChild(shape4);
shape5 = drawStar(Graphics.getRGB(226, 238, 248), 2, 0);
shape5.x = 225;
shape5.y = 250;
c.addChild(shape5);
shape6 = drawStar(Graphics.getRGB(202, 228, 247), 5, 55);
shape6.x = 375;
shape6.y = 250;
c.addChild(shape6);
shapeArr2 = [shape4, shape5, shape6];
var arrText2 = new Text("shapeArr2", "15px Arial", "#777");
arrText2.x = 475;
arrText2.y = 250;
c.addChild(arrText2);
var text4 = new Text("shape4", "15px Arial", "#777");
text4.x = 50;
text4.y = 315;
c.addChild(text4);
var text5 = new Text("shape5", "15px Arial", "#777");
text5.x = 200;
text5.y = 315;
c.addChild(text5);
var text6 = new Text("shape6", "15px Arial", "#777");
text6.x = 350;
text6.y = 315;
c.addChild(text6);
stage.update();
function updateStage()
{
stage.update();
}
</script>
<body>
<div id="easel_canvasHolder">
<canvas id="easel_canvas" width="600" height="385"></canvas>
</div>
</body>
<style>
#easel_canvas
{
margin-top:10px;
}
#easel_canvasHolder
{
width:780px;
height:400px;
background-color:#FFFFFF;
border:1px solid #E1E1E1;
position:relative;
margin:10px auto;
display:block;
text-align:center;
}
</style>
Using timelines, you can offset the insertion point, align animations at the same start time or align them one after the other. You can even set a time that can be added to the start time of each animation. You can even go further by nesting timelines(timeline within a timeline). You can also have multiple banners that have separate controls in one page. If you need to call a function after a tween or timeline event, you can set the onStart, onUpdate, onComplete, onReverseComplete, onRepeat attributes.
Check out the example animation with its corresponding xml.
Using a PC, Mac, Android or IOS Device? No problem. Since it's written in Javascript, it should work on your devices. Standard CSS properties including special transforms like rotation, scaleX, scaleY, scale, skewX, skewY, x, y, transformOrigin will work in all modern browsers even with a classic browser such as Internet Explorer 6. Non-standard CSS properties will depend on browser support. So if your browser supports it, it can be animated.
Users will now have video-like controls (without the buffering) when viewing the animation. Repeat, pause, play or seek(time or label) anytime so your users don't have to miss a thing. You can use labels that are precisely marked in the seek bar so your users will know when the next set of animation begins. All of which can be set in the XML.
You can set multiple banners in one page using one XML. Each banner can have its own timeline sequence and controls.
One xml can be reused in different pages requiring different banner sizes. This can cut cost because there will be no need to rework the same animation with different banner sizes. This can be achieved by using a combination of % based position and size.
ImageSlicer uses CSS to conveniently slice and animate images just by setting the number of rows and columns in the XML. Combined with timeline sequencing, it creates cool image slice transitions.
Most of the time you don't need a banner animation to play when it is not currently visible in the page. With this feature, you can optionally specify to pause the banner animation when not shown in your page. This saves additional processor overhead especially with mobile devices.
This helps attach events to DOM Elements without coding.