Introduction To Web Animation [ Javascript Svg Css & Html ]

Learn CSS Animation (CSS3) -> SVG Animation -> Interactive JavaScript Animation -> Web Animations API [Theory&Practice]

What you'll learn
1. History of Web Animations
2. CSS Animations [CSS animation properties, keyframe rule, transitions]
3. SVG Animations [SVG elements, attributes and properties that can be animated]
4.1. Interactive JavaScript Animations [Interactive positioning, JavaScript animation methods, Functions of constructors, 3D positioning]
4.2. Interactive JavaScript Animations [Accessing complex attributes of SVG elements using regular expressions, Mask & clipping path animation using JavaScript]
5. Web Animations API [The latest standard in web animation with JavaScript from the W3C ] VS requestAnimationFrame method
6. This course provides creative examples to illustrate the theory of interactive web animation. All of them are available for download, study and update.
Requirements
For the first acquaintance with web animation, additional knowledge is not required. For deep assimilation of the materials, primary knowledge of HTML, CSS, SVG, JavaScript is desirable.
Web browser - Google Chrome (all animations have been tested in this browser)
A text editor or you can work in the online CodePen editor (links to examples with code are prepared and attached to the corresponding lessons)
Archiver for unpacking ".rar" archive with animation sources [If you choose the option of working with the code in the online editor CodePen, you will not need an archiver]
Description
Would you like to learn how to create eb animations? Perhaps you already have basic knowledge and would like to deepen and expand it? You may be looking for interesting javascript animation effects? You are on the right track!This course explores the 3 main basic sections of web animation in detail: CSS animation;SVG animation;Interactive JavaScript animation.Exploring each of the sections will introduce you to ALL the methods and their alternatives, fully describing the corresponding web animation standard (specifications: Css animation, SVG animation, Javascript animation). As well as the possibility of their combined use.The advantages of this course over other courses: This course uses the classic academic teaching model. At the beginning of the lessons, theoretical information is presented, followed by practical examples that consolidate new knowledge. As a result, you are not learning how to create specific animations from examples, but are learning the principles with which you can create any animation, as far as your imagination goes.This course will save you time - there are no unnecessary words, only useful information. The course contains 20 000 words. The information volume is very large - be careful and focus on the material, I have no repetitions, each new lesson covers a new topic. You will not see any code fixes in this course. Each symbol that appears will appear at the right time and will fulfill its role. All code prepared for you, optimized and refactored. Download the archive or work in CodePen. Play with the parameters and values of my example and then create your own based on the theory. Only by creating something new will you create and strengthen neural connections.In this course, the design is well developed and there is no chaotic switching between windows. Everything in a clear sequence: theory -> example code -> demonstration. Many students are interested in graphic effects when presenting material. Despite the fact that this does not apply to the subject under study, I am ready to share this if you contact me with a question.All lessons in this course are available for viewing in 1080p quality [view lessons in maximum quality whenever possible.]The aim of this course is to show the advantages and disadvantages of methods when performing different types of web animation.This course is structured sequentially: from simple to complex:in the introduction, you will learn about the history of the creation of web animations;below is the material on how to create the simplest animations using CSS3.  CSS animation tutorial [CSS Animation properties, CSS animation keyframes  rule, CSS animation transition, CSS animation examples];in the middle of the course, we will talk about SVG animations. SVG animation tutorial. You will learn SVG elements, attributes and properties that can be animated, in addition to this, you will learn about Interface Time Event and Interactivity features in SVG. Interesting svg animation examples are waiting for you;the last chapter of the course focuses on web animation using javascript. Javascript animation tutorial. And here the emphasis will be on interactive web animation. Amazing javascript animation examples with codes await you.at the end, you will become familiar with the Web Animations API technology.The structure of the graphic design of the course:in the upper right part - the title of the chapter [Example: “CSS animations”];in the upper left part - the number of the lesson in the current chapter [Example: “Lesson 2”];in the upper middle part - the name of the lesson or the next topic of the current lesson [Example: “Attributes that define animation values over time”];on the right side of the screen - a board with theoretical information;on the left side of the screen - Visual studio code editor with examples illustrating the theory;at the bottom of the screen - additional auxiliary information [Example: “class="LearnCssAnimation"”].To work with the code, you can choose one of two options:1. Get a link to the code of the current lesson in the online CodePen editor (for this you need to click the “Resources” button corresponding to the lesson you are currently studying, download the file with the link [example file: “C2L1 link to source code in codepen editor.txt”], open it in a text editor and follow the link).2. Download the archive [example: “C2L1.rar”]. Unpack to disk. Open files in a text editor [“Visual Studio Code” can become a convenient editor, or any of your choice].By the end of the course, you will have the knowledge to build web animations of any complexity using CSS, SVG & JavaScript.

Overview

Section 1: History of Web Animations

Lecture 1 Stages of development of basic animation technologies (Part1)

Lecture 2 Stages of development of basic animation technologies (Part2)

Section 2: CSS Animations

Lecture 3 CSS animation properties [part1] & @keyframes rule. Introduction

Lecture 4 CSS animation properties [part1] & @keyframes rule. Continuation

Lecture 5 CSS animation properties [part2]. Example preparation

Lecture 6 CSS animation properties [part2]. Continuation

Lecture 7 CSS transitions

Lecture 8 Summarizing the chapter “CSS Animations”

Section 3: SVG Animations

Lecture 9 SVG's animation elements (Part1)

Lecture 10 SVG's animation elements (Part2)

Lecture 11 Attributes to identify the target element for an animation & control the timing

Lecture 12 Attributes to control animation over time

Lecture 13 Attributes to control additivity, Morphing example & Clock values

Lecture 14 SVG elements, attributes, properties and data types that can be animated

Lecture 15 Interactivity features in SVG

Section 4: Interactive JavaScript Animations

Lecture 16 Introduction to the JavaScript Animation chapter (Part1)

Lecture 17 Introduction to the JavaScript Animation chapter (Part2)

Lecture 18 Introduction to the JavaScript Animation chapter (Part3)

Lecture 19 setAttribute() method. Interactive control.

Lecture 20 getAttribute() method. Interactive control.

Lecture 21 getAttribute & setAttribute methods. Interactive control. Regular expressions

Lecture 22 3d Positioning (Part1)

Lecture 23 3d Positioning (Part2)

Lecture 24 3d Positioning (Part3)

Lecture 25 Constructor functions. (Part1)

Lecture 26 Constructor functions. (Part2)

Lecture 27 Constructor functions. (Part3)

Lecture 28 Constructor functions. (Part4)

Lecture 29 Capabilities of Web Animation using masks & clip path. Part1

Lecture 30 Capabilities of Web Animation using masks & clip path. Part2

Lecture 31 Capabilities of Web Animation using masks & clip path. Part3

Lecture 32 Web Animations API & requestAnimationFrame() method. Part1

Lecture 33 Web Animations API & requestAnimationFrame() method. Part2

Section 5: Bonus section

Lecture 34 Bonus lesson [part1] - Interactive animation of spinning code

Lecture 35 Bonus lesson [part2] - Interactive animation of spinning code

everyone who is interested in web animation,JavaScript developers,CSS developers,Html developers,website designer,frontend developers,UX/UI designers,for people who collect a unique library of knowledge in order to have access to it from anywhere in the world,creative people interested in learning new things