Yelp Facebook LinkedIn YouTube Twitter Instagram

Noble Blog

Video Tutorial: Web Animation Techniques

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

Web Design Web Animation Adobe Photoshop After Effects

Back to Blog