In 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
Skill Level Intermediate
And there are many features that make this animation technique faster to develop than more traditional key frame based techniques. For example, we can hook together animations by giving them a common label, we can reorder items in an animation by rearranging the instructions, or even jump to a specific point in an animation to test portions of the project. Later on in the course, we'll explore techniques for more interesting animations, as well as, an option for using individual parts of the animation platform to save even more data for the users to download. And this platform and you're animations can be used with any HTML based project, including web sites, digital books, magazines, mobile applications, and as in the example for this course, online advertisements.
And finally, the exercise files for this course are available to all members, so download the files and let's get animating with GreenSock.