Tag Archives: Animation in HTML5

In HTML 5, there are many techniques to create the animation on your web page such as Canvas CSS3, SVG and WebGL. The element that allows us to build the dynamic graphs, 2D shapes, bitmap images and animation using the JavaScript.

See the Demo and Source code A Simple Example to create the animation in HTML 5

Text animation small to its full size in HTML5

See the Demo.

    <title>Text small to big Animation</title>
       <script type="text/javascript">
       var can, ctx, step = 10, steps = 50;
              delay = 20;
        function init() {
            can = document.getElementById("MyCanvas");
            ctx = can.getContext("2d");
            ctx.fillStyle = "blue";
            ctx.font = "10pt Helvetica";
            ctx.textAlign = "center";
            ctx.textBaseline = "middle";
        function TextSmallToBig() {
            ctx.clearRect(0, 0, can.width, can.height);
            ctx.translate(can.width / 2, can.height / 2);
            ctx.font = step + "pt Helvetica";
            ctx.fillText("Welcome", 0, 0);
            if (step < steps)
                var t = setTimeout('TextSmallToBig()', 20);
<body onload="init();">
          <canvas id="MyCanvas" width="300" height="200">
  This browser or document mode doesn't support canvas object</canvas>

Text Animation in HTML5

You can create text marquee (i.e. scrolling text left to right and right to left on the canvas) and can create a text animation such as text rotation, text highlight etc.

The article demonstrate the following text animations on the canvas. See the Demo.

All example, displays the text “Welcome” in the various animation. In the first example the text “welcome” is scrolling continuously left to right on the other hand in the second example text is scrolling right to left.And in the third example the text spins in starting small and growing to its full size as it spins. The forth animation displays text small to big size.

Examples with code

The below example shows us how to scroll the text left to right on the canvas in HTML5 without using any CSS.

Example 1 – Scrolling text left to right in HTML5

The following example display a similar result to the above method but in this example text scrolls top to bottom.

Example 2 -Scrolling text top to bottom in HTML5

The Following example gives you an idea to scrolling the text on the canvas in HTML 5.

Example 2 -Scrolling text right to left in HTML5

Example 4 -Text rotation in HTML5

Example 5 -Text animation small to its full size in HTML5

The following code example demonstrates how to text fade in and fade out effect on the canvas in HTMl5.

Example 6 – Text fade-in and fade-out in HTML5