Join Chris Converse for an in-depth discussion in this video Moving and looping the clouds, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- Now I wanna create a more subtle animation…of the clouds in the background.…We have this spreadsheet in place…where we can see the clouds behind all the trees,…so it'd be nice to have those sort of moving…across the stage.…And in our script we can create a second timeline…to control the clouds.…So let's come up here into our script.…I'm gonna copy the variable for TimelineMax.…Let's copy that to the clipboard.…Also gonna condense the script down a little bit.…So after the seek, I'm gonna paste that down here.…
We're gonna name this tl2, for timeline two.…Then on the next line we'll add our first animation.…So we'll type tl2.to...…beginning and ending parentheses, semicolon...…tick marks, pound sign...…myAd_clouds...…then outside of this string, parentheses, space,…and for the duration, I'm gonna set 30 seconds.…
I want them to move pretty slow.…Then a comma and a space.…Put in our curly brackets.…The property we're gonna change is going…to be the background position.…So we'll type background.…Now In CSS, background position has a hyphen in it,…
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