Join Chris Converse for an in-depth discussion in this video Animating the marker and shadow, part of Creating an HTML5 Banner Ad with GreenSock (GSAP).
- So now we're gonna animate the marker…to drop onto the stage,…but we're gonna have that bounce a little bit,…so we're gonna use an easing effect on that.…So let's get our cursor before the semicolon.…Let's hit a return, we'll tab in.…And now what we're gonna do is we're gonna use the from,…and we're going to set the top property to negative 110.…And we're gonna set the bounce and the timing at about 1.2.…And then we're gonna set a negative .5 seconds…so that this will play .5 seconds before…the second animation is set to play.…So we're gonna type .from, another set of parentheses.…
Two tick marks for a string.…We're gonna target the myAd_marker.…That's out of the string.…We're gonna set a duration of 1.2 seconds.…Comma, space.…Set a curly brackets for our properties.…We're gonna set a top property to -110.…And with that in place, you can see in the Preview…the animation slowly moves into place.…Let's come up here and Copy the easing setting.…
After the 110 hit a comma, space, let's Paste that in.…But instead of Power2,…
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