How to build a web banner in Edge Animate

How to build a web banner in Edge Animate

Learn how to create an animated banner using keyframes and transitions on the timeline. (Watch, 17 min)

FromPaul Trani

Note: As of November 2015, Edge Animate is no longer being actively developed. Learn more.

Bring movement and depth to your site with a panning landscape.

What do I need?

Get files Sample files to practice with (ZIP, 29 MB)

Get PDF Edge Animate cheat sheet

Bring movement and depth to your site with a panning landscape.

See how to use Edge Animate to create an animated banner project that might be used to promote South African tourism. We’ll create graphics and animation that are built using HTML, CSS and JavaScript. This means that the animations will run on any modern browser, on both desktops and mobile devices, including the iPad. Before you start, be sure you’ve downloaded the assets and that you have the latest version of Edge Animate installed. First, we’ll create a new project in Edge Animate. Then we’ll import the graphics for the scene, position them, and apply a blur effect to the grass in the foreground.

Draw shapes (1:35); Import graphics (2:26); Add filters (4:23)

Type in and style your text.

Now that you have the start of a great looking banner, it’s time to add some text. We’ll see how easy it is to add style to your text in Edge Animate by modifying a text element’s properties like size and color as well as use Edge Web Fonts to choose an attractive (and free) web font.

Add text (0:15); Size text (0:39); Use Edge Web Fonts (0:59)

Now let’s make this project move!

Up to this point, we have an attractive looking banner, but it is still completely static. In this step, we’ll see how we can easily add animations to our banner using the timeline. Edge Animate automatically adds the necessary items, like key frames and transitions, to create our animations.

The type of animation we are creating is called a parallax effect, which recreates the visual effect whereby items in the foreground appear to move faster than items in the background. We’ll see how you can animate more than just motion by animating some filters and properties of elements. Finally, we’ll add something called easing, which will create a smoother more natural looking animation.

Use the timeline (0:41); Move multiple items (2:00); Animate filters (4:25)

Congratulations, you’ve completed your animation! But Edge Animate does more than just make things move.

Now that we have a smooth (and cool) looking animation, try out our next tutorial to see how to allow the user to interact with the banner. We’ll see how Edge Animate provides simple, predefined functions that allow us to add an action to an element that will handle and respond to a user click. We’ll also see how to change the cursor over any element to indicate to our viewer than an item is clickable or interactive.

Let us know what you think

That's it! You're done. Please provide feedback in our survey so that we can make sure this tutorial is as useful as possible.


Paul Trani

Paul is an award-winning designer, an Adobe Certified Instructor, and a courseware developer with 15 years of experience. A writer and prolific trainer, Paul has earned top author status at and has created a steady stream of content for AdobeTV and Creative Cloud Learn as well as