Would you like to learn how to create web animations? Perhaps you already have basic knowledge and would like to deepen and expand it? You may be looking for interesting animation effects?
You are on the right track.
This course explores the 4 main basic sections of web animation in detail:
CSS animation;
SVG animation;
Interactive JavaScript animation;
Interactive Canvas animation.
Read more
Would you like to learn how to create web animations? Perhaps you already have basic knowledge and would like to deepen and expand it? You may be looking for interesting animation effects?
You are on the right track.
This course explores the 4 main basic sections of web animation in detail:
CSS animation;
SVG animation;
Interactive JavaScript animation;
Interactive Canvas animation.
Would you like to learn how to create web animations? Perhaps you already have basic knowledge and would like to deepen and expand it? You may be looking for interesting animation effects?
You are on the right track.
This course explores the 4 main basic sections of web animation in detail:
CSS animation;
SVG animation;
Interactive JavaScript animation;
Interactive Canvas 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, Canvas 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 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];
next, we'll talk about SVG animation. 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;
after that, we'll focus 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.
next, you will be introduced to the Web Animations API technology.
in the final part of the course you will find a large section on interactive web animation using canvas 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
SEO part:
Welcome to the ultimate web animation course. Whether you're a beginner or an intermediate learner, this course has got you covered. In this comprehensive course, you will learn everything you need to know about creating stunning web animations using
The course is structured sequentially, taking you from simple to complex concepts in a step-by-step manner. You will start with the basics of web animation, its history, and the advantages and disadvantages of different methods. Then you will dive into CSS animation, where you will learn the properties, keyframes, rules, and examples of CSS animation. Next, you will explore SVG animation and learn about SVG elements, attributes, properties, and interactivity features. Next, you will master JavaScript animation, focusing on interactive web animation and using amazing examples to illustrate the concepts, and in the final part of the course you will find a large section on interactive web animation using canvas technology.
This course is designed to teach you the principles of web animation that will enable you to create any animation your imagination can conceive. Each lesson follows the classic academic teaching model, where theoretical information is presented at the beginning, followed by practical examples that reinforce new knowledge. The design of the course is well-developed, with a clear sequence of theory, example code, and demonstration. All lessons are available for viewing in 1080p quality.
What sets this course apart is the large information volume and the optimized code. All code is prepared for you, optimized, and refactored, with no code fixes. You can either download the archive or work in CodePen to play with the parameters and values of the examples and then create your own animations based on the theory.
The structure of the graphic design of the course is simple and intuitive, with the title of the chapter, the lesson number, and the name of the lesson or the next topic of the current lesson prominently displayed. The right side of the screen contains a board with theoretical information, while the left side features Visual Studio Code editor with examples illustrating the theory. The bottom of the screen provides additional auxiliary information.
By the end of this course, you will have gained the knowledge to build web animations of any complexity using
Enroll now and start your journey to becoming a web animation expert.
SEO Keywords:
Web Animation
CSS Animation
SVG Animation
JavaScript Animation
Web Animations API
Interactive Web Animation
Online Web Animation Course
Web Animation Tutorial
Learn Web Animation
Create Web Animations
Canvas animation
canvas technology
What's inside
Syllabus
History of Web Animations
Part1:
In the first lesson, you will learn about history of web animation.
We need to understand in what order the web animation tools appeared.
Which ones are outdated and which are the cutting edge of research!
Read more
Syllabus
Part1:
In the first lesson, you will learn about history of web animation.
We need to understand in what order the web animation tools appeared.
Which ones are outdated and which are the cutting edge of research!
Part2:
In this lesson, you will learn about history of web animation.
We need to understand in what order the web animation tools appeared.
Which ones are outdated and which are the cutting edge of research!
Introduction. General information about CSS animation properties. Preparation of example [three-dimensional image rotation] – html.
Building an animation in a css file (example: three-dimensional image rotation)
In this lesson, you will learn:
animation-name [specifies the name of the @keyframes animation],
@keyframes [specifies the animation code],
animation-duration [specifies how long time an animation should take to complete one cycle],
animation-iteration-count [specifies the number of times an animation should be played],
animation-delay [specifies a delay for the start of an animation].
Preparation of example [three-dimensional rotation of the cube] – html.
In this lesson, you will learn:
animation-direction [specifies whether an animation should be played forwards, backwards or in alternate cycles],
animation-fill-mode [specifies a style for the element when the animation is not playing (before it starts, after it ends, or both)],
animation-timing-function [specifies the speed curve of the animation],
animation-play-state [specifies whether the animation is running or paused],
animation [a shorthand property for setting all the animation properties].
transition-property [specifies the name of the CSS property the transition effect is for],
transition-duration [specifies how long time an transition should take to complete one cycle],
transition-delay [specifies a delay for the start of an transition],
transition-timing-function [specifies the speed curve of the transition],
transition [a shorthand property for setting all the transitions].
Compare CSS animation properties and CSS transitions.
Advantages and Disadvantages of CSS Animation.
CSS animation performance.
This tutorial will introduce you to SVG animation elements (Part1):
animate,
animateMotion,
animateTransform
This tutorial will introduce you to SVG animation elements (Part2):
discard [«Discard» element has been discontinued by browsers to improve security]
set
Attribute to identify the target element for an animation [href = “URL”].
Attributes to control the timing of the animation [begin, dur, min, max, restart, repeatcont, repeatdur, fill].
In this lesson, you will learn about attributes that define animation values over time [from, to, by, keyTimes, keySplines, calcMode, values]
In this lesson, you will learn about attributes that control whether animations are additive [additive & accumulate].
Morphing example.
And we will analyze clock values in detail
SVG elements which can be animated by an <animateMotion>
Data types used in the attributes and properties of the SVG animation.
In this lesson, you will learn about pointing device events with which you can start or stop SVG animation.
The simplest example of animation.
getElementById method, with which we can select the necessary elements for further use in the animation,
call planning method setInterval
addEventListener method with which you can register specific event handlers.
We will go over the setAttribute() method that help you add and change attributes. At the same time, I will show the possibilities of more complex interactive control of the animation when the mouse cursor moves.
We will go over the getAttribute() method that help you access the attributes of selected elements. At the same time, I will show the possibilities of more complex interactive control of the animation when the mouse cursor moves.
I will demonstrate how to penetrate the complex SVG attributes of elements using regular expressions.
In this lesson, we will take a three-dimensional cube, which was built in the second lesson of chapter 2 using CSS properties and configure its positioning using java script tools and methods. We will bind to the keys.
In this lesson, we will continue to work with the Rubik's Cube and bind it to the mouse cursor.
In this lesson, I will explain the principles of initial CSS positioning of the faces of our 3D cube.
Create SVG primitives. We will create arrays of objects, position them interactively, and change colors and sizes.
And i will show you incredible things!
Building an interactive array of SVG objects. Part1 [brief overview of functions, constants and variables]
Building an interactive array of SVG objects. Part2 [Building the initial view, Interactive snapping to the mouse cursor]
Building an interactive array of SVG objects. Part 3 [Using color models in the project: HSLA and RGB. Conclusions]
In this lesson we will work with a clip path. In the first example, a raster image integrated into the SVG container will be used as the basis.
In this lesson we will work with the mask. In the second example, we’ll work directly with SVG
In this lesson, we will work with the clipping frame again. The third example will demonstrate the video content placed in the SVG container.
We will use several types of animations at once. 3D rotation takes place using the Web Animations API technology. Stroke-dasharray animation is done using SVG animation. Finally, the second stroke-dasharray animation is done using the requestAnimationFrame method.
Detailed analysis of the Web Animations API technology.
In this lesson, we will continue to look at the example from the previous lesson and analyze the the requestAnimationFrame() method in detail.
1. The purpose of Canvas. Syntax. Basic settings.
2. object creation
3. Canvas initialization. Methods getElementById(), querySelector().
4. Access to the drawing context. Context types, getContext() method.
5. fillRect(), fillStyle methods.
6. Interactive binding to the mouse cursor.
7. HSLA color model. Fade effect
1. Canvas cleanup methods.
2. Flexible interactive binding of several animation objects to the mouse cursor.
3. Assigning hsla colors to an array of objects.
4. Building an animation engine based on requestAnimationFrame().
Using classes in web animation.
1. Purpose and structure of classes.
2. Class constructor.
3. update() method.
4. The life cycle of animation objects.
5. Animation object motion algorithm and its decomposition.
6. 'load' event
1. Basic html document settings for the project.
2. The 'audio' element. Purpose, use.
3. 'input' element. Purpose, use.
4. 'onchange' event
5. 'AudioContext' interface
6. The properties of the object to create the animation.
1. 'loadAudio()' method
2. FileReader interface
3. 'readAsDataURL()' method
4. Web Audio API: audio nodes, inputs and outputs, audio routing graph
5. audio initialization [part 1]
1. Audio initialization [part 2]
2. 'Uint8Array()' method
3. Building the first type of Audio Visualizer
4. The first version of the audio visualizer
1. Errors are related to the established connections between audio nodes and their elimination using the WeakMap object.
2. Setting up the first version of the audio visualizer.
1. Frequency audio test.
2. The second kind of audiovisualizer [based on the analysis of one of the set of frequencies].
3. Changes in transformation matrix.
4. Third kind of audiovisualizer.
Creating the illusion of a three-dimensional ball
- Basic project settings
1. The function of working with light and shadows
2. Method for creating a radial gradient createRadialGradient()
3. Shadow: color, blur, offset
4. Interactivity
1. Demo: linear gradient animation.
2. Basic html document settings.
1. Properties of the animation object.
2. canvas initialization method.
1. createLinearGradient() method.
2. Explanatory drawing for animation.
3. Method determining the position of objects.
1. Animation logic.
2. setInterval(), clearInterval() methods.
3. Adding Events.
1. Prologue
2. Basic html document settings
1. Introduction to sprite sheets
2. Scenario overview
3. Object properties
4. Initialization
5. Sprite sheet loading
1. Creating a class to simplify the implementation of animation objects
2. Class constructor
3. 'update()' method
4. Movement methods to the right and to the left
5. Events
6. Epilogue
1. Formulation of the problem
2. Basic html document settings
3. Object properties
4. Initialization
1. The method of drawing the current circle according to the given coordinates and radius.
2. Interactive connection of the surface with the position of the mouse cursor.
1. Surface appearance configurator.
2. Testing canvas and SVG variants.
1. Formulation of the problem.
2. Basic html document settings.
3. Object properties.
4. Initialization Method.
5. loadImg() object method [loading and rendering an image].
1. Object method draw(x, y).
2. Animation logic.
3. Graphic explanation.
4. Way to set 1 method for multiple events.
5. Interactivity.
6. Scaling.
1. Formulation of the problem.
2. Basic html document settings.
3. Object properties.
4. Initialization method.
1. Preparing data for drawing.
2. Explanatory drawing [part 1]
1. methods to draw text: fillText(), strokeText() [syntax, options]
2. Explanatory drawing [part 2]
3. Events
1. Fractals. General information. Classification
2. Geometric fractals. L-systems.
3. Basic html document settings.
4. Object properties.
5. Initialization method.
1. Principles of constructing L-systems.
2. The drawTree() method of the object.
3. Explanatory drawing.
4. Events.
5. Interactivity and calling the main method of building a tree.
1. Setting the appearance of the tree.
2. Shadows
1. Basic html setup.
2. Object properties.
3. Initialization
1. Basic construction method drawMandala().
2. Explanatory drawing.
3. Configuration Options.
1. main() call method.
2. automatic and interactive animation modes.
3. events.
4. fine tuning.
1. Introduction.
2. Demonstration of animation configurations.
1. Basic html document settings
2. Element accepting data from user 'input'
3. Object properties
1. Main object call function.
2. Initialization method.
3. drawImage() method.
4. getImageData() method.
5. 'The canvas was corrupted by data from different sources' error and how to fix it.
6. FileReader interface, readAsDataURL() method.
1. ImageData object.
2. sRGB color space.
3. Сolor inversion.
4. 'data' property, array with pixel information [Uint8ClampedArray]
5. Formula for calculating the ordinal number of an element in an array of pixel data.
1. Building the 'Pixel' class.
2. Constructor, properties.
3. object's draw() method.
4. update() class method.
5. pixel position recalculation formula and its decomposition.
6. Changing the configuration.
Information about the composition of the bonus section
Interactive animation of spinning code [Preparing an Animation Object with the Canvas Element]
Interactive animation of spinning code [building animation]
Traffic lights
Save this course
Save
Reviews summary
Comprehensive web animation techniques
Instructor demonstrates strong expertise.
Follows a clear theory-to-practice structure.
Includes helpful, hands-on coding examples.
Covers multiple core web animation technologies.
Activities
Review Basic JavaScript Concepts
Show steps
Solidify your understanding of JavaScript fundamentals before diving into animation techniques. This will make it easier to grasp the interactive aspects of the course.
Browse courses on
JavaScript Fundamentals
Show steps
-
Review variables, data types, and operators.
-
Practice writing simple functions and control flow statements.
-
Familiarize yourself with DOM manipulation basics.
Eloquent JavaScript, 3rd Edition
Show steps
Gain a deeper understanding of JavaScript fundamentals and programming concepts. This book will serve as a valuable reference throughout the course.
View
Melania
on Amazon
Show steps
-
Read the chapters on basic JavaScript syntax and data structures.
-
Work through the exercises to reinforce your understanding.
-
Refer back to the book when you encounter unfamiliar concepts in the course.
CSS Animation Challenges
Show steps
Sharpen your CSS animation skills through targeted practice. This will help you implement the animation techniques taught in the course more effectively.
Show steps
-
Find online CSS animation challenge websites.
-
Attempt challenges that focus on keyframes, transitions, and timing functions.
-
Analyze the solutions to learn different approaches.
Four other activities
Expand to see all activities and additional details
Show all seven activities
Create a Simple Animated Portfolio Page
Show steps
Apply your knowledge of CSS, SVG, and JavaScript animation to build a personal portfolio page. This project will solidify your understanding of the course material and showcase your skills.
Show steps
-
Design a basic layout for your portfolio page.
-
Implement CSS animations for transitions and hover effects.
-
Incorporate SVG animations for logos or illustrations.
-
Add interactive JavaScript animations for a dynamic user experience.
Explore Advanced Canvas Animation Tutorials
Show steps
Deepen your understanding of Canvas animation by following advanced tutorials. This will expose you to more complex techniques and inspire creative ideas.
Show steps
-
Search for tutorials on topics like particle systems, physics simulations, or 3D rendering in Canvas.
-
Follow the tutorials step-by-step, paying attention to the underlying concepts.
-
Experiment with modifying the code to create your own variations.
Develop an Interactive Data Visualization
Show steps
Combine your animation skills with data visualization techniques to create engaging and informative graphics. This project will challenge you to apply your knowledge in a practical context.
Show steps
-
Choose a dataset that interests you.
-
Use JavaScript and Canvas or SVG to create interactive charts and graphs.
-
Incorporate animations to highlight data points and transitions.
-
Add user controls to allow viewers to explore the data.
SVG Animations
Show steps
Expand your knowledge of SVG animation techniques and explore advanced concepts. This book will provide you with the tools to create more sophisticated and visually stunning animations.
View
SVG Animations: From Common UX Implementations...
on Amazon
Show steps
-
Read the chapters on advanced SVG animation techniques.
-
Experiment with the examples provided in the book.
-
Apply the techniques you learn to your own projects.
Review Basic JavaScript Concepts
Show steps
Solidify your understanding of JavaScript fundamentals before diving into animation techniques. This will make it easier to grasp the interactive aspects of the course.
Browse courses on
JavaScript Fundamentals
Show steps
- Review variables, data types, and operators.
- Practice writing simple functions and control flow statements.
- Familiarize yourself with DOM manipulation basics.
Eloquent JavaScript, 3rd Edition
Show steps
Gain a deeper understanding of JavaScript fundamentals and programming concepts. This book will serve as a valuable reference throughout the course.
View
Melania
on Amazon
Show steps
- Read the chapters on basic JavaScript syntax and data structures.
- Work through the exercises to reinforce your understanding.
- Refer back to the book when you encounter unfamiliar concepts in the course.
CSS Animation Challenges
Show steps
Sharpen your CSS animation skills through targeted practice. This will help you implement the animation techniques taught in the course more effectively.
Show steps
- Find online CSS animation challenge websites.
- Attempt challenges that focus on keyframes, transitions, and timing functions.
- Analyze the solutions to learn different approaches.
Create a Simple Animated Portfolio Page
Show steps
Apply your knowledge of CSS, SVG, and JavaScript animation to build a personal portfolio page. This project will solidify your understanding of the course material and showcase your skills.
Show steps
- Design a basic layout for your portfolio page.
- Implement CSS animations for transitions and hover effects.
- Incorporate SVG animations for logos or illustrations.
- Add interactive JavaScript animations for a dynamic user experience.
Explore Advanced Canvas Animation Tutorials
Show steps
Deepen your understanding of Canvas animation by following advanced tutorials. This will expose you to more complex techniques and inspire creative ideas.
Show steps
- Search for tutorials on topics like particle systems, physics simulations, or 3D rendering in Canvas.
- Follow the tutorials step-by-step, paying attention to the underlying concepts.
- Experiment with modifying the code to create your own variations.
Develop an Interactive Data Visualization
Show steps
Combine your animation skills with data visualization techniques to create engaging and informative graphics. This project will challenge you to apply your knowledge in a practical context.
Show steps
- Choose a dataset that interests you.
- Use JavaScript and Canvas or SVG to create interactive charts and graphs.
- Incorporate animations to highlight data points and transitions.
- Add user controls to allow viewers to explore the data.
SVG Animations
Show steps
Expand your knowledge of SVG animation techniques and explore advanced concepts. This book will provide you with the tools to create more sophisticated and visually stunning animations.
View
SVG Animations: From Common UX Implementations...
on Amazon
Show steps
- Read the chapters on advanced SVG animation techniques.
- Experiment with the examples provided in the book.
- Apply the techniques you learn to your own projects.
Career center
Web Animator
Front-End Developer
User Interface Engineer
Web Designer
Game Developer
Motion Graphics Designer
Creative Coder
eLearning Developer
Instructional Designer
Digital Artist
Animator
Data Visualization Specialist
Mobile App Developer
UX Designer
Digital Marketing Specialist
Reading list
Save
Share
Similar courses
OpenCourser helps millions of learners each year. People visit us to learn workspace skills, ace their exams, and nurture their curiosity.
Our extensive catalog contains over 50,000 courses and twice as many books. Browse by search, by topic, or even by career interests. We'll match you to the right resources quickly.
Find this site helpful? Tell a friend about us.
We're supported by our community of learners. When you purchase or subscribe to courses and programs or purchase books, we may earn a commission from our partners.
Your purchases help us maintain our catalog and keep our servers humming without ads.
Thank you for supporting OpenCourser.
