Video Tutorial: Web Animation Techniques

Explore the resurgence of animation in web design as HTML5 brings new life to dynamic, interactive elements on websites. Learn about the tools and techniques currently being utilized by designers and animators, and understand their application in creating engaging emails, web pages, and banner ads.

Key Insights

The decline of Flash led to a temporary decrease in web animation, but HTML5 is reigniting the trend.
Animation enhances user engagement with websites, banner ads, and emails, leading to higher click-through rates.
Multiple animation techniques exist, including animated GIFs, CSS transitions and animations, and JavaScript animation with the GreenSock Animation Platform (GSAP).
Understanding when to use each animation technique is crucial to effective design.
Designers and animators often use Adobe After Effects and Photoshop to create animated GIFs for email and web use.
An overview of animating SVG (Scalable Vector Graphics) provides another approach to creating dynamic web content.

How do we animate in this day and age of HTML5? Should you use animated GIFs, CSS, or JavaScript? Animation is coming back to the web in a big way, and the trend is to make things move. You can even add animations to emails. Learn about creating animations with CSS, JavaScript (GreenSock), Photoshop, and After Effects in this free class!

View the Presentation Slides
Download Demo Files & PDF Exercise

LEARN GREENSOCK:
Videos + Book Training:
Class (attend in New York City or Live Online)
Book (eBook or Print)
-----------------------
LEARN ADOBE AFTER EFFECTS:
Classes (attend in New York City or Live Online)
Books (eBook or Print)
-----------------------
LEARN ANIMATED GIFS:
Class (attend in New York City or Live Online):
Book (eBook or Print)

Hot hot hot. With the death of Flash, animation disappeared from most websites. But animation is coming back to the web in a big way, and the trend is to make things move. Web pages are breathing and moving with verve. Banner ads with animation, whether subtle or elaborate, stand out and get more response. Emails with animation get higher click-thru.

How do we animate in this day and age of HTML5? Should we use animated GIFs, CSS, or JavaScript? How do we create the animations? What are the current tools designers and animators are using?

We’ll build a few animations and even provide instructions on how to create a sharp animated GIF using After Effects and Photoshop.

This seminar will cover the following:

Animated GIFs for email and web using Photoshop and Adobe After Effects
CSS transitions and animations
JavaScript animation with the GreenSock Animation Platform (GSAP)
Animating SVG (Scalable Vector Graphics)
When to use each of the various animation techniques

Learn more in these courses

Web Design Certificate

Weekdays only
162 hours
Open to beginners
Financing available
1:1 Mentoring

In this certificate program, you will become a well-rounded Web Designer and learn to design webpages, code them with HTML & CSS, and JavaScript, and build websites with WordPress, allowing you to create a diverse portfolio to showcase your skills to potential employers or clients.

View course

Adobe Photoshop Bootcamp

Evenings, weekdays, or sundays
18 hours
Open to beginners

Learn how to retouch and color correct photos, combine images, and create graphics in Photoshop. This course covers the basic and intermediate features of Photoshop, such as color/contrast, photo retouching, layers, masks, filters, and saving files for web/video/print.

View course

Graphic Design Certificate

Weekdays, sundays, or evenings
84 hours
Open to beginners
Financing available
1:1 Mentoring

Begin your journey as a professional graphic designer by learning the essential skills and tools used by industry experts. Gain hands-on experience in Adobe Photoshop, InDesign, and Illustrator, and create a stunning portfolio to showcase your talent to potential employers or clients.

View course