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

Complete Guide to Web Animations [CSS Animations - > SVG Animations - > Interactive JavaScript Animations].

What you'll learn

Create web animations using JavaScript, SVG & CSS
Combine these tools to create web animations
Make web animations interactive


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.

Description

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

CURRICULUM:

1. History of Web Animations


2. CSS Animations

- CSS Animation properties

- CSS Key frame 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

- Combination of animation techniques

Who this course is for:

This course for those who want to master interactive web animation.