Advertisement
  1. Web Design
  2. Learning Guides
Webdesign

Learn Web Animation

Motion has become a really important part of the web design field in recent years. Motion and animation add layers of dimension to an interface, aiding the user, offering feedback, delighting, and engaging along the way.

1. Get Started With Web Animation

CSS animation techniques are often a web designer’s gateway into the world of motion and the best way to get started is to check out our post.

You can also jump right in with our animation course and learn practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery.

Creating Animated HTML5 Page Transitions

Animation in modern websites is usually limited to hover effects and banner sliders. In rare instances you might see websites that transition from one page to the next, as you experience in a mobile app. In this course, you'll learn how to build animated page transitions for the web using HTML5, CSS transitions, and jQuery.

2. Next-Level CSS Animation

A Visual Guide to CSS Animation

It’s now possible to create awesome animation effects using pure CSS, without a scrap of JavaScript in sight. In A Visual Guide to CSS Animation you’ll learn how to create CSS animations powered by the transition and transform properties.

And because animations are highly visual, rather than getting bogged down in code we’re going to be learning visually. We’ll be using Webflow’s popular visual web design tool (via a free account) so you’ll see your animations play out in real time, as you create them.

CSS Animation Projects

Now it's time to build on what you've learned by trying some practical projects! This course use CodePen so you can easily follow along.

CSS Transitions, Keyframe Animation, and Easing

Taking your CSS animation to the next-level requires an understanding of how to use transitions, keyframe animation, and how to add depth and personality to your animation. 

We have two Coffee Break Courses, each just over 10 minutes long, that will get you started creating animations using the CSS transition, keyframe, and animation properties. The third Coffee Break Course will introduce you to easing with cubic bezier functions and show you how to add more life to your CSS animations.

3. JavaScript Animation

Many front-end developers first toy with JavaScript (or jQuery) by adding animation to web pages. Where browser support for CSS alternatives is sketchy, JS is a good bet.

jQuery’s UI library comes packaged with a number of off-the-shelf UI helpers, but beyond this, JavaScript (in the right hands) can offer serious animation. 

Three.js

With the growing support for WebGL in the browser, it’s becoming more and more feasible to create complex 3D graphics and animations for the web. With Three.js you can start to create your own 3D graphics in the browser.

The GreenSock Animation Platform

Since Adobe Flash officially handed in its resignation some brilliant JavaScript libraries have emerged, and GreenSock’s Animation Platform (GSAP) is arguably the most powerful, giving developers a whole host of timeline and tween-based tools. We have several courses to get you started in web animation using GreenSock.

More Animation Resources

We also have several other courses on animation that you might be interested in checking out, or you can browse the animation category on Envato Tuts+.

Weekly email summary
Subscribe below and we’ll send you a weekly email summary of all new Web Design tutorials. Never miss out on learning about the next big thing.
Advertisement