Udemy

Platform

English

Language

Web Development

Category

Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]

Learn CSS Animations -> SVG Animations -> Interactive JavaScript Animations -> Web Animations API [Theory & Practice]

3.97 (136 reviews)

Students

3 hours

Content

Jun 2021

Last Update
Regular Price

WES BOS
Wes Bos
Build 30 things in 30 days with 30 tutorials
FREE COURSE

What you will 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] ...... JS!!! --> INSIDE

4. Interactive JavaScript Animations [JavaScript animation methods, Functions of constructors]

5. Web Animations API

6. This course shows 20 animation projects that illustrate the theory of interactive web animation. All of them are available for download, study and upgrade.


Description

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.


Screenshots

Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]
Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]
Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]
Interactive Web Animation 2021 [ JavaScript SVG CSS & HTML ]

Content

History of Web Animations

Stages of development of basic animation technologies

CSS Animations.

CSS animation properties [part1] & @keyframes rule.

CSS animation properties [part2]

CSS transitions

Summarizing the chapter “CSS Animations”

SVG Animations

SVG's animation elements

Attribute to identify the target element for an animation & Attributes to contro

Attributes that define animation values over time & Attributes that control whet

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

Interactivity features in SVG

JavaScript Animations

Introduction to the JavaScript Animation chapter.

getAttribute & setAttribute methods. Interactive control. Regular expressions

3d Positioning

The functions of constructors

Capabilities of Web Animation using masks & clip path

Web Animations API & requestAnimationFrame method


Reviews

M
Matt14 May 2021

Horrible! No coding at all. He just describes theory. He does no coding and does not teach you how to build anything. He actually just has prewritten code and describes it telling you to study it on your own. His voice puts you to sleep and music is in the background in every video. Not for me! sorry

B
Brandon1 February 2021

Informative a good introduction. Not what I expected using the definition of web animation to mean more like events that happen when users are actually interacting with the page like highlights of buttons, modals that scroll out over images ect. This is a class that forces applied learning from extrapolation.

J
John13 December 2020

This hands down the best online course available anywhere (as of 12/18/20) for learning web animation, espeically svg animation. The good news is that some amazing special effects are possible using css transitions, svg animations and javascript. But the bad news is that there are so many options that it can be hard to sort through the alternatives. This course really puts the options in focus. And the instructor also does an excellent job highlighting those details that are a bit counter-intutive. Its one of the very best courses I ever took on udemy, and by far the funniest.

A
Alexander6 November 2020

It's a very good course. It's like an old classical textbook. So if you want to save your time then check out for the course.

S
Steven1 September 2020

This is a highly recommended course for anyone looking to master web animation. After completing this course, the overall picture of web animation emerges. Now it's clear where CSS and SVG animation are in web animation. The chapter on JavaScript animations deserves special attention. The animation examples are awesome and it's great to have the ability to make changes to their code and get a new result. I envy those who are going to get acquainted with this material for the first time and will get an extraordinary new experience of web animation.

J
Jonathan29 August 2020

Great course! Theory and practice of web animation. I recommend everyone to check out these excellent animation examples.

M
Morgan29 August 2020

Easy to follow and well organized. Instructor seems to have a solid grasp of the information- acknowledging nuances of the code to be discussed later. I have been trying other online classes which is strictly learning the code, so I appreciate the brief history given at the beginning.


Coupons

DateDiscountStatus
8/28/2020100% OFFExpired
9/10/202095% OFFExpired

Related Courses

SKILLSHARE
advanced CSS animations: make 3 cool button effects, a lighting text animation & a smoky text effect
advanced CSS animations: make 3 cool button effects, a lighting text animation & a smoky t
SKILLSHARE
CSS animations - the complete guide with 100 projects!
CSS animations - the complete guide with 100 projects!
SKILLSHARE
Pure CSS Animations - Make a cool button, a sliding modal, and a product page! (No Javascript)
Pure CSS Animations - Make a cool button, a sliding modal, and a product page! (No Javascr

3419142

Udemy ID

8/14/2020

Course created date

8/19/2020

Course Indexed date
Bot
Course Submitted by

Twitter
Telegram