In the early days of the web, animation became known for all those clunky, complex effects that may have looked great but were slow to load and often confusing to use.
But when it's used in the right way, animation can be a fantastic tool for web designers to have in their kit. Small amounts of subtle, eye-catching motion are a great way to help users interpret interfaces and find their way around your site or app.
Are you up to date with all the latest techniques of web animation using CSS, JavaScript, easing, SVGs, and special frameworks like the GreenSock Animation Platform?
If not, don't worry—here are nine courses that will teach you everything you need to know.
1. Practical Web Animation
In this course, Envato Tuts+ instructor Craig Campbell will show you practical ways to create animations for buttons, pricing tables, and other web elements, using concise CSS and jQuery to do so.
2. GreenSock Animation Platform: First Steps
GreenSock is a JavaScript framework which makes it easy to animate HTML elements. During this course, you will take your first steps in learning how to use this powerful framework. As long as you have an understanding of HTML and CSS, along with a basic knowledge of JavaScript, you’ll be equipped with everything you need to follow along.
3. Advanced Animation With GSAP Plugins
This course is an ideal follow-up to the one listed above. In this course, you will go beyond the basics of GreenSock animation as Envato Tuts+ instructor Craig Campbell takes you on a tour of the plugins that ship with GSAP.
4. Three GreenSock Projects: Practical Animation With GSAP
In the third GSAP course, Craig Campbell will walk you through three projects where you will learn how to create programmatic animations, in real-world scenarios, using the GreenSock Animation Platform. You'll learn how to create an animated preloader, an SVG logo animation, and a custom content slider.
5. Animating With Snap.svg
SVG is a powerful way to create vector-based graphics that resize flawlessly. In this course, you will learn how to use the Snap.svg JavaScript framework to create, control, and animate your SVGs with ease.
6. Easing in to Cubic Bezier Functions
One way to breath a bit more life and a bit more personality into animation on the web is to experiment with different settings of easing. In this quick, ten-minute Coffee Break Course with Guy Routledge, you'll learn what easing is, why it's useful, how to control it, and how to apply it in the context of CSS.
7. Up and Running With CSS Transitions
In this Coffee Break Course, Craig Campbell will show you everything you need to know to quickly get started creating animations using the CSS transition properties. In just ten minutes, you'll learn how to create motion using nothing more than a few CSS properties.
8. Up and Running With CSS Keyframe Animations
This Coffee Break Course teaches you how to create animations using the CSS keyframe and animation properties. In just ten minutes, you'll learn how to create animations in the browser without having to rely on external plugins or extensive programming.
9. Essential CSS Libraries for Web Designers
In this course you’ll learn how to use ten essential CSS libraries for web designers, available today. You’ll learn about resets, animations, transitions, and typography related libraries. You'll learn with Adi Purdila, and you'll use Bower to manage your projects, making sure that everything stays up to date and is easily maintainable.
Watch Any Course Now
You can take any of our courses straight away with a subscription to Envato Elements. For a single low monthly fee, you get access not only to these courses, but also to our growing library of over 1,000 video courses and industry-leading eBooks on Envato Tuts+.
Plus you now get unlimited downloads from the huge Envato Elements library of 200,000+ photos and 26,000+ design assets and templates. Create with unique fonts, photos, graphics and templates, and deliver better projects faster.
