Course Information
Registration period
Year-round Recruitment
Course Level
Study Mode
Duration
1 Hour(s) 59 Minute(s)
Language
English
Taught by
Ben Frain
Rating
4 views
Course Overview
Give your web animations super-powers by with the JavaScript Web Animations API
This course teaches you how to animate on the Web using the JavaScript Web Animations API W3C standard.
You'll learn how to transfer what you already know how to do in CSS, into JavaScript and then add extra capabilities like pausing and playing animations, starting one animation half way through another. Combining different animations together and synchronising a number of animations. All things you just can't do presently with CSS alone.
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.
What we will build
We will be building, from scratch, a multi-scene piece of interaction with just HTML, CSS and JavaScript and no external libraries. Instead of CSS we will use the JavaScript Web Animations API to handle our animations and learn about all the extra capabilities it provides over CSS alone.
Along the way, we will also look at how to setup a very simple local server that will live reload changes to our code as we work.
The code is free to download on GitHub and split into folders for each video; each one providing the code as it's left at the end of each video.
What you need
All you need to get started with this class is a text editor like Sublime Text or VS Code, a modern web browser and a tolerance for mediocre jokes.
Course Content
- 1 section(s)
- 23 lecture(s)
- Section 1 Introduction
What You’ll Learn
- Animating with JavaScript using the Web Animations API
- How to convert CSS animations to JavaScript
- How to create animation based interaction with JavaScript
Skills covered in this course
Reviews
-
AAlonso Quesada
Very good course, just what I needed. Only suggestion I have is that there is jump by the time lesson 15 starts where all animations are already in the file, maybe a previos video with the creation of one or two of them could be helpful there
-
DDavid R
The project files were presented as a fait accompli, and their explanation was a bit rushed. I'd have found it more instructive to build these files from scratch. The course might have been a bit longer, but it's a pretty short course anyway.
-
AAdan Ramirez
I expected for the teacher to write the code from start to finish, he just went over the code he finished and commentated about it, this course isnt for beginners.
-
JJerome Olivier
It's a quick and succinct course, but I definitely agree with the other reviewer who mentioned the need for more screen time on code and less on the instructor's handsome face. I had to pause and rewind a lot to read the code. I like that the course doesn't make you sit and watch someone code for hours on end, but instead simply goes over the concepts and then expects you to actually think it through and do the work. It's amazing how much time is saved going about it that way. Anyways, now that I've watched it all and done the exercises, I'm going to do the project from scratch and refer to the finished project whenever I get stuck.
