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

In this tutorial, we’ll 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.  If you get stuck at any point in the tutorial, come get help in our forum.

Create a project
  • Draw shapes (1:35)
  • Import graphics (2:26)
  • Add filters (4:23)

Type in and style your text.

Use text and fonts
  • Add text (0:15)
  • Size text (0:39)
  • Use Edge Web Fonts (0:59)

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.

Now let’s make this project move!

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

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.

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.