Join Chris Converse for an in-depth discussion in this video About the exercise files, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- The exercise files for this course are available to all members, and include an HTML file and a graphics .PNG file. Now, inside of the HTML file, I have a basic HTML5 document structured here, we have a heading area and a body area, there's a style element with two rules. One rule, which brings in a Google font, and then second, we have a body element that just defines the background of the page. The rest of the HTML and CSS we're gonna be building throughout the course. We're first going to construct our banner advertisement layout before we start animating it. And the graphic file inside of that same folder is a semi-transparent sprite sheet.
What we're going to do here is use the same graphic in a series of div elements so we can create multiple graphics for our animation but still only require one HTTP request for this one graphic. This will vastly lower the number of files that we need to load in to our project. So we'll basically have our TweenMax file, the HTML, and one single graphic. So now that we're familiar with the exercise files next we'll go to the GreenSock website and download the JavaScripts that are part of the animation platform.
Released
7/20/2015In this course, Chris Converse shows how to combine GreenSock with HTML, CSS, and a sprite sheet graphic, to create a complete animated banner ad. He'll also introduce techniques for combining animations, rearranging elements, and jumping to specific points in the animation for testing. Plus, find out how to streamline your ad by serving just the files you need—reducing the file size and download speed.
The exercise files are free to all members. Download them and get started building your own project with GreenSock.
- Downloading GSAP
- Creating the ad layout, link, and constraint
- Adding the photos and text
- Animating the artwork
- Setting the ad to fade in on load
- Animating the letters of a headline
Share this video
Embed this video
Video: About the exercise files