HTML5 Animation and Transition
1.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
64 students enrolled
Wishlisted Wishlist

Please confirm that you want to add HTML5 Animation and Transition to your Wishlist.

Add to Wishlist

HTML5 Animation and Transition

Learn how to develop incredible animations and transitions with HTML5
1.0 (1 rating)
Instead of using a simple lifetime average, Udemy calculates a course's star rating by considering a number of different factors such as the number of ratings, the age of ratings, and the likelihood of fraudulent ratings.
64 students enrolled
Created by Packt Publishing
Last updated 12/2014
English
Current price: $10 Original price: $85 Discount: 88% off
5 hours left at this price!
30-Day Money-Back Guarantee
Includes:
  • 2 hours on-demand video
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
What Will I Learn?
  • Learn the mathematical foundations that form the basis of any complex animation, such as vectors, vector operations, interpolations, and easing and acceleration
  • Discover how to display graphics on the screen using HTML5's latest APIs such as DOM, CSS3, SVG, Canvas, or WebGL
  • Learn how to use Raphaël to easily display and animate graphics using SVG
  • Learn how ThreeJS makes everyone's lives easier by harnessing the power of WebGL
  • Implement functions that will allow you to use cameras, animate simple geometries, or import 3D models from Blender with ThreeJs
  • Develop a particle generator capable of animating thousands of independent objects simultaneously
  • Learn how to do frame-based animations using the HTML5 Canvas object
View Curriculum
Requirements
  • All videos in HTML5 Animation and Transition include hands-on, practical examples to follow along with. This course is geared towards beginners in HTML5 development and anyone who wants to learn transitions and animation.
Description

In "HTML5 Animation and Transition", you'll be learning how to develop rich, complex motion graphics using HTML5 APIs such as DOM, CSS3, Canvas, SVG, and WebGL, as well as the basic mathematical concepts behind complex animations—essential knowledge for any modern web developer.

In the "HTML5 Animation and Transition" video course, we will tackle everything that you need to know in order to become an expert at animating elements using the latest HTML5 APIs, starting from the most rudimentary methods such as using the DOM, to the most modern ones such as SVG, CSS3, Canvas, and WebGL. At the same time, you'll also be learning the mathematical concepts required to make complex animations.

Using the first chapters, you will learn (or refresh!) concepts such as vectors, vector operations, interpolations, and easing and acceleration. Then, you'll learn how to display static graphics on the screen using several rendering methods available in HTML5, such as DOM, CSS3, SVG, Canvas, or WebGL. Once you've learned how to display things on the screen, you'll dedicate entire chapters to implement several animation examples using every single rendering method.

About the Author

Mario Andrés Pagella is the author of "Making Isometric Social RealTime Games with HTML5, CSS3 and JavaScript, O'Reilly Media". He has been developing web applications for almost 15 years and currently works as a Technology Consultant developing websites, mobile apps, and social games for many clients from around the world as well as a Senior Open Standards Developer at R/GA. When he is not spending time developing Indie games, writing game and web development articles for his blog, or advocating the use of HTML5 and JavaScript through his Twitter account, he loves to research and develop experimental projects. Andrés currently lives in Buenos Aires, Argentina, with his fiancée.

Who is the target audience?
  • Whether you come from a technical background or not, HTML5 Animation and Transition will teach you everything that you need to know in order to develop compelling motion graphics using the latest HTML5 graphics rendering methods.
Students Who Viewed This Course Also Viewed
Curriculum For This Course
34 Lectures
02:13:21
+
Introduction
6 Lectures 20:49

In this video we’ll be discussing why you should learn how to make transitions and animations with HTML5 and how to get started

Introduction
02:33

How do we find the difference between a transition and an animation?

What is the Difference between a Transition and an Animation?
02:31

Vectors are mathematical concepts that are usually represented graphically using arrows

Introduction to Vectors
03:22

