Ben Frain
Animating with the Web Animations API
Learn to animate on the web with the Web Animations API and achieve the things you couldn't manage with CSS alone.
Transfer what you already know how to do in CSS, into JavaScript and then add extra capabilities like chaining animations, pausing and playing animations, starting one animation half way through another and much more. All things you wanted to do with just CSS and can't!
Enroll now at Udemy with over 140 other students.
…Really enjoyed the course, and feel a lot more confident tackling animation in CSS or JS…It was really helpful to understand how the CSS and JS techniques overlap and differ, and why you would use each one.
You don’t need to be a JavaScript expert to use this API — I’m not!
However, if you are completely new to web development, this probably isn’t the class for you. I’d expect you to know how to write HTML and CSS and have a basic understanding of JavaScript. If you know what a function looks like, and how to write a click handler with ‘addEventListener’ I reckon you will be fine!
We will start by re-making some basic CSS animations with the JavaScript Web Animations API, then once we get through the fundamentals, we will start making our project together — a interactive set of sequenced animations.
By the end of the course you should have a solid understanding of how to animate on the Web with the JavaScript Web Animations API.
-
In just under 2 hours of in-depth tutorials we will cover:
- What even is an API?
- Why we aren't just using CSS?
- The project you will be building
- How to write your first WAAPI powered example
- How to setup your project
- Web Animation theory
- Compaing CSS and JS based solutions
- How to separate Keyframes from timings
- How to sequence animations
- How to pause and restart animations
- Understanding the basics of callbacks and promises
- Changing animations mid-transform
Take the course now at: Skillshare or Udemy