Animation for frontenders – new HTML Academy course. The program includes: linear and frame-by-frame animation, CSS and SVG animation, Canvas, WebGL and shaders, 3D in the browser and the future of animation in the browser. The course is asynchronous and you can enroll at any time and study at your own pace under the supervision of a tutor.
“Fundamentals of Animation, Linear Animations”We’ll deal with what animation is, why a person sees movements on the screen, what kinds of animation exist and how to improve the quality of UX with animation. We’ll analyze the main ideas of Material Design. Also we’ll look at the simplest kind of linear animations and their temporal functions.
- Linear animations.
- A frame animation.
- Bezier curves.
- Intersection Observer API.
In this part we’ll dive into learning SVG. We’ll look at how to animate drawing curves. We’ll make one SVG object move on the edges of another object, and learn how to create a chain of animations with the animate tag.
- SVG Path.
- The animate tag
“Frame animations, Canvas”Starting with this part of the course, we’ll study frame animations, which are a lower-level form of animation. We’ll learn how to animate images on canvas, we’ll get the animation to work efficiently and eventually we’ll get that coveted 60 frames per second.
- Single frame animation.
- Math.sin(), Math.cos()
“WebGL, Shaders”In this section, we will learn how to create unusual and complex animation effects. We will understand the difference between calculations on CPU and GPU and learn how to write special microprograms for GPU – shaders.
“3D in the Browser”At last we cover the basics of 3D modeling and look at the different libraries for implementing 3D in the browser. We create a scene and light for it and add 3D models with textures and controls.