Skip to main content
Noble Desktop/1 min read

Video Tutorial: Web Animation Techniques

Topics Covered

Animated GIFs

Built with Photoshop and After Effects — sharp results for email and web.

CSS Transitions & Animations

Native browser animations without JavaScript.

GSAP for JS Animation

GreenSock Animation Platform — most powerful JS animation library.

Animating SVG

Scalable Vector Graphics animation — perfect for icons, logos, illustrations.

Master After Effects at Noble Desktop

Noble Desktop's Video Editing & Motion Graphics Certificate teaches After Effects alongside Premiere Pro and Cinema 4D.

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