Learn about vector addition, multiplication, and the dot product

Vector Examples
04:57

How can you smooth out transitions or animations?

Easing and Acceleration
03:20

Learn about quadratic Bézier curves

Preview 04:06
+
Rendering elements
6 Lectures 16:10

How do we prepare our code in order to get it ready to play an animation or transition?

Rendering Elements Using DOM Objects #1
02:24

What’s the proper way to render elements on a browser using the DOM?

Rendering Elements Using DOM Objects #2
03:00

How can you render things using the HTML5 Canvas object?

Rendering Elements Using the HTML5 Canvas Object #1
03:00

Can you display preexisting photos or pictures within the HTML5 Canvas object?

Rendering Elements Using the HTML5 Canvas Object #2
02:43

Is there a way to simplify working with SVG?

Preview 02:37

Can I display raster pictures with SVG?

Rendering Elements Using SVG with Raphaël #2
02:26
+
Animating elements
7 Lectures 29:56

What’s the best way to prepare a rendering scene that is ready to support animations or transitions?

Setting up a Conventional Rendering Scene
04:59

How can I use the DOM to animate elements?

Using the DOM to Animate Objects
03:51

Is it possible to smoothen out the change between two CSS3 properties?

Animating Elements Using CSS3 Transitions
05:17

Is there a way to have a higher degree of control over how CSS3 animations are played?

Animating Elements Using CSS3 Keyframes
03:50

Is it possible to animate elements using Raphaël?

Using SVG with Raphaël to Animate Objects
03:38

How can I get started doing animations or transitions with the HTML5 Canvas object?

Animating Elements Using the HTML5 Canvas Object #1
03:34

How can I make smooth animations or mimic acceleration using the HTML5 Canvas object?

Animating Elements Using the HTML5 Canvas Object #2
04:47
+
Introduction to WebGL
7 Lectures 27:35

How do I download and set up ThreeJS?

Downloading and Setting Up ThreeJS
03:53

How do I configure a camera within the scene in ThreeJS?

Introduction to Cameras
02:12

How can I create a basic mesh in ThreeJS?

Rendering Simple Geometries
03:29

How can I do basic animations with ThreeJS?

Animating Geometries
03:58

Is it possible to use objects made with Blender within ThreeJS?

Preview 04:39

How are complex 3D objects made?

Rendering Imported Models
04:37

How can I animate a 3D object with a bone structure in ThreeJS?

Preview 04:47
+
Complex animations
5 Lectures 25:22

What is a spritesheet?

Animating Spritesheets #1
05:08

How can I animate objects using spritesheets?

Animating Spritesheets #2
05:24

What is a particle generator?

Particle Generators #1
04:58

How do I develop a particle generator?

Preview 05:01

How can I simulate smoke?

Particle Generators #3
04:51
+
Practical examples
3 Lectures 13:29

How can we apply all the animation methods taught throughout the videos in practical examples?

Practical Examples #1
04:40

How can I make a card flip with CSS3?

Practical Examples #2
04:05

How can I make a working clock with CSS3?

Practical Examples #3
04:44
About the Instructor
Packt Publishing
3.9 Average rating
7,219 Reviews
51,654 Students
616 Courses
Tech Knowledge in Motion

Packt has been committed to developer learning since 2004. A lot has changed in software since then - but Packt has remained responsive to these changes, continuing to look forward at the trends and tools defining the way we work and live. And how to put them to work.

With an extensive library of content - more than 4000 books and video courses -Packt's mission is to help developers stay relevant in a rapidly changing world. From new web frameworks and programming languages, to cutting edge data analytics, and DevOps, Packt takes software professionals in every field to what's important to them now.

From skills that will help you to develop and future proof your career to immediate solutions to every day tech challenges, Packt is a go-to resource to make you a better, smarter developer.

Packt Udemy courses continue this tradition, bringing you comprehensive yet concise video courses straight from the experts.