Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]

Interactive Web Animations [JavaScript, SVG, CSS & HTML]

Full specification of web animations at the level of markup languages CSS & SVG and programming language JavaScript.

Teaching methodology of this course:

-> Study topic ->

-> setting a specific task ->

-> implementation ->

-> theoretical overview of the method ->

-> Conclusions

Features of the teaching methodology on this course:

Step by step into immersive web animation:

- Overview of the emergence of story animation techniques

- Theory: A complete overview of CSS, SVG, Javascript specifications at the level of web animation technologies.

- Practical part: animation projects from simple CSS through SVG to CSS + SVG + JavaScript complex projects.

The purpose of this online course:

- awakening interest in the subject of the listener;

- Exploring the original web animation tools;

- immersion in the implementation of specific web animation projects and their independent modernization

- preparation for writing web animation libraries;

CURRICULUM:

1. History of Web Animations

2. CSS Animations

- CSS Animation properties

- CSS Keyframe rule

- CSS Transitions

3. SVG Animations

- SVG Animation elements

- Attribute to identify the target element for an animation

- Attributes to control the timing of the animation

- Attributes that define animation values ​​over time

- Attributes that control whether animations are additive

- SVG elements, attributes and properties that can be animated, and we will also learn Interface Time Event

- Interactivity features in SVG

4. JavaScript Animations

- getElementById() method

- Call planning method setinterval()

- addEventListener() method

- getAttribute & setAttribute methods

- How to penetrate the complex SVG attributes of elements using regular expressions

- 3d positioning

- The functions of constructors

- Creation of SVG primitives

- Сreating arrays of objects, managing their properties

- Capabilities of Web Animation using masks & clip path

- Web Animations API & requestAnimationFrame method

- Combination of animation techniques

All practical examples of animations in this course are available for download and experiment.