Ways to Create Animation for Web or Mobile

There is a host of ways to create animation for the web or mobile. Below is a list from the simply to the more complex type of animation that are common.

Flash-SWF (Timeline)

While Flash swf animation is not recommended for the web as is used to be, it is still the easiest way to create animation. The drawbacks are that it requires a plug-in and that it is becoming less and less of a format for the web or mobile.

Open Flash and select ActionScript 3 from the Type category and save file as Flash_AS.fla.
With the Rectangle Tool draw a box with a width and height of 100 and place it at the top left corner of the screen.
With the box selected, convert it to a symbol (F8).
Move the playback marker in the Timeline to 30 and then right-click and select Insert Keyframe from the menu.
Hold down the SHIFT key and drag the Box to the right edge of the stage about 10 pixels from the edge.
Right-click in between the two keyframes and select Classic Tween.
Press CTRL+ENTER to preview the animation in a browser.

Flash-ActionScript

You can also create the animation using ActionScript instead of the timeline:

Open Flash and select ActionScript from the Type category and save file as Flash_AS.fla.
With the Rectangle Tool draw a box with a width and height of 100 and place it at the top left corner of the screen.
With the box selected, convert it to a symbol (F8).
Move the playback marker in the Timeline to 30 and then right-click and select Insert Keyframe from the menu.

Open the Actions panel (F9) and write the following code:

myBox.addEventListener(Event.ENTER_FRAME, moveBox)
function moveBox(eventObject:Event):void
{ myBox.x = myBox.x + 20;}

Press CTRL+ENTER to preview the animation in a browser.

Flash-HTML (Canvas)

However, Flash can still be used to create animation the can be saved as HTML with a canvas tag.

Open Flash and select HTML5 Canvas from the Type category and save file as Flash_HTML.fla.
With the Rectangle Tool draw a box with a width and height of 100 and place it at the top left corner of the screen.
With the box selected, convert it to a symbol (F8).
Move the playback marker in the Timeline to 30 and then right-click and select Insert Keyframe from the menu.
Hold down the SHIFT key and drag the Box to the right edge of the stage about 10 pixels from the edge.
Right-click in between the two keyframes and select Classic Tween.
Press CTRL+ENTER to preview the animation in a browser.

NOTE: If you examine the folder that the fla was created in, you see two additional files, Flashswf.html which is an HTML file with the createjs JavaScript library in it and the HTML5 <canvas> tag used in the <body> tag. You will also see another file named flash_swf.js. This is the file that is used to create the animation based on the createjs framework.

Flash-WebGL

You can also use Flash to create a WebGL version of the animation.

Open Flash and select WebGL (Preview) from the Type category and save file as Flash_WebGLf.fla.
With the Rectangle Tool draw a box with a width and height of 100 and place it at the top left corner of the screen.
With the box selected, convert it to a symbol (F8).
Move the playback marker in the Timeline to 30 and then right-click and select Insert Keyframe from the menu.
Hold down the SHIFT key and drag the Box to the right edge of the stage about 10 pixels from the edge.
Right-click in between the two keyframes and select Classic Tween.
Press CTRL+ENTER to preview the animation in a browser.

NOTE: If you examine the folder that the fla was created in, you see two additional files, Flash_WEbGLf.html which is the HTML file with the flwebgl JavaScript library in it and the <canvas> tag used in the <body> tag. You will also see two additional folders (assets and libs) with files in them.

Edge Animate

Another option is to use Adobe Edge Animate which is similar to Flash. It also output to HTML.

Open Adobe Edge Animate and select Create New and save file as EdgeAnimate.html
With the Rectangle Tool draw a box with a width and height of 100 and place it at the top left corner of the screen.
Give the box a name in the Properties panel.
Double-click on the playback marker to “pin” the current location of the box.
Hold down the SHIFT key and drag the Box to the right edge of the stage about 10 pixels from the edge.
Press the Play button at the top of the timeline to preview the animation.

CSS Animation

CSS Animation has become popular in recent years

Write the following code in a blank HTML document with a set of <style> tags:

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>CSS Animation</title>
<style>
div{width:100px;height:100px;background:blue;position:relative;
-webkit-animation-name: changePosition;
-webkit-animation-duration: 6s;
animation-name: changePosition;
animation-duration: 6s;}
@-webkit-keyframes  changePosition {
0%   {left:0px; top:0px;}
100%  {left:600px; top:0px;}
}
@keyframes  changePosition {
0%  {left:0px; top:0px;}
100%  {left:600px; top:0px;}
}
</style>
</head>
<body>
<div></div>
</body>
</html>

Save file and preview it in a browser.

JavaScript Libraries (GSAP)

There are multitudes of third party JavaScript Libraries that will create animation for web or mobile. One of the most popular is Green Sock Animation Platform.

Add the following <script> in the <head> tag of a blank HTML page to connect to the GSAP framework.
```
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.18.0/TweenMax.min.js"></script>
```
Create a blank <div> tag with an ID of bluebox between the <body> tags.
```
<body>
<div id="bluebox"></div>
</body>
```
Add the following CSS in a set of <style> tags below the script tags to create a Blue Box on the page.

<style> div {width:100px; height:100px; background:blue; position:relative;} </style>

Add the following <script> tag to create the animation.

<script> window.onload = function(){ var myObject = document.getElementById("bluebox"); TweenLite.to(myObject, 3, {left:"632px"}); } </script>

Save file and preview it iin a browser.

jQuery

jQuery can also create simply animation for the web with a few lines of code.

Add the following <script> in the <head> tag of a blank HTML page to connect to the jQuery framework.
```
<script  src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
```
Create a blank <div> tag with an ID of bluebox between the <body> tags.
```
<body>
<div id="bluebox"></div>
</body>
```

Add CSS to the object to style it and make it animatable.

<style> #bluebox{background:blue; height:100px; width:100px; position:absolute;} </style>

Add the following <script> tag to create the animation.

<script> $(document).ready(function(){ $("#bluebox").animate({left: '650px'},6000); }); </script>

Save file and preview it in a browser.

JavaScript

Last but not least, you can use pure JavaScript to create animation. However, you have to have more programming experience than the other techniques mentioned.
NOTE: Because JavaScript is built into the browser, you don’t need to link to a framework like you did for jQuery and GSAP.

Create a blank <div> tag with an ID of bluebox between the <body> tags.
```
<body>
<div id="bluebox"></div>
</body>
```

Add CSS to the object to style it and make it animatable.

<style> #bluebox{background:blue; height:100px; width:100px; position:absolute;} </style>

Add the following <script> tag to create the animation.

<script>
window.onload = function(){
var currentXPos = 0;
var intervalHandler =  setInterval(animateBox,50);
var myBoxObject =  document.getElementById("bluebox").style;
var windowSize = window.innerWidth;						 
function animateBox() {						
currentXPos += 10;
if(currentXPos > windowSize)
{	         
  currentXPos = 0;
}
else                	         
{
   myBoxObject.left = currentXPos + "px";   
}; // End of if/else statement							 
}; // End of animateBox function  						
}; // End of onLoad function
</script>

Save file and preview it in a browser.