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.
Course Program:
Section 1:
“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.
- transition.
- Bezier curves.
Section 2:
“CSS animation”
We’ll continue learning about linear animations and explore the animation property group in CSS. We’ll also look at how to run event-based animations in JavaScript. We’ll learn how to debug animations and profile performance to increase their speed and the speed of page redraws in general.
- Animation.
- @KEY-Frame.
- Intersection Observer API.
Section 3:
“SVG Animation”
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.
- stroke-dasharray
- The animate tag
Section 4:
“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.
- canvas.
- window.requestAnimationFrame.
- Math.sin(), Math.cos()
Section 5:
“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.- WebGL
- OpenGL
- GLSL
Section 6:
“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.Section 7:
“The Future of Animation in the Browser”
This section looks at the Web Animation API, which extends the power of linear animation through JavaScript, but is still experimental. We also cover the Houdini API, which gives you low-level access to the CSS engine.
