Join Chris Converse for an in-depth discussion in this video Animating the letters of a headline, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- View Offline
- Now, to make the first heading a little bit…more interesting when it gets knocked out…of the way by the second heading,…we're gonna animate all of the individual letters.…So this is also gonna give us a chance…to hook together items in a timeline,…so that they all play together…without having to do things like here,…where we set the offset to match the total duration.…So the first thing we'll need to do,…is we'll need to separate out all of the individual letters.…So for example, we're gonna come…in here to Feeling stressed?…And I'm gonna put a span tag before the F.…
So I'll start with a span.…We're gonna need an id,…so I'll name this myAd_ltr01.…Then after the letter F, we'll come in here…and end the span tag.…And we'll need to do this for all of the remaining letters…in this heading.…So the second letter will be called,…myAd_ltr02, 03, all the up through the ?,…which will give us 16 individual span elements…for the heading, Feeling stressed?…So back in my HTML file, I'll come in here…and copy the first span.…
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