Join Chris Converse for an in-depth discussion in this video Creating the first animations, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- To animate our project we're gonna use…the timeline feature of the GreenSock animation platform.…This gives us a really quick and efficient way to animate…our banner, and make changes once we have…an animation in place,…because we can chain together all of…the different animations.…So we're gonna start by declaring a variable.…So we'll type "var," space, I'm gonna name this…"tl" for timeline, then the number one.…Then I'm gonna set this equal to, we're gonna type…"new Timeline" with a capital "T."…Then the word "Max" with a capital "M."…Now a set of parenthesis, and a semicolon.…
So basically what we're doing here is this variable…is going to equal the timeline max function.…This will allow us to append all the timeline functionality…to our tl1 variable.…So now we'll hit a few returns.…We'll type "tl1" to target that variable.…Then we're gonna type a dot, and the first thing…we're going to do is we're going to animate…the second headline, the one that says…"You could be here!"…So what we're gonna do is we're gonna use the word "from."…
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