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.
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.
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
