{"id":1547,"date":"2017-06-16T16:41:37","date_gmt":"2017-06-16T16:41:37","guid":{"rendered":"http:\/\/websterart.com\/wordpress\/?page_id=1547"},"modified":"2020-01-13T20:29:17","modified_gmt":"2020-01-13T20:29:17","slug":"html-5-animated-banner-tutorial","status":"publish","type":"page","link":"https:\/\/websterart.com\/wordpress\/html-5-animated-banner-tutorial\/","title":{"rendered":"Animated Banner Tutorial Part 1"},"content":{"rendered":"

HTML 5 animation tutorial<\/h2>\n

This tutorial will walk you through the process of building an 800 by 100px animated banner. We will start from scratch using a logo made in Photoshop. All the text will be styled and positioned with CSS 3 and HTML 5. The animation will be handled by making function calls into the Greensock JavaScript library.<\/p>\n

We will be writing JavaScript, but it will be significantly dumbed down. The libraries will handle all the behind the scenes complexity. For example, we can tell something to move by simply saying: “move this logo 300 pixels over the course of 1 second, and have it bounce as it comes to a stop”. It won’t be quite that simple…but the code will clearly make sense.<\/p>\n

We won’t have to script out the decreasing incremental movements that simulate easing during a bounce, like we used to have to do in Actionscript 3 in Flash. All of that complex math will be handled by pre-written libraries. We simply ask for the type of bounce we want, name the object that needs to bounce, save the file, and refresh the browser. We could do this animation in CSS 3, but at this point in time (2020) , scheduling events on a CSS timeline is very cumbersome.<\/p>\n

The JavaScript library developed by the fine people at http:\/\/www.greensock.com<\/a> makes animating over time as easy as it can be in these post flash days. For those of you who do remember the flash playhead, greensock has re-invented it, but using script. You get the draggable playhead, for testing the relationship of moving objects over the course of time. You can drag the playhead both forward and back. This makes it easy to see if your intervals and overlaps are matching your storyboards. I have provided a finished file both with and without the playhead in the lesson files.<\/p>\n

Animation Storyboards<\/h3>\n

We won’t be using storyboards, but keep in mind that most animations start with storyboards. If you’ve never seen one, a storyboard is a series of stick figure cartoons, like a comic book page.<\/p>\n

An animation banner typically starts with a client who has something to sell. There is usually an image involved, accompanied by some descriptive text. Planning the sequence of animated events that will sell the product typically starts with a storyboard.<\/p>\n

For this tutorial, I’m going to give you the finished animation along with it’s supporting files in a zip file. It will contain the before and after files required to view and build this animated banner. But be aware that to move this animation up to your web server, you will need to be familiar with ftp file management applications, such as filezilla, cPanel or Dreamweaver.<\/p>\n

Here is the zip file:<\/p>\n

http:\/\/websterart.com\/video\/animated-banner.zip<\/a><\/p>\n

If you are in my college class, it will be a sub folder in resources named animated-banner. Copy that folder to a location on your hardrive, desktop or network where you normally develop websites.<\/p>\n

We will reverse engineer it, then re-build it from scratch. This is my attempt at a copy of an animation that Greensock used to feature on their front page<\/a>. To my knowledge, he has never explained how he did it. I discovered it back when I was transitioning from flash banners to JavaScript. I wanted to turn my students on to what was being done in HTML 5. Greensock has many tutorials on their website, but I was unable to find a detailed explanation of how he did this one. I am constantly re-inventing and re-imagining my lessons to keep them current for my students. This tutorial grew out of the need to illustrate…in detail…how to do a state of the art HTML 5 animation.<\/p>\n

The process I used to reverse engineer it can be used on any animation. Because it was a fast running animation with some exquisitely timed transitions, it was very challenging to figure out the timing. I needed a playhead to examine the movements in tiny increments. My solution was to record it with screen capture software. There are numerous programs out there, including some free ones, but I used Camtashia. Once I had it recorded, I exported it as an mp4 and had my playhead.<\/p>\n

Once I could examine it in slow motion, I built an illustrated storyboard showing all the various elements and how they related to each other over the course of the 10 second animation. I made the illustrations for the storyboard by simply pausing the video and taking screenshots.<\/p>\n

I pasted the screenshots into Illustrator, then exported the Illustrator file as a PDF.
\nHere it is:
\nOpen this pdf<\/a>. I’m also embedding it in this site, but the pdf has better image quality.<\/p>\n

\"wordpress-10\"<\/a><\/p>\n

With experience and knowledge you can skip some of these steps…but for a beginner, or if the project is super complex, it’s always good to start with a storyboard.<\/p>\n

I’ve always found it ironic that Steve Jobs forced us away from flash into JavaScript. Back in the day I could tell you to start flash and set up a new document on the timeline. Now, to start animating with JavaScript we basically have to create the flash environment entirely with script. It’s not just one or two files, like it used to be with flash. To animate with JavaScript, we need at least a dozen different files, and they all need to communicate with each other. Accurate file management is just one of many skills needed to animate in HTML 5.<\/p>\n

If you are using a code editor such as Sublime or Brackets, make sure that those editors open with empty sidebars and zero files open. In Sublime, for example, it typically starts up with the last used files open, and the last defined project files listed in the sidebar. Each editor is different, but do what you have to do to close old files, and remove old project folders from the sidebar. If you don’t know how, ask Uncle Google.<\/p>\n

Dreamweaver has some distinct advantages for developing animations, however at this time I don’t have Dreamweaver, so I will be using Sublime.<\/p>\n

Getting Started<\/h3>\n

STEP 1:<\/span><\/strong> Open the banner-done.html<\/strong> in your browser and watch it run, note that you can drag the slider bar to control the animation, and that it keeps up with the animation automatically if you hit refresh.<\/p>\n

\"banner<\/a>

banner and playhead<\/p><\/div>\n

 <\/p>\n

For those of you in my college class, we learned how to set up the slider bar in chapter 3A of the greensock textbook:<\/p>\n

https:\/\/www.nobledesktop.com\/books\/gsap<\/a><\/p>\n

This lesson will show you how to build an animated banner similar to this: https:\/\/codepen.io\/GreenSock\/pen\/zGBgov<\/a><\/p>\n

or this: http:\/\/websterart.com\/html\/animation-v4.php<\/a><\/p>\n

STEP 2:<\/span> <\/strong>Close banner-done.html and open banner-start.html <\/strong>in Chrome or Firefox.\u00a0 The banner-start.html will be a blank window in the browser, this is normal.<\/p>\n

STEP 3:<\/span><\/strong> Right click in the blank browser window and choose view > source. This will open a new tab showing the source code. Note all the links to external files. Lines 6, 12, 13, 14, 15 and 16 all have links to external files. These files get imported by the browser and are essential for the animation to work. If you like analogies, think of the the engine in your car. If you took it out and set it on the floor, it wouldn’t run. It has to mounted in the car, and it has to be connected to the battery, the gas tank, the air cleaner, the fuel pump…etc.<\/p>\n

Our banner-start.html has to be connected to those 6 files before we can make it run. Those files are all (except the css file) JavaScript files, and they are all (with one exception) prewritten JavaScript libraries that we will never touch.<\/p>\n

\"click<\/a>

click the links in view source page<\/p><\/div>\n

 <\/p>\n

STEP 4: <\/span><\/strong>Click each of the links and make sure that the browser can open the linked files. They should open easily. This means you have all the necessary files and folder for the project. Close the new tab or click the browsers back button after checking each link. If the links don’t open, examine the folder using Windows Explorer or the Mac Finder. Your folder structure must look like this for you to be able to click the links in the view source window. NOTE: this screen shot is from a Mac, but windows explorer view is almost identical.<\/p>\n

\"required<\/a>

required directory structure<\/p><\/div>\n

 <\/p>\n

STEP 5:<\/span> <\/strong>Examine the directory structure above and note that I have reorganized the locations of all of the linked css and javascript files (as compared to the optional greensock book). The two files I did not move were the jquery-ui files: js and css. Those files make the dragable playhead slider work. It’s very complex, so I left them buried in their original folder structure. Remember that to make this work online that specific directory structure has to be maintained up on the remote server. It will take some careful file management during the uploading process.<\/p>\n

NOTE: You can work this tutorial without buying the greensock book. My previous students and I figured it all out by watching his excellent youtube channel. But his book makes it soooo much easier, I highly recommend you buy the book.<\/p>\n

STEP 6: <\/span><\/strong>In your code editor, open these three files from your folder:<\/p>\n

    \n
  • banner-start.html<\/li>\n
  • banner-start.js<\/li>\n
  • banner-start.css<\/li>\n<\/ul>\n

    On banner-start.html<\/strong>, inside the <body><\/body><\/span> tags, start and stop a div with an id of banner. It will look like this when you are done:<\/p>\n

    <!--\r\nthis is banner-start.html\r\n-->\r\n<body>\r\n  <div id=\"banner\"> test 123\r\n  <\/div><!--end banner div-->\r\n<!-- bunch of script imports will be here already -->\r\n<\/body><\/pre>\n
    STEP 7: <\/span><\/strong>Add these two rules to banner-start.css<\/strong>. Save the file and refresh your browser.<\/p>\n
    \/*******\r\nthis is banner-start.css\r\n********\/\r\nbody {\r\n  background-color: gray;\r\n}\r\n#banner {\r\n   height: 90px;\r\n   width:800px;\r\n   background-color: #333;\r\n   border-radius: 15px;\r\n   position: relative;\r\n   \/*opacity: 0;*\/\r\n   font: 0.9em Verdana, Helvetica, sans-serif;\r\n   color: white;\r\n   \/*overflow: hidden;*\/\r\n}<\/pre>\n
    This is what you should see:<\/p>\n
    \"round<\/a>
    round corner banner box<\/p><\/div>\n
    STEP 8:<\/span><\/strong> In banner-start.css<\/strong>, un-comment (activate) the declaration for opacity: 0;<\/span> like this:<\/p>\n
    \/******* this is banner-start.css ********\/ \r\nbody { \r\n\tbackground-color: gray; \r\n} \r\n#banner { \r\n\theight: 90px; \r\n\twidth: 800px; \r\n\tbackground-color: #333; \r\n\tborder-radius: 15px; \r\n\tposition: relative; \r\n\topacity: 0; \/*this is now active!*\/\r\n\tfont: 0.9em Verdana, Helvetica, sans-serif; \r\n\tcolor: white; \r\n\t\/*overflow: hidden;*\/ \r\n}<\/pre>\n
     <\/p>\n
    and refresh your page, you should see nothing. Next we will animate in the appearance of the banner.<\/p>\n
    STEP 9:<\/span><\/strong> Switch to banner-start.js<\/strong>. This is one of the six JavaScript files we are importing into banner-start.html. It is currently blank because we are just starting the script that will create the magic. Add the code shown below. Refresh your page and you should see the banner rectangle fade in over 1.5 seconds.<\/p>\n
    \/*banner-start.js*\/\r\nvar tl = new TimelineMax();\r\ntl.to(\"#banner\", 1.5, {opacity:1, ease:Cubic.easeOut})<\/pre>\n
     <\/p>\n
    Basically we are creating a new
    \nvariable called “tl<\/span>“. We are assigning
    \nit a new occurence of a virtual timeline called TimelineMax. You can think of this as a Flash or Premiere timeline if you know either of those programs. In the tl.to()<\/span> statement we are saying, animate the <div id=”banner”><\/span> element over the course of 1.5 seconds from it’s starting opacity: 0; property (as defined in the style sheet ) to an opacity of 1. And we are using a prebuilt easing called “Cubic”. If you don’t know what easing is, check it out here:     https:\/\/greensock.com\/ease-visualizer\u00a0<\/a><\/p>\n
    or here:<\/p>\n