Animated Web Banners

Want to take your web animation skills to the next level and use HTML, CSS and JavaScript to create professional banners that capture your audience’s attention? This course will get you started.

Book this course
Call our sales team today
2 day course
Supporting material
A private training session for your team. Groups can be of any size, at a location of your choice including our training centres.

Many tools and languages are used to create web animation. Depending on your requirements, some will give you better results than others.

During this two-day course, we'll use a combination of theoretical and practical exercises to teach you all about web animation. We’ll start by understanding the principles using Google Web Designer, followed by holding a hands-on workshop where you'll learn what a rich media ad is.

You’ll also learn how to use an open source framework called bannertime, as well as how to follow a brief to create an animated web banner. Finally, we’ll show you how to publish your ad within the Google Marketing Platform.

Our Animated Web Banners course is available as a private training session that can be delivered via Virtual Classroom or at a location of your choice in the US.

Course overview

Who should attend:

If you want to learn how to create animated web banners to a professional standard and acquire skills that will allow you to provide solutions – regardless of the complexity of the brief – then this course is for you.

What you'll learn:

By the end of this course, you will be able to:

  • Understand the twelve principles of animation
  • Use Google Web Designer to see how those principles apply to web
  • Use CSS to animate HTML elements
  • Understand the power of JavaScript and GreenSock, and how to use them effectively
  • Take a project from initial brief to publishing on the Google Marketing Platform

Course agenda

Concepts, Tools & Techniques of Web Animation
  • Disney’s twelve principles of animation
  • What are the principles?
  • How do the principles translate into web animation?
Google Web Designer
  • Interface overview
  • Timeline
  • Motion with properties
  • Nested animations
  • Strengths and limitations
HTML & CSS Animations
  • Transitions
  • Keyframing
  • Strengths and limitations
JavaScript & GreenSock Animations
  • Triggers and Events
  • Timers
  • DOM manipulation
  • Good programming practices
  • Strengths and limitations
Animated Web Banner Workshop
  • What is Rich Media?
  • What is it?
  • Why use it?
  • How to use it
  • Case Study
  • Requirements
  • Asset ingestion
  • Animation prototyping
  • Animation mastering
  • Production
  • Publishing
Google Marketing Platform
  • Studio
  • Campaign Manager
  • Google Ads
  • Other platforms
Don't miss out
Keep up to date with news, views and offers from Jellyfish Training.
Your data will be handled in accordance with our Privacy Policy
Feefo logo
Independent Service Rating based on 1 verified reviews

Animated Web Banners

I Really enjoyed this course, Daniel was excellent at delivering the training in bite-sized chunks so that I had time to absorb the information. I went straight from the course into designing online banners in Google Web Designer, these banners are now in use. I have also enrolled my Artworker Josh onto the course in May.

Linus 10 March, 2023